[SOLVED] Keep rotating Header Image on Home Page and Different header image on each p

SharonJ · #26 Feb 14, 2011, 11:02 PM

This all makes perfect sense but it is not working. I have created a page called
http://gelinascarr.com/testing/

I have put the following in ATO/HTML/CSS inserts

body.page-id-368 div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

I have checked that the image is there.

Atahualpa 3.6.1
WP 3.0.5

What am I missing?

juggledad · #27 Feb 15, 2011, 05:45 AM

in THIS css, you are missing nothing, but if you look at the css for the H2....

SharonJ · #28 Feb 15, 2011, 11:18 AM

Aha, yes, I see there was a missing } at the end of h2. I fixed it and nothing seems to have changed.

juggledad · #29 Feb 15, 2011, 01:47 PM

You are going to kick yourself...go look at the h2 again

SharonJ · #30 Feb 15, 2011, 03:15 PM

Consider me kicked! What a moron I am! Thanks a million. It all works like a charm.

SharonJ · #31 Feb 15, 2011, 03:22 PM

Where it does not work, however is on the blog page, which is where they want it. I just set up the test page to see if I could get it to work. I changed the page id to the blog page id (190) but the rotating banners are still in effect there. Each post of course has a different id#

Would the code read:

post.page-id-190 div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

..afraid to try it in case it blows the whole site apart!!

p.s. If I would like to donate to you, how does that work?

juggledad · #32 Feb 15, 2011, 03:37 PM

for the blog page you use

HTML Code:

body.blog div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

the class 'blog' is always assigned to the page that displays the blog. If the blog page is also the front page, then it also gets (as does what ever page is the front page) the class of 'home'

You can donate to me by clicking the donate button at the top of the page and then using the 'Donate to Juggledad' button

SharonJ · #33 Feb 15, 2011, 10:15 PM

I made the change as suggested, but the new banner does not show .. see link below

http://gelinascarr.com/a-charismatic-visitor/

(I include this blog link because you might enjoy seeing the Roosevelt Elk in their front yard. They live about 5 miles from me)

juggledad · #34 Feb 16, 2011, 04:20 AM

That post is not the blog page, this is a single post page and has different classes on the <body> statement. View the page, then view the source and do a finf on '<body' and you will see the classes. At this point you should be able to code the CSS you need.

So for each page you want a separate header, you need a CSS selector and rule, for the blog page, you need one. If you want one for each post you need one for each post.

If you want one for the blog and all the single post pages with the same header then your work will be a lot less

SharonJ · #35 Feb 17, 2011, 11:37 PM

Am I even close?? This does not work.

body.single single-post div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

juggledad · #36 Feb 18, 2011, 06:12 AM

close but your syntax is off. If you use

HTML Code:

body.single single-post div#imagecontainer {
background-image: url('http://gelinascarr.com/wp-content/banners/blog-banner.jpg') !important;
height: 110px;
}

you are saying "apply this to the <DIV> with an ID of 'imagecontainer' that is a child of an HTML ELEMENT <single-post> which is a child of a <body> that has a class of 'single'

I'll bet you you see the error of your syntax already. If you want to say 'do this the the <body. that has the class 'single' AND the class 'single-post' you would say

HTML Code:

body.single single-post

if you just want it to be for a 'single-post' you would use

HTML Code:

body.single-post

You just have to know which you want to use

SharonJ · #37 Feb 18, 2011, 11:54 AM

My brain is melting. You attribute too much CSS ability to me!

I want that banner to appear on all blog posts. Not just a single post.

I am confused as to what you are telling me to consider.
Are you implying that I don't require the div#imagecontainer ?

I apologize for not understanding.

juggledad · #38 Feb 18, 2011, 02:13 PM

Yes you need the div#image container, I was just trying to show you why the selector didn't work. You need either

HTML Code:

body.single div#image container {....}

or

HTML Code:

body.single-post div#image container {....}

SharonJ · #39 Feb 18, 2011, 02:43 PM

Thanks a million. I have made you a donation, not as much as you deserve, of course, but I will do so again as I am able.

Here is the result they wanted, just perfect
http://gelinascarr.com/a-charismatic-visitor/

