[SOLVED] How to show 1 specific header image on a static page and on Cat. pages

Sakshin · #1 Aug 26, 2009, 09:23 AM

The question is simple; for each page I would like to have a specific header image instead of rotating images. How can this be achieved? And I would like to do the same for categorie archive pages as well.

I'm using 342

Thanx, Sakshin.

Flynn · #2 Aug 27, 2009, 07:34 PM

At Configure Header Area, instead of %image use

<div id="imagecontainer"></div>

Add CSS Inserts

For a default image

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/path/to/image.jpg);
}

For specific pages look into the source code of each page for
<body class="page page-id-105 other-classname...">

Use a unique classname for page specific CSS Inserts:

body.page-id-105 div#imagecontainer {background-image: url(/path/to/image2.jpg)}
body.page-id-23 div#imagecontainer {background-image: url(/path/to/image3.jpg)}

... etc...

Sakshin · #3 Aug 28, 2009, 11:05 AM

I tried to implement the code above. The div replace the %image like this <div id="imagecontainer"></div>

And in the css insert I placed a few different option, none of them showing any image, the whole image field disappeared. What to doo?

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_home.jpg)
}

body.page-id-197 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_archief.jpg)
}

body.page page-id-2 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_about.jpg)
}

body.page page-id-187 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_contact.jpg)
}

Flynn · #4 Aug 28, 2009, 06:12 PM

Sorry use

<div id="imagecontainer" class="header-image-container"></div>

instead of

<div id="imagecontainer"></div>

If you want to add the opacity areas, which are missing now, use

<div id="imagecontainer" class="header-image-container">
<div class="opacityleft"> </div>
<div class="opacityright"> </div>
</div>

instead.

And, body.page page-id-2 is wrong, should be body.page-id-2

Sakshin · #5 Aug 29, 2009, 01:11 AM

I don't want to use the opacity, but it's good to know how to do that. And the images still don't show. gone, foetsie, away.

juggledad · #6 Aug 29, 2009, 10:16 AM

What's your url and where is the problem happening?

Sakshin · #7 Aug 29, 2009, 01:27 PM

The site is http://newspiration.com/news/home/

And this is basically one of the links to one of the images; url(/news/wp-content/themes/atahualpa/images/header/header_about.jpg)

Flynn · #8 Aug 29, 2009, 04:59 PM

I missed another one. Since the %image is not there in the theme options, the CSS for the class "header-image-container" isn't present in the stylesheet either, and you'd have to add that manually as well

Add the red parts for the default style of the image container. The "position:relative" is not needed if you don't display the opacity areas, but shouldn't hurt

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/path/to/image.jpg);
height:150px;
margin:0;
padding:0;
position:relative;
}

IF anyone reading this want to use the opacity areas, the CSS for those would have to be added as CSS Insert, too

div.opacityleft {
background-color:#FFFFFF;
height:150px;
left:0;
top:0;
opacity:0.4;
position:absolute;
width:200px;
z-index:2;
}
div.opacityright {
background-color:#FFFFFF;
height:150px;
right:0;
top:0;
opacity:0.4;
position:absolute;
width:200px;
z-index:2;
}

Sakshin · #9 Aug 30, 2009, 12:50 AM

Thanks Flynn, were getting close but not quite there yet. the images still don't show.

This is the page
http://newspiration.com/news/home/

And this is the full CSS now for pages with no specific image;
div#imagecontainer {
background-position: center top;
background-repeat: no-repeat;
background-image: url(http://www.newspiration.com/news/wp-...eader_home.jpg)
height:150px;
margin:0;
padding:0;
position:relative;
}

I could also leave the domain name out of the url and just start with (/news/wp-content/themes/atahualpa/images/header/header_home.jpg)

What are we missing?

Flynn · #10 Aug 31, 2009, 10:21 AM

The ; is missing after the background image rule, so the other styles such as height are not being applied

Sakshin · #11 Aug 31, 2009, 01:47 PM

Duh. This was it! And it works for the pages. But not for specific categorie pages...?

For example;

body.category_vip div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_vip.jpg);
}

Doesn't bring me much ...

I tried giving it the pagename I found through Firefox's sourceview but with the same result.

body.category_vip div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/header_vip.jpg);
}

