[SOLVED] Separate Headers for Posts and Pages

arothafel · #1 May 7, 2010, 09:00 AM

I'm sure this is already solved somewhere, but I can't seem to find it. I already have a header for my main posts. But, for "Pages" I'd like to use a separate header image/configuration. Can someone lead me in the right direction? Thanks in advance, -- Art

juggledad · #2 May 7, 2010, 09:15 AM

http://forum.bytesforall.com/showthr...t=header+image

arothafel · #3 May 7, 2010, 03:15 PM

Quote:

you can now use the postid-638 for this post in the css so the headerimage override would be
HTML Code:

body.postid-638 div#imagecontainer {
background-image: url(http://yourdomain.com/wordpress/wp-c...s/yourpage.jpg) !important;}

I am so sorry to be this dense.... but, I viewed the page and then (with FireFox) I viewed the "page source" and found <body ... statement..

So (and this is the dense part) where do I go to actually find that HTML code. I don't know where the CSS is. Is it through ATO or do I actually go into the server files. If it's the server files, what folder?

Thanks in advance.
FYI.. this is the site: http://blog.privatelabelfitness.com/ and I want to use a static image for this page (s) http://blog.privatelabelfitness.com/?page_id=629

Thanks in advance.- Art

juggledad · #4 May 7, 2010, 04:19 PM

use that CSS selector/rule as a guide to create your own and then you put them at ATO->Add Html/CSS Inserts->CSS Inserts

arothafel · #5 May 8, 2010, 03:11 PM

O.K. I added the static header image to the server and then went to:

ATO->Add Html/CSS Inserts->SCC Inserts (Should that be CSS Inserts or am I missing something?) and added this html:

HTML Code:

body class="page page-id-629 div#imagecontainer {
background-image: url(http://blog.privatelabelfitness.com/wp-content/themes/atahualpa/images/WM_Banner_01.jpg) !important;}

I also tried this:

HTML Code:

body.pageid-629 div#imagecontainer {
background-image: url(http://blog.privatelabelfitness.com/wp-content/themes/atahualpa/images/WM_Banner_01.jpg) !important;}

But, neither work. What am I doing wrong?

Thanks in advance,
Art

juggledad · #6 May 8, 2010, 04:00 PM

your so close, it's the little things that will get you, like the missing hyphen.
the class for a page is not 'pageid-629', it's ''page-id-629' so try

HTML Code:

body.page-id-629 div#imagecontainer {.......

arothafel · #7 May 8, 2010, 04:59 PM

Interesting.... it worked.. BUT...

Take a look at the result..

http://blog.privatelabelfitness.com/?page_id=629

it put the text image (Weight-Management Marketing) between the original rotating header images...
Am I running into difficulty because of the rotating header configuration I use for the parent?

juggledad · #8 May 9, 2010, 05:46 AM

Well you didn't mention that you had modified the rotating header code! The smooth transistion code is causing the problem, but there is a get around. At ATO->Style & edit HEADER AREA->Configure Header Area replace '%image' with '%image <div id="myimage"></div>' then cange the CSS Insert to the following

HTML Code:

body.page-id-629 div#myimage {
background-image:url('http://blog.privatelabelfitness.com/wp-content/themes/atahualpa/images/WM_Banner_01.jpg') !important;
position:relative;
margin:0;
padding:0;
height:350px;

}
body.page-id-629 div#imagecontainer {
display:none;
}

basically thid hides the rotation image area and displays the a new image ares.

arothafel · #9 May 9, 2010, 08:58 AM

Yup.... That did it!
JD, you are amazing. I don't know how you know all this stuff, but you do... and I'm thankful for your expertise. Another $20 on the way. The best money I've ever spent!!

Art

arothafel · #10 May 9, 2010, 11:04 AM

I will be using multiple pages (50-60) with the new code you provided (works fantastic), but is there a simpler way to add multiple pages or do I need to insert this entire html for each new page that contains the same separate header? In other words, is there a way to line list all the page ids?

HTML Code:

body.page-id-629 div#myimage {
background-image:url('http://blog.privatelabelfitness.com/wp-content/themes/atahualpa/images/WM_Banner_01.jpg') !important;
position:relative;
margin:0;
padding:0;
height:350px;

}
body.page-id-629 div#imagecontainer {
display:none;
}

juggledad · #11 May 9, 2010, 12:31 PM

Lets say page 629, 630, 645 and 712 all use the same header, you could code

HTML Code:

body.page-id-629 div#myimage,
body.page-id-630 div#myimage,
body.page-id-645 div#myimage,
body.page-id-712 div#myimage {
background-image:url('http://blog.privatelabelfitness.com/wp-content/themes/atahualpa/images/WM_Banner_01.jpg') !important;
position:relative;
margin:0;
padding:0;
height:350px;

}
body.page-id-629 div#imagecontainer,
body.page-id-630 div#imagecontainer,
body.page-id-645 div#imagecontainer,
body.page-id-712 div#imagecontainer {
display:none;
}

you could put all the pages into the one {display:none;}

arothafel · #12 May 9, 2010, 02:03 PM

Brilliant JD....! Thanks again. Hopefully, we can now close this thread.

Art