How to Use Different CSS for Header Conditional Tags? (3 posts)

  1. Aaress
    Posted 4 years ago #


    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: http://bit.ly/o5Q9TR

    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 http://codex.wordpress.org/Forum_Welcome#Posting_Code for posting code]

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

  2. Michael
    Part-Time Forum Moderator
    Posted 4 years ago #

    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 { .... }

  3. Aaress
    Posted 4 years ago #

    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.



Topic Closed

This topic has been closed to new replies.

About this Topic