Slider help

[briegger]

Hey folks!

I could use some guidance, I've got 2 different questions RE Sliders/Slideshows.

I'm looking for a way to be able to center the slide show on the page:  http://k2smarketing.com/cmacco/offices/
 I'd like to add a background and have the slideshow play within it, like a picture frame or a picture of a tv/ipad or something. I just want to give it a bit more depth.

Thanks everybody!

[AnitaC]

Well, if it were me, I would change the template to FULL WIDTH. Remove that Contact Us button because you can clearly see the Contact Us on the Navigation. Then you can make the slider the full with.

For the background, you could possibly wrap the slider code with a background image, but I am not quite sure how to do that - so I will defer that to someone.

---

Need help with customization or troubleshooting? Reach out to me.

[briegger]

Thanks Anitac! It seems the slideshow is left justified so if I change templates, it always puts it on the left.

Here's the code:

.slideshow_container { }

.slideshow_container .slideshow { }

.slideshow_container img { }

.slideshow_container .slide {
margin-right: 2px;
}

.slideshow_container .transparent {
filter: alpha(opacity = 50);
opacity: 0.5;
}

.slideshow_container .transparent:hover {
filter: alpha(opacity = 80);
opacity: 0.8;
}

.slideshow_container .description {
background: #000;
}

.slideshow_container .controlPanel {
width: 21px;
height: 21px;
background: #000;
border-radius: 2px;
-moz-border-radius: 10px;
}

.slideshow_container .controlPanel ul { }

.slideshow_container .controlPanel ul li {
margin: 3px;
width: 15px;
height: 15px;
}

.slideshow_container .controlPanel ul li:hover { }

.slideshow_container .play {
background: url('%plugin-url%/images/SlideshowPlugin/light-controlpanel.png') 0 0 no-repeat;
}

.slideshow_container .pause {
background: url('%plugin-url%/images/SlideshowPlugin/light-controlpanel.png') -15px 0 no-repeat;
}

.slideshow_container .button {
margin-top: -20px;
height: 40px;
width: 19px;
background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat;
}

.slideshow_container .previous { }

.slideshow_container .next {
background-position: -19px 0;
}

.slideshow_container a {
text-decoration: none;
color: #fff;
text-align: center;
}

.slideshow_container .description h2,
.slideshow_container .description p {
color: #fff;
}

.slideshow_container h2 {
margin: 5px;
font-size: 25px;
}

.slideshow_container p {
margin: 7px;
font-size: 15px;
}

[AnitaC]

Did you add the slider as a widget to the page or did you use a shortcode?

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts