Wordpress Themes - WP Forum at BFA - [SOLVED] Removing header image on a per page basis

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] Removing header image on a per page basis (http://forum.bytesforall.com/showthread.php?t=949)

drewpasmith

Mar 25, 2009 05:01 AM

[SOLVED] Removing header image on a per page basis

Hi all,

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

Cheers,

Drew

Flynn

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

Mar 26, 2009 07:22 AM

Hi Flynn,

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

Cheers,

Drew

SoftDux

Mar 29, 2009 10:21 AM

Quote:

Originally Posted by Flynn (Post 3571)

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

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

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

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; 

}

d_random

Apr 2, 2009 10: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

Apr 2, 2009 09: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

Apr 3, 2009 01:41 PM

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

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

Apr 4, 2009 07: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

Apr 6, 2009 09:07 AM

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

d_random

Apr 6, 2009 03:01 PM

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

Jsadler

Aug 7, 2009 11:40 AM

Quote:

Originally Posted by Flynn (Post 4130)

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

Aug 9, 2009 01: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

Aug 10, 2009 06:23 AM

Perfect - thanks!

AJKock

Aug 13, 2009 07: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

Aug 13, 2009 08: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

Aug 13, 2009 02: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.

All times are GMT -6. The time now is 04:34 PM.