Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Separate Headers for Posts and Pages (http://forum.bytesforall.com/showthread.php?t=7012)

arothafel May 7, 2010 08:00 AM
[SOLVED] Separate Headers for Posts and Pages
 
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 May 7, 2010 08:15 AM
http://forum.bytesforall.com/showthr...t=header+image

arothafel May 7, 2010 02: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 May 7, 2010 03: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 May 8, 2010 02: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 May 8, 2010 03: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 May 8, 2010 03: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 May 9, 2010 04: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 May 9, 2010 07: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 May 9, 2010 10:04 AM
Pages and Posts - Separate Headers
 
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 May 9, 2010 11:31 AM
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 May 9, 2010 01:03 PM
Brilliant JD....! Thanks again. Hopefully, we can now close this thread.

Art


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

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.