Slider help

[brieggerParticipant Post count: 18]

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!

[anitacModerator Post count: 2662]

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.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[brieggerParticipant Post count: 18]

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;
}

[anitacModerator Post count: 2662]

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

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[Author]

Posts