How to show slideshow on home page only

[ehswift]

My site is not live yet, but is being hosted on a development web server on my own PC. I have installed the Ultimate Fadein Slideshow version 2.6.1 (The non add-on version). The slideshow dimensions are somewhat large so I would like to show it on the homepage only. I also have some other elements that remain on top of the slideshow such as a quote box, quote button, reviews box and reviews button.

In order to maximize screen real estate I would like to hide the slideshow, quote box and review box from all other pages of the site, but I am not quite sure how to do this. The quote and reviews boxes are custom boxes I created in CSS. In order for the slideshow to show up I placed this code in the tpl_header.php file: <div id="fadeshow4"></div>. To make sure that the slideshow does not over up other elements I am using a #fadeshow4 {z-index:0;} in the stylesheet.css file. I will include the CSS code for the custom boxes and buttons below.

/*Quote Button*/
.button {
background-color: transparent;
box-shadow: 10px 10px 10px #000;
border-radius: 5px;
border: none;
color: white;
padding: 10px 10px;
img-align: left;
text-align: center;
text-decoration: none;
display: inline-block;
box-shadow: 10px 10px 10px #000;
font-family: "Times New Roman", Times, serif;
font-size: 1.0em;
font-weight: bold;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;

.button2 {
z-index: 1;
box-shadow: none;
background-color: transparent;
color: white;
border: 2px solid white;
font-weight: bold;
position: absolute;
top: 338px;
right: 60px;
height: 44px;
width: 390px;
}

.button2:hover {
border: 2px solid #ffffff;
background-color: white;
color: green;
position: absolute;
top: 338px;
right: 60px;
}

/*Quote Box*/
div.quote2_box {
position: absolute;
top: 240px;
right: 30px;
background-color: green;
width: 407px;
height: 110px;
padding: 20px;
margin: 0;
opacity: .50;
}

div.quote2_box_heading h1 {
position: absolute;
top: 240px;
right: 30px;
background-color: transparent;
border: 2px solid white;
box-shadow: 10px 10px 10px #000;
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 36px;
font-weight: bold;
text-align: center;
width: 405px;
height: 108px;
padding: 20px;
margin: 0;
}

div.quote2_box_text {
position: absolute;
top: 278px;
right: 30px;
background-color: transparent;
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
text-align: center;
width: 407px;
height: 110px;
padding: 20px;
margin: 0;
}

/*Reviews Button*/
.button5 {
z-index: 1;
box-shadow: none;
background-color: transparent;
color: #ffffff;
border: 2px solid #ffffff;
width: 170px;
height: 35px;
border-radius: 5px;
position: absolute;
top: 532px;
right: 169px;
}

.button5:hover {
border: 2px solid #ffffff;
background-color: #ffffff;
color: green;
position: absolute;
top: 532px;
right: 169px;
}

/*Reviews Box*/
div.reviews_box {
position: absolute;
top: 417px;
right: 148px;
background-color: green;
width: 170px;
height: 120px;
padding: 20px;
margin: 0;
opacity: .50;
}

div.reviews_box_heading h1 {
position: absolute;
top: 417px;
right: 148px;
background-color: none;
border: 2px solid white;
box-shadow: 10px 10px 10px #000;
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 48px;
font-weight: bold;
text-align: center;
width: 168px;
height: 118px;
padding: 20px;
margin: 0;
}

div.reviews_box_text {
position: absolute;
top: 456px;
right: 148px;
background-color: transparent;
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 25px;
font-weight: bold;
text-align: center;
width: 170px;
height: 120px;
padding: 20px;
margin: 0;
}

div.reviews_box_ratings {
position: absolute;
top: 478px;
right: 148px;
background-color: transparent;
img-align: center;
width: 170px;
height: 120px;
padding: 20px;
}

Here is a picture if this helps.



Thanks for your help in advance.