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
  #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.
  #2  
Old Jun 23, 2009, 07:26 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
Quick note: there is a missing close remark symbol at the end of the third remark line. It should read:

Code:
/* Download available at:  http://wordpress.org/extend/plugins/wp-customized-login/ */
Note: this has now been fixed.

Last edited by fromtheranks; Jun 23, 2009 at 02:49 PM.
  #3  
Old Jun 23, 2009, 07:44 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
One more note to complete the set. If your WordPress URL and Blog Address URL are set differently (see General Settings) then you will also need to tweak wp-customized-login.php, from this:

Code:
$stylesheet_uri=get_bloginfo(’siteurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;
To this:
Code:
$stylesheet_uri=get_bloginfo(’wpurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;
Also, while I'm at it I should add a note about these two settings in the css file (at the end of the line beginning with "#login h1"):
Code:
margin-top:147px;.margin-top:70px;
This code was the result of the tip that Shedhed gave me. The "margin-top: 147px" is read properly by Firefox and ignored by IE7. The ".margin-top:70px" is read properly by IE7 and ignored by FF. The difference is the period. See the reference in the original thread submission for the complete story.

Hope this helps.

Last edited by fromtheranks; Jun 23, 2009 at 02:49 PM.
  #4  
Old Dec 4, 2009, 02:50 AM
everyman
 
79 posts · Nov 2009
Philadelphia
I use "theme my login" along with "aweber registration integration" and Memberwing and it works beautiful. See
http://internet101.biz/login/?instan...ction=register

Marc
  #5  
Old May 15, 2010, 04:26 PM
libella
 
1 posts · May 2010
Anybody else got experience with Atahualpa with "Theme My Login"?
  #6  
Old Apr 24, 2012, 03:13 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
Here is a site that has some code that should change the login logo with ease, but its not working in Atahualpa, I guess maybe I would have to add it to Add CSS/JS script section?

PHP Code:
function custom_loginlogo() {
echo 
'<style type="text/css">
h1 a {background-image: url('
.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>'
;
}
add_action('login_head''custom_loginlogo'); 
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg

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 04:30 PM.


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