How to Use Different CSS for Header Conditional Tags?

  • Hi,

    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: https://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 https://codex.www.ads-software.com/Forum_Welcome#Posting_Code for posting code]

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

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

  • 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;

    example:
    .home #header { .... }

    Thread Starter Aaress

    (@aaress)

    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.

    https://pastebin.com/LnY4CC5T

    Thanks!!!

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.