Flynn · #12 Sep 1, 2009, 05:20 AM

It's category-vip if any

ccsfdave · #13 Sep 1, 2009, 11:55 AM

This thread interests me. Would it be similar for the logo rather than image? If so, what files does the above code get dropped into or manipulated in?

Thanks,

Dave

Sakshin · #14 Sep 2, 2009, 03:32 PM

Tadaaa, it works. Great. I had to replace the underscore _ with a hyphen -.

Thanx again, Flynn.

paolanapoli · #15 Sep 19, 2009, 10:04 AM

Please...What j wrong? J done:

%pages %logo %bar1 %bar2

<div id="imagecontainer" class="header-image-container"> </ div>

div imageContainer # (
background-position: top center;
background-repeat: no-repeat;
background-image: url (/ wp-content / themes / Atahualpa / images / header /)
)

body.page-id-132 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / 6.scriveteci.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-2 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / bagnoli.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-238 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / abitare.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-110 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / 3.grafica.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-112 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / 4.fotovoltaico.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-114 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / IMG_147.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-517 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / 5.progetti.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

body.page-id-116 div imageContainer # (
background-image: url (/ wp-content / themes / Atahualpa / images / header / IMG_149.jpg);
div.opacityleft (
background-color: # FFFFFF;
height: 150px;
left: 0;
top: 0;
opacity: 0.4;
position: absolute;
width: 200px;
z-index: 2;
)

...but all image disappear

Sakshin · #16 Sep 19, 2009, 07:02 PM

Ok, I'm not an expert, as you can read throughout this forum, but I tell you what I see;

shouln't ( be {

??? I would give it a try

DonnaBW · #17 Sep 29, 2009, 05:22 PM

I can follow your directions -- but where exactly should one add the code?

When you make this addition, are you adding it to the "Configure Header Area Line" in the ATO or are you adding it directly into the CSS or other file, via ftp access?

juggledad · #18 Sep 29, 2009, 05:28 PM

ATO->HTML/CSS Inserts->CSS Inserts

DonnaBW · #19 Sep 29, 2009, 11:54 PM

I am still getting random images for my project page, sigh. What am I missing?

Here's my page:
http://blog.rebuildingalliance.org/p...en-in-al-aqaba

Here's the code to set the image for that page:

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/path/to/layout7nologo.jpg);
height:140px;
margin:0;
padding:0;
position:relative;
}

body.page-id-361 div#imagecontainer {
background-image: url(/news/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif);
}

juggledad · #20 Sep 30, 2009, 05:36 AM

change the url to background-image: url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif);

DonnaBW · #21 Sep 30, 2009, 06:44 AM

I changed background-image: in both the first and the second reference, respectively. No go. Neither the home page image nor the Kindergarten page image are fixed.

Here's what I have now:

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/wp-content/themes/atahualpa/images/header/layout7nologo.jpg);
height:140px;
margin:0;
padding:0;
position:relative;
}

body.page-id-361 div#imagecontainer {
background-image: url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif);
}

juggledad · #22 Oct 2, 2009, 06:23 AM

add a '!important' at the end like this

HTML Code:

body.page-id-361 div#imagecontainer {
background-image:url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif) !important;
}

DonnaBW · #23 Oct 3, 2009, 07:47 AM

Fascinating! It worked! Many thanks!

One more question: how do I fix a default selected image on all other pages, especially the home page? I thought the following first paragraph code is what I needed -- what's missing?

div#imagecontainer {
background-position:center top;
background-repeat:no-repeat;
background-image: url(/wp-content/themes/atahualpa/images/header/layout7nologo.jpg);
height:140px;
margin:0;
padding:0;
position:relative;
}

body.page-id-361 div#imagecontainer {
background-image: url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif) !important;

juggledad · #24 Oct 3, 2009, 09:06 AM

try this

HTML Code:

body div#imagecontainer {
background-image: url(/wp-content/themes/atahualpa/images/header/layout7nologo.jpg) !important;
}
body.page-id-361 div#imagecontainer {
background-image: url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif) !important;
}

DonnaBW · #25 Oct 3, 2009, 05:36 PM

This worked! Many thanks -- I'll post my site when I have it polished up and ready to go live.