Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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, 01:37 PM
viewdesigninc
 
35 posts · Mar 2009
[SOLVED] post-specific header image w/ css insert (page-specific ones work, but not o

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, 01:50 PM
juggledad's Avatar
juggledad
 
23,765 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, 03: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, 03:25 PM
juggledad's Avatar
juggledad
 
23,765 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 02:20 PM.
  #5  
Old Oct 1, 2012, 02:05 PM
capelady
 
50 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 02:08 PM.
  #6  
Old Oct 1, 2012, 02:25 PM
capelady
 
50 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!

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 11:16 PM
How to put specific SWF files on specific pages as header images? kippiper Header configuration & styling 2 Dec 10, 2009 09: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 05:36 PM
[SOLVED] 3.4.2 Specific header image per category Seb the frog Header configuration & styling 3 Aug 8, 2009 04:07 AM
Desperately looking for help with HIDING header image on one specific page Cristiacus Header configuration & styling 0 Jun 2, 2009 04:50 PM


All times are GMT -6. The time now is 08:30 AM.


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