Different CSS styles for different pages

**Luxe** · Oct 12, 2011 10:28

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?

Thanks.

**kohoutek** · Oct 16, 2011 21:33

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

PHP Code:


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

add_action('login_head', 'push_logo');

**ralph.m** · Oct 16, 2011 23:19

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

PHP Code:


<?php
$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.

**Luxe** · Oct 20, 2011 15:23

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

PHP Code:


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.