Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

  1. #1
    Join Date
    Jan 2007
    Posts
    403

    Default LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    I think this is the sort of thing you had in mind for this section?

    Like all good end-users I try to avoid hacking the core as much as possible, but unfortunately I'm a perfectionist! The thought of those table tags and inline styles hanging around the place makes me shudder.

    For my new project I am thinking to iron as many of them out as I can, so where better to start than the login form! I am documenting these changes VERY carefully, so I can update later, and replace my changes afterwards.

    I really wish I understood the addon system better, I would love to be able to code these changes into addons, but I'm afraid I find the docs on the subject pretty unenlightening :( So here we go, this is my code for a semantic, accessible and modern login form, my css follows.

    Last note. you'll see there are some things I put in just to take out again (like legends) but I tried to make it for everyone! This all comes from login.inc.php at around line 238 (in version : 2.5.5)

    Code:
    $display .= '<div id="LogInFormWrapper">';
    $display .= '<form action="admin/index.php" method="post" id="LogInForm">';
    $display .= '<fieldset>';
    $display .= '<input type="hidden" name="referer" value="'.$_SERVER['HTTP_REFERER'].'" />';
    $display .= '<legend>Log in</legend>';
    $display .= '<label for="username">' . $lang['admin_login_name'] . '</label><input type="text" name="user_name"  tabindex="1" maxlength="30" id="username" />';
    $display .= '<label for="password">' . $lang['admin_password'] . '</label><input type="password" name="user_pass" tabindex="2" maxlength="30" id="password" />';
    $display .= '<label for="remember">' . $lang['remember_me'] . '</label><input type="checkbox" name="remember" tabindex="3" id="remember" />';
    $display .= '<hr />';
    $display .= '<input type="submit" value="' . $lang['login'] . '" />';
    $display .= '</fieldset>';
    $display .= '</form>';
    
    $display .= '<form action="' . $config['baseurl'] . '/admin/index.php?action=send_forgot" method="post" id="EmailMyPasswordForm" >';
    $display .= '<fieldset>';	
    $display .= '<legend>Forgotten?</legend>';
    $display .= '<label for="email"><em>' . $lang['enter_your_email_address_for_pass'] . '</em><input type="text" name="email" id="email" tabindex="4" /></label>';
    $display .= '<input type="submit" value="' . $lang['lookup'] . '"  />';	
    $display .= '</fieldset>';
    $display .= '</form>';
    $display .= '</div>';
    My css:

    Code:
    #LogInFormWrapper  {
    background:#fff none repeat scroll 0 0;
    border:5px solid #ddd;
    margin:30px auto 10px;
    padding: 20px;
    text-align: left;
    width:400px;
    }
    
    #EmailMyPasswordForm {
    margin-top:10px;
    }
    
    fieldset {
    border: none;
    }
    
    legend {
    display: none;
    }
    
    label {
    color: #333;
    display: block;
    margin: 5px 0px 4px 0px;
    }
    
    input[type="text"], input[type="password"] {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    color: #333;
    margin-bottom: 7px;
    padding: 5px;
    width: 95% !important;
    }
    
    input[type="submit"] {
    background: #eee none repeat scroll 0 0;
    border: 3px double #ccc;
    font-size: 13px;
    padding: 2px;
    width: 50%;
    cursor: pointer;
    }
    
    input:focus {
    background-color: #FFFFCC;
    }
    
    hr {
    border-width:0 0 1px;
    height:0;
    margin:1em 0;
    }
    Later I might add a dash of jQuery validation or such like, but for now this validates (as strict) and full fills all the things a good form should. Please let me know if this was the type of thing you intended for the "sandbox" and I can post more core changes as I make them.

    Thanks
    Last edited by zarathustra; 02-22-2009 at 01:06 PM. Reason: jntcomputers pointed out that I omitted the action in the form code

  2. #2
    Join Date
    Jun 2004
    Posts
    1,067

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    Yes this is the perfect spot to post such changes. You may also want to open a feature request, with a description of the change and link to your post here. THat will help the developers notice your changes and make it more likley we will add them into a future Open-Realty release if they seem to server the general OR user.

  3. #3
    Join Date
    Feb 2005
    Location
    BiH
    Age
    40
    Posts
    811

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    zarathustra, can you give a link to see this in action. Thank you

  4. #4
    Join Date
    Jan 2007
    Posts
    403

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    Hi Bit,

    It's a new project so I only have it running on localhost, however I copied my "source code" and added the styles into the document head (the horror!) and I include it for you below. This will make it super easy for you, and any one else, to simply copy it to wherever (Notepad?) save it as an .html file and launch it in a browser. Then you can see exactly how it looks

    Maybe it's a good idea for anyone making core changes for "looks" in the sandbox to do this. It'll save people altering their core just to find out!

    Here's the code, let me know what you think

    Tom

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Form test</title>
    
    <style type="text/css">
    
    #LogInFormWrapper  {
    	background:#fff none repeat scroll 0 0;
    	border:5px solid #ddd;
    	margin:30px auto 10px;
    	padding: 20px;
    	text-align: left;
    	width:400px;
    }
    
    #EmailMyPasswordForm {
    	margin-top:10px;
    }
    
    fieldset {
    	border: none;
    }
    
    legend {
    	display: none;
    }
    
    label {
    	color: #333;
    	display: block;
    	margin: 5px 0px 4px 0px;
    }
    
    input[type="text"], input[type="password"] {
    	background: #fff none repeat scroll 0 0;
    	border: 1px solid #ccc;
    	color: #333;
    	margin-bottom: 7px;
    	padding: 5px;
    	width: 95% !important;
    }
    
    input[type="submit"] {
    	background: #eee none repeat scroll 0 0;
    	border: 3px double #ccc;
    	font-size: 13px;
    	padding: 2px;
    	width: 50%;
    	cursor: pointer;
    }
    
    input:focus {
    	background-color: #FFFFCC;
    }
    
    hr {
    	border-width:0 0 1px;
    	height:0;
    	margin:1em 0;
    }
    </style>
    
    </head>
    
    <body>
    
     <div id="LogInFormWrapper">
     
         <form action="" method="post" id="LogInForm">
         
             <fieldset>
                 <input type="hidden" name="referer" value="" />
                 <legend>Log in</legend>
                 <label for="username">Login Name</label>
                 <input type="text" name="user_name"  tabindex="1" maxlength="30" id="username" />
                 <label for="password">Password</label>
                 <input type="password" name="user_pass" tabindex="2" maxlength="30" id="password" />
                 <label for="remember">Remember me</label>
                 <input type="checkbox" name="remember" tabindex="3" id="remember" />
                 <hr /><input type="submit" value="Log In" />
             </fieldset>
             
             </form>
             
        <form action="admin/index.php" method="post" id="LogInForm">
             
             <fieldset>
                 <legend>Forgotten?</legend>
                 <label for="email"><em>Whoa! I forgot my password, please email it to me!:</em>
                 <input type="text" name="email" id="email" tabindex="4" />
                 </label>
                 <input type="submit" value="Lookup"  />
             </fieldset>
         
        </form>
     
     </div>
    
    
    </body>
    </html>
    Last edited by zarathustra; 02-22-2009 at 01:06 PM. Reason: jntcomputers pointed out that I omitted the action in the form code

  5. #5
    Join Date
    Jan 2008
    Location
    Coastal North Carolina
    Posts
    100

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    I like the way it looks - great job!

  6. #6
    Join Date
    Jan 2007
    Posts
    403

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    Thanks very much, and of course because it's coded semantically and has all the css hooks in place (classes and id's) you can make it look any way you like.

    I HAVE read the addon documentation, but still find it too difficult. I know how the forum feels in general about "hand holding", but my login form above looks perfect for an addon coding demonstration (I might be wrong!?). I would love it of someone could code it into an addon, and notate the process. I could then dissect it. Of course the end result would still be a beneficial addon I think.

    If I could finally get a grip of the addon system I would love to start producing "css/semantic" addons for cleaning up the sometimes "dated" html/css rendered by this fantastic product.

    Thanks again for the feedback.

  7. #7
    Join Date
    Feb 2006
    Posts
    763

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    i added this code to one the pages i created in the page editor
    but it doe not let me sign in, it returns back to the same page with the loging form and logged in.

    can you help?

  8. #8
    Join Date
    Sep 2004
    Location
    Jackson, MS
    Posts
    447

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    The form post back to the same page the form is posted to. In order for it to log you in, the page that reads the form must check for login status, the OR authentication process. So, in order for it to work pasted on any page, you must direct the user to a page that authenticates.. like the admin, or the member login?!?!

    Change the action:
    Code:
    <form action="admin/index.php" method="post" id="LogInForm">

  9. #9
    Join Date
    Jan 2007
    Posts
    403

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    Thanks for that jnt, I was still experimenting when I posted the code and omitted the action! Woops. I am editing my original post in case it causes any problems down the line. Cheers.

  10. #10
    Join Date
    Dec 2008
    Posts
    31

    Default Re: LogIn Form - Rewritten with semantics,accessibly & prettiness in mind

    I didn't want to mess with the core, so I just did some nasty kludging of the CSS and added a custom DIV to wrap things via the php QUERY_STRING. I also used the language file to add some html tags and css classes around some of the output. You can use Firebug in Firefox to see my code.

    http://apm.dreamhosters.com/index.ph...n=member_login

    You'll notice my registration page is styled the same:

    http://apm.dreamhosters.com/index.ph...up&type=member

    So is the profile page if you log in as guest/guest.

    I'm sure this styling thing for these forms has to be fixed at core--and a bug report has been filed.

Similar Threads

  1. help on custom login form
    By budin24 in forum Templates - Help/Ideas/Discussion (CLOSED)
    Replies: 5
    Last Post: 12-01-2009, 02:06 PM
  2. Severe Problem - Whole Site down - Losing my mind
    By iswy in forum Installation/Configuration Help (CLOSED)
    Replies: 6
    Last Post: 11-01-2007, 11:17 AM
  3. Changing Login Form
    By eweb in forum Templates - Help/Ideas/Discussion (CLOSED)
    Replies: 4
    Last Post: 09-02-2006, 09:58 AM
  4. Might lose my mind
    By newpctech in forum HELP (CLOSED)
    Replies: 7
    Last Post: 11-28-2004, 03:56 AM
  5. multiple destination login form
    By sunfilly in forum Feature Request (CLOSED)
    Replies: 1
    Last Post: 01-09-2004, 09:18 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •