Different CSS styles for different pages

For some reason on the Register/Login page for my site the logo gets pushed up a few inches but only on those two pages. I already have the #logo defined in the css so if I change it to accommodate the Register/Login page it won’t be in the right position on other pages. Basically what I need to do is have a different margin-top set for the logo on the Register and Login page. But everything I’ve tried has returned errors (like using the <body id=" "> tag then calling that in the CSS).

Any advice?


One way is to create a new function in /wp-content/my_theme/functions.php like so:

function push_logo() 
echo '<style type="text/css">#logo {margin-top: 10px !important; }</style>';

add_action('login_head', 'push_logo');

Maybe another way to add a special class to the body tag would be to do something like this in your template:

$url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; 

if ($url == 'http://mysite.com/register.php' || $url == 'http://mysite.com/login.php') {
echo '<body class="specialclass">'; } else {
echo '<body>';

Just replace the <body> tag with the code above, changing the urls to the urls of the pages in question.

Thanks for the suggestions - tried both but oddly neither worked. The one thing that fixes the problem causes a bigger problem. Adding

echo '<style type="text/css">#logo {margin-top: 9px !important; }</style>';

To the top of wp-login.php aligns the logo properly, but when you fill in your username/pass and click submit it doesn’t redirect you. It just leaves you on a blank page. So I am completely stumped on this one, from what I’ve seen, adding ANYTHING to wp-login.php messes something up.

Luxe, I’ve tested the code I posted on my testserver and it works 100%. How have you implemented the code?

I just copied and pasted the code into my WP functions file.