[SOLVED] Removing header image on a per page basis

drewpasmith · #1 Mar 25, 2009, 06: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, 11: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, 08:22 AM

Hi Flynn,

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

Cheers,

Drew

SoftDux · #4 Mar 29, 2009, 11: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, 02: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, 02: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, 03: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; 
}

d_random · #8 Apr 2, 2009, 11:01 AM

Thanks Flynn!

But it removed the header images on all the pages, anyway to have the header image on just the main page?

Flynn · #9 Apr 2, 2009, 10:30 PM

Then try this:

HTML Code:

div.header-image-container {
display: none; 
}
body#body-frontpage div.header-image-container {
display: block !important; 
}

If this doesn't work please let me know what you have in your source code (of the browser-rendered page) in the <BODY> tag, should be

HTML Code:

<body id="body-frontpage" class="body-homepage">

d_random · #10 Apr 3, 2009, 02:41 PM

Below is part of the code from the browser "page source". Does this help?

Code:

</head>
<body>
<div id="wrapper">
<div id="container">

<table id="layout" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col class="coltwo" />
<col class="colthree" />
</colgroup>

Flynn · #11 Apr 4, 2009, 08:37 PM

Then you don't have Atahualpa version 3.3 or newer. The unique body ID's and classes were introduced in 3.3. You'd need those for per-page CSS styling

d_random · #12 Apr 6, 2009, 10:07 AM

a-ha!
OK, I will update. Thank you!

d_random · #13 Apr 6, 2009, 04:01 PM

I updated to the new version and your code worked!
Thank you Flynn.

Jsadler · #14 Aug 7, 2009, 12:40 PM

Quote:

Originally Posted by Flynn

Then try this:

div.header-image-container {
display: none;
}
body#body-frontpage div.header-image-container {
display: block !important;
}

Hi Flynn,

I am having the same issue and want to remove the header image from all but the home page (http://imprintdesign.org/ - the picture of the house).

I have opened css.php in wp-content/themes/atahualpa and added the code in the "Header Container" area as shown here:

Quote:

/*-------------------- HEADER CONTAINER -------------------*/

td#header {
width: auto;
padding: 0;
}

div.header-image-container {
display: none;
}
body#body-frontpage div.header-image-container {
display: block !important;
}

/*-------------------- LOGO AREA --------------------------*/

but the image disappears from every page and my goal is to have it on the home (frontpage) only.

Note - I reset the css.php for now so the image is still there until I get your solution...

Thanks VERY much for your help!

Flynn · #15 Aug 9, 2009, 02:55 PM

The CSS class for the homepage has changed in Atahualpa 3.4.2 because the new, core WP body classes are used now instead of the former, proprietary Atahualpa body classes.

use

body.home div.header-image-container {
display: block !important;
}

instead of

body#body-frontpage div.header-image-container {
display: block !important;
}

Jsadler · #16 Aug 10, 2009, 07:23 AM

Perfect - thanks!

AJKock · #17 Aug 13, 2009, 08:53 AM

Can someone please explain to me step by step to get this to work on pages/posts?
I want the header image only to appear on the home page.
I added the above mentioned CSS to the stylesheet, but it had no affect.
What are the settings under your Atahualpa Options? Do you say "show header", but the CSS removes it for other pages?

Help would be appreciated. Tx

I am using version 3.4.2

juggledad · #18 Aug 13, 2009, 09:42 AM

for 3.4.2 Add the following to ATO->HTML/CSS Inserts->CSS Inserts

HTML Code:

div.header-image-container {
display: none; 
}
body.home div.header-image-container {
display: block !important; 
}

The first part says 'Don't display the header image' the second part says 'If this is the home page, then ignore the other rule and display the header!'

AJKock · #19 Aug 13, 2009, 03:45 PM

Thank you! I finally get it. I didn't notice the "CSS insert" section under theme options. I thought that I was meant to put the code into the external stylesheet.

It is working now.