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:

/* 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.

Quick note: there is a missing close remark symbol at the end of the third remark line. It should read:

/* Download available at:  http://wordpress.org/extend/plugins/wp-customized-login/ */

Note: this has now been fixed.

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:

$stylesheet_uri=get_bloginfo(’siteurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;

To this:

$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"):

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.

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

Anybody else got experience with Atahualpa with "Theme My Login"?

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'); 


you would need to edit function.php and add it at the end before the closing ?> PHP tag

note: changes to theme code will have to be redone everytime you upgrade the theme, so keep good notes.

Thanks for the advice, have everything documented as well - did only changes to functions and index php.

If I add that at the end:

PHP Code:

function custom_loginlogo() { 
echo '<style type="text/css"> 
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/logo.jpg) !important; } 
</style>'; 
} 
add_action('login_head', 'custom_loginlogo'); 


no image will show, uploaded the Logo.jpg in the images folder? Do I use the wrong path or is the image tag case sensitive?

If you type in the full URL to the image in the browser address bar, do you see it?
If not it isnt there, the name is wrong or there is a permission problem

If you do see it, there is an error in your code

It is case sensetive, when I used a capital "L" it worked.

The only thing is now how to position it proper (see Pic), any advice on this please?!

You need to ask the plugin's author

Here the full code I am using for future reference and other users too - replace with your picture path, picture dimensions and and desired URL):

PHP Code:

function custom_loginlogo() { 
echo '<style type="text/css"> 
.login h1 a {background-image: url('.get_bloginfo('template_directory').'/images/Logo.jpg) !important; margin-left:auto;  margin-right:auto; height: 180px !important; width: 180px !important;} 
</style>'; 
} 
add_action('login_head', 'custom_loginlogo'); 
add_filter( 'login_headerurl', 'custom_loginlogo_url' );
function custom_loginlogo_url($url) {
    return 'http://www.tribe-online.de';
} 


This thread is about using the Wp-custom-login plugin. So what you have done is hijacked the thread, this is a no no. If you are dealing with something other than the subject of the thread, open a new thread.

Since you got the advice from another site, you should first ask the author of that article your questions. You could also try it with the twenty-eleven theme to see if it works there

Sorry did not want to hijack, just thought I share me just gained knowledge, I thinks its very useful if somebody wants to replace the login-logo without using a PI.

Why would you want to edit code that won't survive a theme upgrade when there are plugins that will do this quite nicely. Also it appears you are having "issues" with your solution.

No it did work out just fine. I have to add manual php code to the functions.php each time an upgrade happens as my metabox require me to do so. Not its just 10 lines more. And it worked out great.