WordPress.org

Ready to get started?Download WordPress

Forums

Headers in f8 static (5 posts)

  1. prodigal7
    Member
    Posted 3 years ago #

    This website, which utilizes the f8 Static theme, uses a header image for the home page, but no header image for other pages (i.e. "Collections" or "News"). Can somebody tell me how to replicate this?
    I understand how to assign each page a different header using "featured images," but how do I make a header go away altogether on some pages, but not on others?

  2. DSchragg
    Member
    Posted 3 years ago #

    You can implement the body_class function and then use CSS to load different images on the pages you want.

    Read more here:
    http://codex.wordpress.org/Function_Reference/body_class

  3. baronc2
    Member
    Posted 3 years ago #

    Hi there,

    I have exactly the same problem for a couple days now! I would like to have the header image for the homepage only, and have nothing on any of the other pages.

    I am fairly new to CSS and HTML, could you point me in the right direction as to how to resolve this problem please?

    my website is http://www.chrisbaronmedia.com

    thank you

  4. prodigal7
    Member
    Posted 3 years ago #

    Unfortunately, I was never able to figure this out and eventually gave up. Perhaps somebody else will still chime in. Sorry!

  5. DSchragg
    Member
    Posted 3 years ago #

    Ok guys,

    Put this in header.php of your template replacing the existing <body> tag:
    <body id="body<?php $bodyid=$_SERVER['REQUEST_URI']; echo substr($bodyid,1,4);?>">

    Then every page will create a unique body id, you can view the source on each page to see the different body id's.

    Then throw another div id in your template where you want the photo(s) to appear, I used <div id="headerimage"></div>

    Then use CSS to display the different photos based on the body id. Here's an example of the CSS I use to show a different header image on every page or section of a website:

    #body #headerimage{
    	margin-top: 0px;
    	height: 222px;
    	width:968px;
    	margin-left:11px;
    	background-image: url("images/header/front.jpg");
    }
    #body * #headerimage{
    	margin-top: 0px;
    	height: 222px;
    	width:968px;
    	margin-left:11px;
    	background-image: url("images/header/front.jpg");
    }
    
    #bodyabou #headerimage{
    	margin-top: 0px;
    	height: 222px;
    	width:968px;
    	margin-left:11px;
    	background-image: url("images/header/about_us.jpg");
    }

    #body * #headerimage will show this picture when/if no picture is assigned to the body id.

    #bodyabou #headerimage is my About Us page, this shows a different photo as well......I think this should be enough to get you guys going.....

    If you have any more question I'll try to reply as quick as I can....

Topic Closed

This topic has been closed to new replies.

About this Topic