Sleek Slideshow CSS

symphonyofthehills · Member · Nov 20, 2014 at 1:12 pm
Copy link

Add topic to favorites
I’ve been searching for a way to change the basic slideshow gallery to look more appealing because, the current style doesn’t fit with the vision my clients have for their website. I’m working with the Collective theme currently but my clients want a slideshow section similar to the tdEditor theme’s slideshow on their demo.
http://tdeditordemo.wordpress.com/

Any helpful tips out there?

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Nov 20, 2014 at 6:39 pm
Copy link
Can you link to an example of where you’re using the default slideshow so we can take a look at what might work to modify it?
symphonyofthehills · Member · Nov 20, 2014 at 7:07 pm
Copy link
Music

The slide show, if corrected will be going on the home page but for now, this is how the slide show appears currently.
hallluke · Member · Nov 20, 2014 at 7:25 pm
Copy link
Before getting started with the CSS I’d advise that if you want to create a slideshow and have it appear like the tdEditor one you should make sure all your images are uploaded at exactly the same size, and that the width is what you want – if you try to stretch images with CSS they end up losing quality which is something to avoid.

Then you can remove the grey background and border with this code:
```
.slideshow-window {
  background:transparent;
  border-color:transparent;
}
```
And this to show the controls in the bottom right corner:
```
.slideshow-window .slideshow-controls {
  display:block!important;
  right:10px;
  bottom:10px;
  width:auto;
}
```
This code will modify all slideshows, if you just want it to apply on the homepage add .home to the begging of both.
symphonyofthehills · Member · Dec 15, 2014 at 10:01 pm
Copy link
Sorry for the very late reply.

I did add the code into my CSS but the grey box is still surrounding the images.
thesacredpath · Member · Dec 15, 2014 at 11:44 pm
Copy link
We can force the color change on the background by including the !important keyword to override the original colors.
```
.slideshow-window {
    background: transparent !important;
    border-color: transparent !important;
}
```
On the controls, if you look at TdEditor, you will notice the images are all the same size. On your client’s website, they are all different sizes so the controls sit outside of the image area on all images. I would suggest not using this part of the code @hallluke gave and keep the controls in the bottom center of the images, and I would also possibly look at trying to keep the images all around the same proportions if possible.

No items found.