Want Slideshow on home page but not others
 

Hello,

I want to display a large slideshow on the homepage of the website I am working on, but use smaller static banners on other top level pages and no banner on listing pages. You provided me with information on how to change the image container size on different pages (or eliminate it), and I found out how to display different static header images on pages, but not how to keep the slideshow on the Home page.

I placed <div id="imagecontainer" class="header-image-container"></div> in Style & Edit Header/Configure Header

and
body.page-id-26 div#imagecontainer {
background-position:left top;
background-repeat;
height:400px;
margin:0;
padding:0;
position:relative;
}

body.page-id-26 div.header-image-container-pre {height: 400px;}
body.page-id-26 div#imagecontainer {
background-image: url(http://capaytest.artnsoil.com/wp-con...-images/header)

in Add HTML/CSS Inserts

id-26 is my homepage.
The header directory contains the images I want to display in the home page slideshow. My smaller 200 pixel static headers are in a different directory and are displaying fine.

Please tell me if there is a way to keep my slideshow in the homepage of the header.
The code above displays nothing in the image container unless I specify a particular .jpg in the header directory, as I have presently done on the website.

I suspect the background-repeat; is not correct. I changed this from the forum example, which was intended for not displaying the slideshow (I removed the "no-repeat"). Is there particular code to display the slideshow?

the website is at: http://www.capaytest.artnsoil.com

Advice is greatly appreciated.

The simplified instructions for displaying something on the home page only is to target that item using the necessary ID and set it to display:none. Then you target the same item but put the page ID before it and set it to display:block. What this does is hide the item on all the pages and then show it on the page or pages you want it to show.

When you say you want a slideshow do you mean a slideshow from a plugin or the ATA rotating header images?

If you want the ATA rotating images, then you need to include the %image option in the 'Configure Header Area' option and change your
to
and change your CSS so the ATA image container only displays on teh home page
then adjust your other CSS to use the 'my-imagecontainer' ID

Thank you for the help!
I have been out with a bad flu but am now back to tackling this problem and this does get me closer.

However, the ATA rotating images are not displaying. The image location for my header images is set to "wp-content/ata-images/header"

When I replaced the code as you said in the configure header area with:

"%logo %page-right <div id="my-imagecontainer" class="header-image-container"></div> %cat-right"

and pasted this code into the CSS inserts:

"div.imagecontainer {display: none;}
body.page-id-26 {display: block;}"

No image container displayed on the home page.

adding the following code displays my image container, but no images appear.

"body.page-id-26 div#my-imagecontainer {
background-position:left top;
background-repeat;
height:400px;
margin:0;
padding:0;
position:relative;
}"

when I specify a directory and image, that image will appear in my container, but I do not know how to make the images rotate.

"body.page-id-26 div#my-imagecontainer {
background-image: url(http://capaytest.artnsoil.com/wp-content/ata-images/header/food.jpg)"
!important;}

I like Atahualpa because the rotating images work so well without having to use a slideshow plug-in and would really like to get this to work.

Your solution works great for the other pages, where I do not have the slideshow appearing and specify one shorter image in the header. These are displaying correctly by using "div#my-imagecontainer" and resetting the size.

Do you have any ideas why the rotating header images aren't displaying?
Would it be easier to insert a slideshow plug-in in the header?

I will be hooked if I can solve this problem.
http://www.capaytest.artnsoil.com

oops, where was my head (sigh) use
this hides the div.imagecontainer for all pages, then displays it on the one page.

I tried that code and now I don't have any image container again on my home page.

Could the code I am using to display an alt header on some pages be causing a conflict?

Here is an example:

div.imagecontainer {display: none;}
body.page-id-26 div.imagecontainer {display: block;}

body.page-id-32 div#my-imagecontainer {
background-position:center top;
background-repeat:no-repeat;
height:200px;
margin:0;
padding:0;
position:relative;
}

body.page-id-32 div.header-image-container-pre {height: 200px;}
body.page-id-32 div#my-imagecontainer {
background-image: url(http://capaytest.artnsoil.com/wp-con...5/01/about.jpg) !important;}

... (for all pages with alt headers)

Arugh, I must have been over tired from the snow shoveling (we got 25") and the cold. '%logo' displays the logo not the images. '%image' will display the images...:o

Sorry to hear about the snow. Does not sound like much fun.

In my example I included the entire line of code from the Header Configure area, not just the replaced code.

I changed,
%logo %page-right %image %cat-right

to
%logo %page-right <div id="my-imagecontainer" class="header-image-container"></div> %cat-right

is that what you meant for me to do, replace the "%image" ?

Now, somehow I am not getting any headers displaying on any pages.

Before I had 200 pixel high static headers displaying on select pages, and now those are gone.

Let me point out that I have my rotating headers in my ata-images/header directory and the other header images are just in the uploads directory.

What I tried to ay in the last post is remove the %logo and use %image instead.

Noooo! That just replaces the logo with the slideshow.

The logo is fine, the slideshow is fine. I just want to remove it from all pages but the home page and for some reason that is not working.

I almost had it, but don't know code to rotate images in the header directory.

go back and read post #3 (I fixed the CSS in that post)

I attached screen captures from what I did.

The image container is not showing up on the home page.

I removed the code I tried before in CSS inserts which changed the header size on "About" (& other pages) to start fresh.

I also tried changing the page ID number to another page to see if it was just a problem with the home page, but no luck.

You didn't add %image, why not?

I had tried that already with %image before the code you suggested, space or not after "%image has same results:

%logo %page-right %image<div id="my-imagecontainer" class="header-image-container"></div> %cat-right

Instead of no container it displays rotating slide show & empty container underneath on EVERY page. See attachment.

What you have is fine, I made a mistake with the CSS. 'div.imagecontainer' should be 'div#imagecontainer' because 'imagecontainer' is a ID and the period (.) is saying it is a class. So change the CSS from

to

and if you want your image container to not show on the home page but show on all others add

Thank you again.:)

I did get this issue solved with your code & a bit extra. My husband helped me figure out that using the "div.header-image-container-pre" seems to do the trick.

The code below customizes my site so it displays the Ata rotating image header on the home page, smaller, static banner images on select top level pages, and no images on all other pages.

div.header-image-container-pre {
background-position:center top;
background-repeat:no-repeat;
margin:0;
padding:0;
position:relative;
height: 0px;
}

div#imagecontainer {display: none;}
body.page-id-26 div#imagecontainer {display: block;}
body.page-id-26 div.header-image-container-pre {height: 400px;}

body.page-id-32 div.header-image-container-pre {
height:200px;
background-image: url(http://capayvalleygrown.baremetal.co...hort/about.jpg)
}

body.page-id-37 div.header-image-container-pre {
height:200px;
background-image: url(http://capaytest.artnsoil.com/wp-con...5/01/visit.jpg)
}

body.page-id-39 div.header-image-container-pre {
height:200px;
background-image: url(http://capayvalleygrown.baremetal.co...ere-to-buy.jpg)
}

body.page-id-44 div.header-image-container-pre {
height: 200px;
background-image: url(http://capayvalleygrown.baremetal.co...vents-news.jpg)
}

body.page-id-86 div.header-image-container-pre {
height: 200px;
background-image: url(http://capayvalleygrown.baremetal.co...-of-wisdom.jpg)
}

The site is: http://capayvalleygrown.baremetal.com

Glad you got it working.

You might want to change a link in the sidebar. The image under the 'Download the Capay Valley Farm Trail Map' link, just takes you to the image. Make it take you to the same location as the 'Download the Capay Valley Farm Trail Map' link.