Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] post-specific header image w/ css insert (page-specific ones work, but not o


  #1  
Old Dec 4, 2009, 12:37 PM
viewdesigninc
 
35 posts · Mar 2009
Could someone clue me in as to the proper code/css insert to get a different header to display on the homepage vs post pages. (I've gotten it to work for static pages, but not for posts.) Here is the wesbite and my inserted code:

http://www.hershnerhunter.com/blog/?p=158


Code:
body.home div#imagecontainer {
background-image: url(http://hershnerhunter.com/blog/wp-content/header-images/hershner_hunter_lawyers_1.jpg)
}

body.page-id-158 div#imagecontainer {
background-image: url(http://hershnerhunter.com/blog/wp-content/header-images/hershner_hunter_lawyers_1b.jpg)
}

body.page-id-151 div#imagecontainer,
body.page-id-149 div#imagecontainer,
body.page-id-148 div#imagecontainer,
body.page-id-146 div#imagecontainer,
body.page-id-144 div#imagecontainer,
body.page-id-46 div#imagecontainer,
body.page-id-44 div#imagecontainer,
body.page-id-42 div#imagecontainer,
body.page-id-40 div#imagecontainer,
body.page-id-37 div#imagecontainer,
body.page-id-55 div#imagecontainer,
body.page-id-49 div#imagecontainer,
body.page-id-34 div#imagecontainer,
body.page-id-19 div#imagecontainer,
body.page-id-23 div#imagecontainer,
body.page-id-4 div#imagecontainer,
body.page-id-6 div#imagecontainer,
body.page-id-55 div#imagecontainer,
body.page-id-10 div#imagecontainer,
body.page-id-12 div#imagecontainer,
body.page-id-21 div#imagecontainer {
background-image: url(http://hershnerhunter.com/blog/wp-content/header-images/hershner_hunter_lawyers_1b.jpg)
}
  #2  
Old Dec 4, 2009, 12:50 PM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If you look at the generated source of your home page and locate '<body' you will see
HTML Code:
<body class="home blog logged-in">
so the CSS Selector will be 'body.home' in place of 'body.page-id-xx'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 4, 2009, 02:13 PM
viewdesigninc
 
35 posts · Mar 2009
It's the post (page id 158) that's not referencing the alternate image properly.) The homepage works fine, as do all of the static pages.
  #4  
Old Dec 4, 2009, 02:25 PM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
if you look at the <body. you will find '<body class="single postid-158">' so use 'body.postid-158'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 1, 2012 at 01:20 PM.
  #5  
Old Oct 1, 2012, 01:05 PM
capelady
 
48 posts · Mar 2010
Hi Juggledad,

I'm trying to sort this out also.
I have 4 pages so far:
Static Home page (<body class="home page page-id-18 page-template-default">)
Blog page (<body class="blog">)
For Garden Centers page (<body class="page page-id-14 page-template-default">)
A Test blog page (<body class="single single-post postid-49 single-format-standard">)

I want different header images for each, but I want to specify for each page which image I want.

In Style and Edit Area I put:
<div id="header-image-div>%image</div>
<div id="page-menu-div">%page-center</div>

First of all, do all images still need to be in Atahualpa/images/header? or can they be in the upload folder? Does it matter?
right now I have a "dummy" image in the header folder, and the rest in the wordpress uploads folder, as I wasn't sure. The dummy displays just fine, and says on it "from atahualpa/images/header folder", so I could see which image was being displayed.

Then, in the css inserts, for the blog page I have:

/*--------------------------------*/
/* blog header image */
/* NOT WORKING */
/*--------------------------------*/
body.blog div#header-image-div {
display: block;
width: 990px;
height: 375px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/bg_blog_pagetop.jpg')
top center no-repeat important!;
}

/* -------------------------------------------------------*/
/* background image for page menus */
/* THIS IS WORKING, but for all pages */
/* -------------------------------------------------------*/
div#page-menu-div {

