[SOLVED] Removing header image on a per page basis

drewpasmith · #1 Mar 25, 2009, 05:01 AM

Hi all,

Just wondering if I can selective remove the header from one page but keep it on all others?

Cheers,

Drew

Flynn · #2 Mar 25, 2009, 10:06 AM

This can be done with a simple CSS Insert in 3.2.1.

HTML Code:

body.page-XX div.header-image-container {
display: none;
}

XX = ID of the page in question

In the current 3.2 it would require file edits which I don't recommend as 3.2.1 is coming within this week.

drewpasmith · #3 Mar 26, 2009, 07:22 AM

Hi Flynn,

Thanks for your speedy reply. Looking forward to the update already!

Cheers,

Drew

SoftDux · #4 Mar 29, 2009, 10:21 AM

Quote:

Originally Posted by Flynn

This can be done with a simple CSS Insert in 3.2.1.

HTML Code:

body.page-XX div.header-image-container {
display: none;
}

XX = ID of the page in question

In the current 3.2 it would require file edits which I don't recommend as 3.2.1 is coming within this week.

Hi Flynn,

Where exactly do I add this code?

Flynn · #5 Mar 30, 2009, 01:18 PM

The actual code in 3.3.1 is slightly different. All <BODY> tags get a class, some an ID too, all starting with body-

Add this as HTML/CSS Inserts -> CSS Insert

HTML Code:

body#body-page-XX div.header-image-container {
display: none; 
}

Replace XX with the ID of the page in question.

You could style (or remove) other layout parts as well. I.e. remove the heading from "Page" pages. This time using the class "body-page" instead of the ID "body-page-XX" because we want all "Page" pages, not just a specific one

HTML Code:

body.body-page div.post-headline {
display: none; 
}

However "Page" page containers get an additional class of "page" (in addition to "post") in 3.3.1 so this should work as well

HTML Code:

 div.page div.post-headline {
display: none !important;
}

I've added !important here as the same container has the class "post" as well, to make sure one class ("page") can overwrite the other class ("post").

d_random · #6 Apr 1, 2009, 01:57 PM

AWESOME THEME!

I have the opposite request, header image on the main page, all others no header.
Any help?

Flynn · #7 Apr 2, 2009, 02:55 AM

Try this as HTML/CSS Inserts -> CSS Inserts

HTML Code:

div.header-image-container {
display: none; 
}
body.body-homepage div.header-image-container {
display: block; 
}