Support » Themes and Templates » How to Use Different CSS for Header Conditional Tags?

  • Aaress



    I’m working on a project for a client and have run into a glitch where the header css needs to be different for the home page, compared to the rest of the site’s pages.

    The site has a video player in the header, but we’ve modified it with a conditional tag to only display the video on the home page. However, the header code in the stylesheet has specific parameters for height that need to be adjusted if there is no video player.

    You can view the site here:

    Here’s what is currently being used in the style.css file:

    header {
    	background-image: url(images/skin1/header_fa.jpg);
    	background-repeat: no-repeat;
    	background-color: #05647A;
    	background-position: 50% 0%;
    	position: relative;
    	height: 663px;
    	z-index: 2;
    	display: none;

    And this is what the header.php file has:

    [code moderated – please read for posting code]

    Any help would be much appreciated! Thank you so much!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael


    the existing body_class() function in the body tag will output page specific css classes; for instance .home for the front page; use these for styling;

    .home #header { .... }



    Thanks so much for the help, alchymyth. I do have another question. I’ve never used body_class functions before, so how would I implement this code into the template?

    Here’s a pastebin of the code used in this section of the header.php file.


Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to Use Different CSS for Header Conditional Tags?’ is closed to new replies.