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] How to show 1 specific header image on a static page and on Cat. pages (http://forum.bytesforall.com/showthread.php?t=3149)

Sakshin Aug 26, 2009 08:23 AM

[SOLVED] How to show 1 specific header image on a static page and on Cat. pages
 
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 Aug 27, 2009 06: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 Aug 28, 2009 10: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 Aug 28, 2009 05: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 Aug 29, 2009 12: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 Aug 29, 2009 09:16 AM

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

Sakshin Aug 29, 2009 12: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 Aug 29, 2009 03: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 Aug 29, 2009 11:50 PM

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 Aug 31, 2009 09:21 AM

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

Sakshin Aug 31, 2009 12: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 Sep 1, 2009 04:20 AM

It's category-vip if any

ccsfdave Sep 1, 2009 10: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 Sep 2, 2009 02:32 PM

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

Thanx again, Flynn. :):):)

paolanapoli Sep 19, 2009 09: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 Sep 19, 2009 06: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 Sep 29, 2009 04: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 Sep 29, 2009 04:28 PM

ATO->HTML/CSS Inserts->CSS Inserts

DonnaBW Sep 29, 2009 10: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 Sep 30, 2009 04:36 AM

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

DonnaBW Sep 30, 2009 05: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 Oct 2, 2009 05: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 Oct 3, 2009 06: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 Oct 3, 2009 08: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 Oct 3, 2009 04:36 PM

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


All times are GMT -6. The time now is 01:53 PM.

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