Again I thank you for your knowledge and patience.

grnidone · #40 Mar 10, 2011, 04:24 PM

Odd...this is not working. I can only think somehow my category names are incorrect.

I plugged in the following into the "ATA > Add CSS > Add CSS "

body.category-air-force div#imagecontainer {
background-image: url(http://gruntjewelry.com/wp-content/t...kground_AF.jpg) !important;}

body.category-army div#imagecontainer {
background-image: url(http://gruntjewelry.com/wp-content/t...round_army.jpg) !important;}

body.category-military div#imagecontainer {
background-image: url(http://gruntjewelry.com/wp-content/t...pararescue.jpg) !important;}

grnidone · #41 Mar 10, 2011, 04:37 PM

subscribed to post.

juggledad · #42 Mar 10, 2011, 04:56 PM

to find the category, go to the page in question and view the source. Now search for '<body' and you will see the category assigned.

On your site, you must be using some plugin to create the categories so the normal naming doesn't work.

rackphoto · #43 Mar 21, 2011, 04:38 PM

I feel bad for dwelling on this but my brain is exploding on this, I too am trying to get a separate header image on one (or more) of my pages while the regular rotating header feature stays on the home and or blog pages and some other pages too. I am using a static page for my home page (can have regular rotating images) a blog page (with regular rotating images) a couple more pages with the regular rotating pages also. I just need to have another page that has a different header image (it would be great if that page could have it's own set of rotating images different from the regular one!?)
I tried the instructions above but the same header images rotate on the page that I want a separate and different image?!
Site is

http://rackphoto.com/main/

I would like the "Architecture" page to have a different image(s) and have added a css insert

body.page-id-372 div#imagecontainer {
background-image: url('http://rackphoto.com/main/wp-content/header_images-extra/dei-header.jpg') !important;
}

Doesn't change anything?
Any ideas? Thanks a million.

ron rack

juggledad · #44 Mar 21, 2011, 05:30 PM

try shutting off the fade in/out

rackphoto · #45 Mar 21, 2011, 11:01 PM

wow, that was it!!! Setting the fade in / out to zero did the trick for me. I really like the fade effect but something had to give I guess.

thanks again!

ron rack

Masselyn · #46 Apr 30, 2011, 01:40 AM

Hi:

I have not found the following in the forums, but if I missed it by all means feel free to knock me over with the URL.

Can we have different rotating images, on different pages, using the built-in header feature (presuming that each page would call images from a different directory on the system)? I saw someone mentioned it above, but not sure if there is code or edits that can be made to accommodate this. I'd love to do it for a new site launched, where the client wants rotating images on the homepage to be from one set of images - and another set of images rotating on their "Daycare" tab. You can view the site here, if it helps.

http://184.172.150.20/~hmckeon/

Thanks

juggledad · #47 Apr 30, 2011, 06:13 AM

There is nothing in Atahualpa or the Tutorials that will allow you to have a different set of linked header images/page but you might want to look at the 'dynamic header' plugin - and if it can't do it alone, then check out the 'widget logic' plugin so you could have multiple copies of the dynamic header, one set for each page and have widget logic choose the version depending on the page.

Note - this is sure to add to the response time for the page. each new plugin adds more code that has to be executed and more memory that is used, so you might want to ask your customer if the want it enough to make the site slower....

itsjustlife · #48 May 3, 2011, 08:14 AM

Hi

Where do I add the CSS insert

juggledad · #49 May 3, 2011, 08:34 AM

ATO->Add HTML/CSS Inserts->CSS Inserts

andermarketing · #50 May 16, 2012, 12:03 AM

Quote:

Originally Posted by alleyoopster

This link goes some way to helping. Looking at the code it seems possible to use a full URL to an external domain instead.

With regards to my own problem of not displaying headers on all pages I found the answer. In CSS inserts as follows to disable headers on certain pages.

Code:

/* Stop Header Images displaying on certain pages */
body.page-id-5 div#imagecontainer {display: none;}
body.page-id-13 div#imagecontainer {display: none;}

EDIT: The link above led me to this one

This works for me however it's impractical to list every page if you only want the images on the home page. Is there a global line of code to omit the header images on every page except the home page?