[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. :) |
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... |
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) } |
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 |
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.
|
What's your url and where is the problem happening?
|
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) |
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; } |
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? |
The ; is missing after the background image rule, so the other styles such as height are not being applied
|
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); } |
It's category-vip if any
|
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 |
Tadaaa, it works. Great. I had to replace the underscore _ with a hyphen -.
Thanx again, Flynn. :):):) |
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 |
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 |
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? |
ATO->HTML/CSS Inserts->CSS Inserts
|
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); } |
change the url to background-image: url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif);
|
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); } |
add a '!important' at the end like this
HTML Code:
body.page-id-361 div#imagecontainer { |
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; |
try this
HTML Code:
body div#imagecontainer { |
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 11:19 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.