Subscribe: RSS
  • Hi all, I have version 1.0.4 and created a register button below the forgot password text but seem to have a css problem that I cannot see. In IE and Opera (so far) the create account text is showing above the forgot password text instead of below it. It looks fine in Firefox. Was wondering if a new pair of eyes might be of help as I’m not that good with css. Here is the url (keep in mind it’s just a test phase while I’m building the site for my sister) http://www.vanislebc.com/webdev/frugal/
    • Look like you need to wrap your ’Create Account’ text in a <span>, <div> or <p> to help it clear the ’Login" & "Forget Your Password"
      • Thanks bunk58, not sure why though as I just finished another site for a non profit group with the login on the right side and everything was the same and it works fine there. I had to put a <p> before the {{register}} and a </p> after but it doesn’t look good. Doesn’t align to the left for some reason. Also the lost password text now looks out of place. Also tried to place the <p> tags in the chunk but that didn’t work either. Looks perfect in Firefox.

        <!-- login form section-->
        <form method="post" name="loginfrm" action="[+action+]">
        <input type="hidden" value="[+rememberme+]" name="rememberme" />
        <fieldset>
        <h3>Your Login Details</h3>
        <label for="username">User: <input type="text" name="username" id="username" tabindex="1" onkeypress="return webLoginEnter(document.loginfrm.password);" value="[+username+]" /></label>
        <label for="password">Password: <input type="password" name="password" id="password" tabindex="2" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" value="" /></label>
        <input type="checkbox" id="checkbox_1" name="checkbox_1" tabindex="3" size="1" value="" [+checkbox+] onclick="webLoginCheckRemember()" /><label for="checkbox_1" class="checkbox">Remember me</label>
        <input type="submit" value="[+logintext+]" name="cmdweblogin" class="button" />
        <a href="#" onclick="webLoginShowForm(2);return false;" id="forgotpsswd">Forget Your Password?</a>
        </fieldset>
        </form>
        <p>{{register}}</p>
        <hr>
        • I’ve tried to fix this by trying to do different things in my css files and the formlogin chunk but still cannot figure it out.
          Here are both screen shot images ( IE 8 ) one is from the right side of the webpage (one I want) and the other is from the left side of the webpage (one I’m trying to fix). The first is from a different website of course but both use the form.css that came with the default content when installing a fresh install of Modx 1.0.4.




          Here is my form.css code from the one I’m trying to fix:
          #sidebarlogin label {
          display: block;
          margin-top: 5px !important;
          }
          
          #sidebarlogin input {
          	width: 85%;
          	margin: 3px;
          }
          
          #sidebarlogin #checkbox_1 {	width: auto; float: right; border: 0 !important;}
          #sidebarlogin h3 {
          display: none;
          }
          .button {width: auto !important; height: auto !important; padding: 2px !important; margin-top: 5px !important; margin-bottom: 5px !important;}
          
          #sidebarlogin #forgotpsswd {
          	font-size: 80%;
          	display: block;
          	float: right;
          	margin: 05px 0 0 1px;
          }
              
          #register {
            float:left;
          } 
              
          #manager {
            float:left;
          }


          Here is the original form.css code used in the other website:
          #sidebarlogin label {
          display: block;
          margin-top: 5px !important;
          }
          
          #sidebarlogin input {
          	width: 100%;
          }
          #sidebarlogin #checkbox_1 {	width: auto; float: right; border: 0 !important;}
          #sidebarlogin h3 {
          display: none;
          }
          .button {width: auto !important; height: auto !important; padding: 2px !important; margin-top: 5px !important; margin-bottom: 5px !important;}
          
          #sidebarlogin #forgotpsswd {
          	font-size: 80%;
          	display: block;
          	float: right;
          	margin: 10px 0 0 1px;
          }


          And here is the loginform code:
          <!-- #declare:separator <hr> --> 
          <!-- login form section-->
          <form method="post" name="loginfrm" action="[+action+]"> 
              <input type="hidden" value="[+rememberme+]" name="rememberme" /> 
              <fieldset>
                 <h3>Your Login Details</h3>
                  <label for="username">User: <input type="text" name="username" id="username" tabindex="1" onkeypress="return webLoginEnter(document.loginfrm.password);" value="[+username+]" /></label>
              	<label for="password">Password: <input type="password" name="password" id="password" tabindex="2" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" value="" /></label>
              	<input type="checkbox" id="checkbox_1" name="checkbox_1" tabindex="3" size="1" value="" [+checkbox+] onclick="webLoginCheckRemember()" /><label for="checkbox_1" class="checkbox">Remember me</label>
              	<input type="submit" value="[+logintext+]" name="cmdweblogin" class="button" />
          	<a href="#" onclick="webLoginShowForm(2);return false;" id="forgotpsswd">Forget Your Password?</a>
                               	<div id="register">{{register}}</div>
                               <div id="manager">{{manager}}</div>
                 </fieldset>
          </form>
          
          • The two blocks (create account and manage website) don’t both fit, so the manage website is dropping below the create account. The lower image, create account and manager will fit, so they are side by side.

            If you want them to line up horizontally, either enlarge the outer container or make each one smaller until they both fit. If you want them one under the other, don’t float them, or give them enough padding that they no longer fit together.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
            • Thanks Susan, that got me thinking and I’ve got everything the way I want it except the forget your password text.