0

I'm not a developer and have so far struck out in Stack Exchange trying to figure out some code to add to fix my issue. We have a Visualforce page where the CSS header overlaps with the first line of the body. I'm pasting my VF page code below. How can adjust to ensure our logo header doesn't overlap with the body? Thank you!

<apex:page id="forgotPassword" showHeader="false" controller="ChangePasswordController" standardStylesheets="false" doctype="html-5.0" sidebar="false" title="Forgot Password">
<apex:form>
 
<html>
  <head>
    <title>Forgot Password</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="stylesheet"  type="text/css" href="/resource/1512657972000/CSSStyle/CSSStyle/Style/main.css"/>
     <link type="text/css" rel="stylesheet" href="/resource/1512657972000/CSSStyle/CSSStyle/Style/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="/resource/1512657972000/CSSStyle/CSSStyle/Style/customAMC.css"/>
    <script src="//code.jquery.com/jquery.min.js"></script>
 
  </head>  
  <body>
    <div class="body-container">
      <div class="head">
        <h1 class="maintitle">Change Password</h1>
        <p class="maindescription">Please provide your new Password</p>
         <label>Your password must be 8 characters long and a mix of letters and numbers. Please don't use your previous three passwords.</label>
                <br></br>
                <br></br>
      </div>
      <div class="login-form">
      <apex:pageMessages ></apex:pageMessages>
             <!-- <div class="form-group">  
              <apex:outputLabel value="Old Password" for="oldpsw" />              
                <apex:inputSecret required="true" id="oldpsw"  value="{!oldPassword}" style="form-control" />
              </div> -->
              <apex:outputPanel styleClass="form-group" layout="block" rendered="{ !$Site.IsPasswordExpired}" >
                  <apex:outputLabel value="Old Password" for="oldpsw" rendered="{ !$Site.IsPasswordExpired}" />              
                <apex:inputSecret required="true" id="oldpsw"  value="{!oldPassword}" rendered="{ !$Site.IsPasswordExpired}" style="form-control" title="Please use 8 letter password with mix of Alphanumeric Characters"/>
              </apex:outputPanel>

              <div class="form-group">
                <label>New Password</label>
                <apex:inputSecret id="psw" value="{!newPassword}" style="form-control" title="Please use 8 letter password with mix of Alphanumeric Characters"/>
              </div>
              <div class="form-group">
                <label>Verify New Password</label>
                <apex:inputSecret id="vpsw" value="{!verifyNewPassword}" style="form-control" title="Please use 8 letter password with mix of Alphanumeric Characters"/>
              </div>
        <div class="form-group">
        <apex:commandButton id="cpwbtn" action="{!changePassword}" value="{!$Label.site.change_password}" styleclass="btn btn-submit"/>
        </div></div>
    </div>
    <div class="body-container footer">
      <div class="helpcontent footermember">Need Help? Email <a href="mailto:[email protected]">[email protected]</a></div>
      <div class="copyright footermember">
         &copy; Copyright 2018 All Rights Reserved. Appalachian Mountain Club, 10 City Square, Boston, MA 02129 
        P: 617-523-0655 F: 617-523-0722 | <a href="#">Privacy Policy</a>
      </div>
    </div>
    <div class="brandbar"></div>
  </body>
</html>
 
</apex:form>
  
</apex:page>
3
  • 1
    I imagine that 90% of the issue here is that you have a page inside a page here (<apex:page> automatically generates <html>, <head>, and <body> tags), and chances are pretty good that this'll resolve itself if you stick to using things like <apex:input>, <apex:pageBlock> and the like instead of using <div> and your own CSS.
    – Derek F
    Dec 21, 2020 at 16:55
  • Side note: I imagine this is for a community site. It looks to me like you may be storing passwords as plain text, which is bad (and just asking for a security breach). If you can use Salesforce to manage the logins (and password changes), you should do so instead of rolling your own login form.
    – Derek F
    Dec 21, 2020 at 16:59
  • @DerekF thank you so much! We want to keep the CSS though. Is there a cleaner way to achieve this? Additionally I appreciate your thoughts on the password. This was developed by a consultant no longer working with us, but I'm hoping to streamline some of communities processes in the future! Dec 22, 2020 at 17:25

0

This site is temporarily in read-only mode and not accepting new answers.

Browse other questions tagged .