|
#1
Aug 26, 2009, 08:23 AM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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.
|
#2
Aug 27, 2009, 06:34 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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...
|
#3
Aug 28, 2009, 10:05 AM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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)
}
|
#4
Aug 28, 2009, 05:12 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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
|
#5
Aug 29, 2009, 12:11 AM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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.
|
#6
Aug 29, 2009, 09:16 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
What's your url and where is the problem happening?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Aug 29, 2009, 12:27 PM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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)
|
#8
Aug 29, 2009, 03:59 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
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;
}
|
#9
Aug 29, 2009, 11:50 PM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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?
|
#10
Aug 31, 2009, 09:21 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
The ; is missing after the background image rule, so the other styles such as height are not being applied
|
#11
Aug 31, 2009, 12:47 PM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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);
}
|
#12
Sep 1, 2009, 04:20 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
It's category-vip if any
|
#13
Sep 1, 2009, 10:55 AM
|
|
|
|
13 posts · Aug 2009
San Francisco
|
|
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
|
#14
Sep 2, 2009, 02:32 PM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
Tadaaa, it works. Great. I had to replace the underscore _ with a hyphen -.
Thanx again, Flynn.
|
#15
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
Last edited by paolanapoli; Sep 19, 2009 at 09:08 AM.
|
#16
Sep 19, 2009, 06:02 PM
|
|
|
66 posts · Aug 2009
Amsterdam, Netherlands
|
|
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
|
#17
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?
|
#18
Sep 29, 2009, 04:28 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
ATO->HTML/CSS Inserts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#19
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);
}
|
#20
Sep 30, 2009, 04:36 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
change the url to background-image: url(/wp-content/themes/atahualpa/images/header/AlAqabaKindergarten.gif);
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#21
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);
}
|
#22
Oct 2, 2009, 05:23 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
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;
}
__________________
"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 3, 2009 at 08:02 AM.
|
#23
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;
|
#24
Oct 3, 2009, 08:06 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#25
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.
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Linear Mode
|
|