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

viewdesigninc · #1 Dec 4, 2009, 12:37 PM

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)
}

juggledad · #2 Dec 4, 2009, 12:50 PM

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'

viewdesigninc · #3 Dec 4, 2009, 02:13 PM

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.

juggledad · #4 Dec 4, 2009, 02:25 PM

if you look at the <body. you will find '<body class="single postid-158">' so use 'body.postid-158'

capelady · #5 Oct 1, 2012, 01:05 PM

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?

capelady · #6 Oct 1, 2012, 01:25 PM

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!