Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Plugins & Atahualpa »

[SOLVED] How to customize Login, Registration and Lost Password with wp-customized-lo


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
 
Prev Previous Post   Next Post Next
  #1  
Old Jun 23, 2009, 07:19 AM
fromtheranks
 
145 posts · Apr 2009
Dev Env't: XP Pro SP3, IIS 5.1, MySQL 5.1, PHP 5.2.x, WP 2.7.1, Atahualpa 3.3.3, IE 7, FF 3.0.x
Information [SOLVED] How to customize Login, Registration and Lost Password with wp-customized-lo

This evening I downloaded the wp-customized login plugin V1.0 from: http://www.thinkinginwordpress.com/2.../#comment-1167 (it's also available on the WP site: http://wordpress.org/extend/plugins/...tomized-login/).

I wanted to tailor my login, registration and lost password pages to match my styling of the Atahualpa theme and after poking around a bit this seemed the best place to start. Post some trial and error ... and researching through the various comments on the plugin authors' site, ... and after a big tip on how to differentiate Firefox from IE7 from Shedhead (http://forum.bytesforall.com/showthr...=8993#post8993), ... plus tips garnered from this forum over the last couple of months ... I have a workable solution.

You should know that part of my original "issue" with the plugin was that the default image container just above the login form is fairly small and I couldn't figure out how to resize it to accept my header image (which is 1280 x 160 pixels). That's where the tweaking began. It ended in the following replacement code for the custom-login.css file which is in the plugin's folder after installation. While there may be better ways to do this, the code does work.

To use, just change your image names and colors to taste. If you don't mind the smaller image right above the form then remark out my header code (which starts with "{background: url{ftr-it-header-image-v2.jpg}...), change the #login h1 width and height to some values other than zero and play with the margin-top settings. Read the comments as you go along, they explain quite a bit:

Code:
/* modified 6/23/09 by DPH to totally customize the login, registration and lost password pages */
/* this code will completely replace the starter custom-login.css file that comes with wp-customized-login plugin 1.0 */
/* Download available at:  http://wordpress.org/extend/plugins/wp-customized-login/ */

/* have to put something here or the WP logo shows up, so make it disappear with 0x0px, ... */
/* adding margin-top moves the form down below the new header image defined in the body section; */
/* however, the position margin-top sets on the page varies between Firefox and IE 7, though not fatally. */
/* adding the two variants of margin-top corrects this:  FF reads "margin-top:", IE7 reads:  ".margin-top:" */
#login h1 a{background:url(logo.png) no-repeat; width:0px; height:0px; margin-left:0px;margin-top:147px;.margin-top:70px;}

/* basic code structure by Craig 2/26/09; modified and expanded for my site */
body.login 

/* puts my header image - 1280x160 - across the top of the page starting at the upper left corner, replaces above image */
/* border-top-color changes the border color above the image to match the color set by the html statement below */
{background: url(ftr-it-header-image-V2.jpg) no-repeat top left; border-top-color: #BDBDBD;}

/* set text and hover colors for border top above image */
.login #backtoblog a { color: #000099; }
.login #backtoblog a:hover { color: #000099; text-decoration: underline; font-weight: bold; }

/* adds color to area of page below the image -- code solution by Luke 3/14/09 */
html {background-color:#BDBDBD;}

/* not sure what this code does, other than when unremarked, if set less than the height of the header image */
/* it cuts into the image, more didn't seem to matter and leaving it remarked out has no apparent effect */
/* #login { height: 160px; } */

/* #nav = lost password link */
.login #nav a { color: #000099 !important; }
.login #nav a:hover { color: #000099 !important; text-decoration:underline; font-weight:bold;}

/* submit button:  button color, border color, text color, font weight, new:  margin-top moves the button down */
#login form .submit input {
background: #000099 none repeat scroll 0 0;
border-color: #F2F2F2 !important;
color: #F2F2F2 !important;
font-weight:bold;
margin-top:5px;
}

/* form color, new:  reg_passmail controls the text color for the "A password will be sent by email to you" message. */
#loginform {background: #BDBDBD;}
#loginform p {}
#loginform label { font-family: verdana,arial; font-size:1.0em; color: #000099;}
#reg_passmail {color: #000099;}

/* register form, uses #nav and .submit settings */
#registerform { background: #BDBDBD; }
#registerform label { font-family: verdana,arial; font-size:1.0em; color: #000099;}

/* lost password, uses #nav and .submit settings */
#lostpasswordform { background: #BDBDBD; }
#lostpasswordform label { font-family: verdana,arial; font-size:1.0em; color: #000099;}

#wp-submit { }

#forgetmenot { }

#nav { }

.message {
background-color: #BDBDBD !important;
color: #FF0000 !important;
border-color: #FF0000 !important;
font-size:1.0em;
}
Hope this helps.

P.S. Craig and Luke were commentators on the plugin site who had offered code suggestions.

Last edited by fromtheranks; Jun 23, 2009 at 03:34 PM.
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding login/logout menu option. soop Atahualpa 3 Wordpress theme 12 Sep 12, 2011 01:01 PM
[SOLVED] help! i cant login to my wp-admin itsawrapjas Forum How-To 5 Jul 7, 2009 01:32 PM
Client login/ftp access ErikU Installing & running WordPress 1 Apr 16, 2009 03:33 PM
stupid question - login AJayH Atahualpa 3 Wordpress theme 3 Apr 7, 2009 08:15 AM
Making a 'child page' password protected when it holds a forum Steven Atahualpa 3 Wordpress theme 2 Mar 31, 2009 06:11 PM


All times are GMT -6. The time now is 07:57 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.