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 »

Want Slideshow on home page but not others


  #1  
Old Jan 23, 2015, 02:21 PM
justme
 
22 posts · Feb 2014
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.
  #2  
Old Jan 24, 2015, 08:50 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jan 25, 2015, 04:19 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
HTML Code:
<div id="imagecontainer" class="header-image-container"></div>
to
HTML Code:
<div id="my-imagecontainer" class="header-image-container"></div>
and change your CSS so the ATA image container only displays on teh home page
HTML Code:
div.imagecontainer {display: none;}
body.page-id-26 div.imagecontainer {display: block;}
then adjust your other CSS to use the 'my-imagecontainer' ID
__________________
"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; Jan 30, 2015 at 05:28 PM.
  #4  
Old Jan 28, 2015, 08:46 PM
justme
 
22 posts · Feb 2014
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
  #5  
Old Jan 29, 2015, 02:28 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
oops, where was my head (sigh) use
HTML Code:
div.imagecontainer {display: none;}
body.page-id-26 div.imagecontainer {display: block;}
this hides the div.imagecontainer for all pages, then displays it on the one page.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jan 29, 2015, 11:48 AM
justme
 
22 posts · Feb 2014
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)
  #7  
Old Jan 29, 2015, 02:07 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jan 30, 2015, 02:36 PM
justme
 
22 posts · Feb 2014
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.
  #9  
Old Jan 30, 2015, 03:07 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What I tried to ay in the last post is remove the %logo and use %image instead.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Jan 30, 2015, 04:27 PM
justme
 
22 posts · Feb 2014
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.
  #11  
Old Jan 30, 2015, 05:27 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go back and read post #3 (I fixed the CSS in that post)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Jan 30, 2015, 06:03 PM
justme
 
22 posts · Feb 2014
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.

Last edited by justme; Jan 31, 2015 at 12:16 PM.
  #13  
Old Jan 30, 2015, 07:35 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You didn't add %image, why not?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Jan 31, 2015, 12:17 PM
justme
 
22 posts · Feb 2014
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.
Attached Thumbnails
Click image for larger version

Name:	header double.jpg
Views:	213
Size:	198.8 KB
ID:	2659  
  #15  
Old Jan 31, 2015, 12:44 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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

HTML Code:
div.imagecontainer {
    display: none
}

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

HTML Code:
div#imagecontainer {
    display: none;
}

body.page-id-26 div#imagecontainer {
    display: block;
}
and if you want your image container to not show on the home page but show on all others add

HTML Code:
div#my-imagecontainer {
    display: block;
}

body.page-id-26 div#imagecontainer {
    display: noone;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Feb 3, 2015, 12:45 PM
justme
 
22 posts · Feb 2014
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
  #17  
Old Feb 3, 2015, 12:55 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Home link in page menu on all pages except home page - possible? morgana123 Page & Category Menu Bars 4 Jun 10, 2014 08:13 AM
[SOLVED] page template jquery slideshow sstudebaker Atahualpa 3 Wordpress theme 9 Mar 24, 2013 11:44 AM
Home Page named Home, Exclude page id from menu SharonJ Page & Category Menu Bars 13 Oct 29, 2010 10:14 PM
Creative ideas for d13 Slideshow or other Slideshow theadventurebite Plugins & Atahualpa 0 Jun 16, 2010 02:30 AM


All times are GMT -6. The time now is 09:44 AM.


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