Headers in f8 static

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

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

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

    Read more here:
    https://codex.www.ads-software.com/Function_Reference/body_class

    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 https://www.chrisbaronmedia.com

    thank you

    Thread Starter prodigal7

    (@prodigal7)

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

    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….

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Headers in f8 static’ is closed to new replies.