oops the shortcode is [gallery type="slideshow"]
You can overwrite existing CSS rules by being more specific:
#content .slideshow-window, .jetpack-slideshow {
background-color: #FFFFFF;
}
Thank-you Jeremy! Worked like a charm.
Should that not work, one can also modify the css file.
1. Locate the css file here:
(YOUR WP INSTALL)/wp-content/plugins/jetpack/modules/shortcodes/css/slideshow-shortcode.css
2. Inside slideshow-shortcode.css you will find at the top:
.slideshow-window {
background-color: #222;
border: 20px solid #222;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-khtml-border-radius: 11px;
margin-bottom: 20px;
}
3. Edit the background-color to suit and away you go.
@knappen Although this will work, I would strongly recommend against editing plugin files, in Jetpack or any other plugins. When you do so, it becomes more complicated to update the plugin without losing your changes.
If you want to make CSS changes to a plugin, it’s usually best to just add your own CSS to your theme stylesheet, to a custom CSS file, or to the Custom CSS editor in Jetpack. This way, your changes won’t get overwritten next time you update the plugin.
@jeremy Herve I totally agree that editing the plugin itself is generally a bad idea.
However, I was unable to overwrite the existing CSS rules either within the theme or via the Custom CSS editor. Perhaps this is a result of my child theme setup on this install, but, in this case, update issues are moot- hence the crowbar-style solution.
It took some time to find the location of the stylesheet controlling background color and, once I did, I thought others were probably struggling with the same challenge.
However, I was unable to overwrite the existing CSS rules either within the theme or via the Custom CSS editor. Perhaps this is a result of my child theme setup on this install, but, in this case, update issues are moot- hence the crowbar-style solution.
Do you still experience the issue today? If so, I’d be happy to take a look at your site to try to understand the problem.
If you want it to remain private, you can also contact me via this contact form:
http://jetpack.me/contact-support/
Thanks!
I have the same problem. I tried to add
#content .slideshow-window, .jetpack-slideshow {
background-color: #FFFFFF;
}
to change de the styling of background of slideshow (#000000 – #FFFFFF) but background is still black instead of white.
http://wp.me/p3sPNo-k
I use Athaualpa theme.
Any idea without modifying the css file?
Thank you!
@jeremy Herve
Yep, the issue persists. Like @farsite281, I am using Atahaualpa here so perhaps that is the place to start. (VaultPress has given intermittent trouble on Atahaualpa themed sites so this may be a larger issue with Atahaualpa and Jet Pack? No need to look at this particular install just yet- I will contact you for tech support if this becomes a going concern.)
The Atahaualpa theme doesn’t use any #content container, so the code I gave earlier won’t work. You would need to use the name of the container used in the Atahaualpa theme:
.post-bodycopy .slideshow-window, .jetpack-slideshow {
background-color: #FFFFFF;
}
@jeremy Herve thank you for your response!
I applied your code in my css editor and it works!
Thank you so much!