width: 990px;
height: 24px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/ycgt_bgmenu.jpg')
top center no-repeat;
}

/* -------------------------------------------------------*/
/* background image for sidebars and content */
/* -------------------------------------------------------*/

/*-------------------*/
/* home page - id 18 */
/* THIS IS WORKING for all pages */
/*-------------------*/
tr#bodyrow {
width: 990px;
height: 1086px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/ycgt_bgbottom.jpg')
top center no-repeat;
}

/* blog page */
/* NOT WORKING */

body.page-id-12 tr#bodyrow {
width: 990px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/bg_blog_pagebottom.jpg')
top center no-repeat;
}

I think it's referencing specific pages (and bodyrow) that is the problem, and I can't tell you all the different variations I've tried. I looked at the post for http://forum.bytesforall.com/showthr...hlight=page-id and http://forum.bytesforall.com/showthr...der+image+page among others, but I can't quite get it right.

the site (in progress) is http://youcangrowthat.com.s52126.gridserver.com/

Ignore the ugly sidebars - that will be fixed if I can get the correct images to display.

Can you straighten me out?

Last edited by capelady; Oct 1, 2012 at 01:08 PM.
  #6  
Old Oct 1, 2012, 01:25 PM
capelady
 
48 posts · Mar 2010
Ok, after I posted that I changed the references to the blog page to body.blog... for

body.page-id-12 tr#bodyrow {
changed to
body.blog tr#bodyrow {

and that works.

I changed the menu styling
div#page-menu-div {
to
body.blog

and that works

so now at least the correct bodyrow image and menu for the blog home page works, but not the correct header image. I'll keep at it.

It never fails that after I ask the question, I discover (at least one) answer!
  #7  
Old Oct 1, 2012, 01:29 PM
capelady
 
48 posts · Mar 2010
Ugh, sorry, I meant to say:

div#page-menu-div {
for the blog page was changed to
body.blog div#page-menu-div {
which works.

Anyway, the blog menu and bodyrow works now, but not the header.
  #8  
Old Oct 1, 2012, 01:35 PM
capelady
 
48 posts · Mar 2010
OK, question about where the header images have to be is yes, in the atahualpa header folder.

Blog images all work now, just have to figure out the rest. Sorry for posting this too soon, but I've been working on this all day, and until I posted, I couldn't figure it out! Murphy strikes again!
  #9  
Old Oct 1, 2012, 01:39 PM
capelady
 
48 posts · Mar 2010
Nope, it's rotating the images in the header folder.

So, It looks like they cannot be in the header folder after all.
  #10  
Old Oct 1, 2012, 02:15 PM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Are you looking to have rotating headers on one of the pages? if not shut it off
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Oct 1, 2012, 03:43 PM
capelady
 
48 posts · Mar 2010
I didn't know you could shut it off, but no, I just wanted different header images on each page.

But, wonder of wonders, I finally figured it out! I had to figure out which parts of the above thread applied to me. But also, I long for the days of compilers that caught typos and syntax errors!

Anyway, thanks for responding, and for all the great information here. Sometimes it takes awhile to get it all straight, but when it's done, it feels SO good!

Thanks!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Insert external Link into Page Menu at a specific place mrz Page & Category Menu Bars 3 Jan 16, 2010 10:16 PM
How to put specific SWF files on specific pages as header images? kippiper Header configuration & styling 2 Dec 10, 2009 08:23 AM
[SOLVED] How to show 1 specific header image on a static page and on Cat. pages Sakshin Header configuration & styling 24 Oct 3, 2009 04:36 PM
[SOLVED] 3.4.2 Specific header image per category Seb the frog Header configuration & styling 3 Aug 8, 2009 03:07 AM
Desperately looking for help with HIDING header image on one specific page Cristiacus Header configuration & styling 0 Jun 2, 2009 03:50 PM


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


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