Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Aug 26, 2009, 08:23 AM
Sakshin
 
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  
Old Aug 27, 2009, 06:34 PM
Flynn's Avatar
Flynn
 
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  
Old Aug 28, 2009, 10:05 AM
Sakshin
 
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  
Old Aug 28, 2009, 05:12 PM
Flynn's Avatar
Flynn
 
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  
Old Aug 29, 2009, 12:11 AM
Sakshin
 
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  
Old Aug 29, 2009, 09:16 AM
juggledad's Avatar
juggledad
 
23,632 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  
Old Aug 29, 2009, 12:27 PM
Sakshin
 
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  
Old Aug 29, 2009, 03:59 PM
Flynn's Avatar
Flynn
 
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  
Old Aug 29, 2009, 11:50 PM
Sakshin
 
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  
Old Aug 31, 2009, 09:21 AM
Flynn's Avatar
Flynn
 
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  
Old Aug 31, 2009, 12:47 PM
Sakshin
 
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  
Old Sep 1, 2009, 04:20 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
It's category-vip if any
  #13  
Old Sep 1, 2009, 10:55 AM
ccsfdave's Avatar
ccsfdave
 
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  
Old Sep 2, 2009, 02:32 PM
Sakshin
 
66 posts · Aug 2009
Amsterdam, Netherlands
Tadaaa, it works. Great. I had to replace the underscore _ with a hyphen -.

Thanx again, Flynn.
  #15  
Old Sep 19, 2009, 09:04 AM
paolanapoli
 
4 posts · Sep 2009
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  
Old Sep 19, 2009, 06:02 PM
Sakshin
 
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  
Old Sep 29, 2009, 04:22 PM
DonnaBW
 
22 posts · Sep 2009
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  
Old Sep 29, 2009, 04:28 PM
juggledad's Avatar
juggledad
 
23,632 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  
Old Sep 29, 2009, 10:54 PM
DonnaBW
 
22 posts · Sep 2009
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  
Old Sep 30, 2009, 04:36 AM
juggledad's Avatar
juggledad
 
23,632 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  
Old Sep 30, 2009, 05:44 AM
DonnaBW
 
22 posts · Sep 2009
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  
Old Oct 2, 2009, 05:23 AM
juggledad's Avatar
juggledad
 
23,632 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  
Old Oct 3, 2009, 06:47 AM
DonnaBW
 
22 posts · Sep 2009
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  
Old Oct 3, 2009, 08:06 AM
juggledad's Avatar
juggledad
 
23,632 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  
Old Oct 3, 2009, 04:36 PM
DonnaBW
 
22 posts · Sep 2009
This worked! Many thanks -- I'll post my site when I have it polished up and ready to go live.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
only on one of my static Pages: how do make the page title NOT show up? petevannuys Atahualpa 3 Wordpress theme 11 Aug 24, 2009 10:56 AM
[SOLVED] Need static header image to display on the front page but no image on any o joaodagraca Header configuration & styling 2 Aug 10, 2009 01:45 AM
[SOLVED] 3.4.2 Specific header image per category Seb the frog Header configuration & styling 3 Aug 8, 2009 03:07 AM
Show sidebar on only one static page Loretta Sidebars & Widgets 0 Jul 23, 2009 03:46 PM
Desperately looking for help with HIDING header image on one specific page Cristiacus Header configuration & styling 0 Jun 2, 2009 03:50 PM


All times are GMT -6. The time now is 05:39 PM.


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