Changing background color of the slideshow in the gallery widget

vanderrick · Member · Jan 14, 2015 at 2:57 am
Copy link

Add topic to favorites
I’d like to change the background color used in the gallery widget when displaying a slideshow.

I thought that the background option under Settings > Media > Slideshow would effect it but it does not. Plus, it only allows for black/white and I’d like to match the background color of the widget. I’ve tried to override in the css but need help figuring out the right tag. Can someone please advise?

Thanks in advance!
staff-happychia · Staff · Jan 14, 2015 at 8:21 am
Copy link
Change red to your preferred color or hex code in the following style:
```
div#widget-gallery-3-slideshow {
    background: red;
    border-color: red;
}
```
There is a 20px wide background color around the background so I thought it is easy to color the border to the same color as the background so it all looks uniform. To see it yourself, test without adding the border-color style and see what happens.

Please let me know if I did not understand your need correctly :-)
vegeluv · Member · Jan 14, 2015 at 2:33 pm
Copy link
I have the same question – my slideshow background is black (or grey) and I can’t change it in Settings => Media into white (as wanted).
Do I need an upgrade for this or is it also available for regular users?
staff-happychia · Staff · Jan 14, 2015 at 5:26 pm
Copy link
Yes, changing slideshow background using CSS requires the paid Custom Design upgrade.
vanderrick · Member · Jan 14, 2015 at 5:52 pm
Copy link
That worked. Thanks chaitanyamsv! As a follow-up is there a way in the CSS to then disable the slideshow controls from appearing, even if the user hovers over the slideshow? I was trying “slideshow-controls” and display: none but that didn’t work. Perhaps through CSS its easier to make them completely opaque?
staff-happychia · Staff · Jan 15, 2015 at 8:47 am
Copy link
Let’s make the slide show controls completely transparent on hover:
```
.slideshow-controls:hover {
    opacity:0;
}
```
vanderrick · Member · Jan 15, 2015 at 4:49 pm
Copy link
Brilliant, thanks.

No items found.