Title: Jetpack CSS overriding Custom CSS Last modified: August 20, 2016 --- # Jetpack CSS overriding Custom CSS * Resolved [stacyduval](https://wordpress.org/support/users/stacyduval/) * (@stacyduval) * [13 years, 4 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/) * I would like to customize the styling of background of slideshow for the shortcode[ slideshow]. I entered the CSS into the Custom CSS window: * > .slideshow-window, .jetpack-slideshow { > background-color: #FFFFFF; } * When the styling did not go into effect, I used firebug to troubleshoot and I can see that the CSS for the jetpack-slideshow is overriding the user custom CSS. Is there a fix for this? * The page is: [http://wp.me/P3g0EK-1p](http://wp.me/P3g0EK-1p) * Thank-you * [http://wordpress.org/extend/plugins/jetpack/](http://wordpress.org/extend/plugins/jetpack/) Viewing 12 replies - 1 through 12 (of 12 total) * Thread Starter [stacyduval](https://wordpress.org/support/users/stacyduval/) * (@stacyduval) * [13 years, 4 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3542922) * oops the shortcode is [gallery type="slideshow"] * Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/) * (@jeherve) * Jetpack Mechanic 🚀 * [13 years, 4 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543054) * You can overwrite existing CSS rules by being [more specific](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/): * ``` #content .slideshow-window, .jetpack-slideshow { background-color: #FFFFFF; } ``` * Thread Starter [stacyduval](https://wordpress.org/support/users/stacyduval/) * (@stacyduval) * [13 years, 4 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543058) * Thank-you Jeremy! Worked like a charm. * [knappen](https://wordpress.org/support/users/knappen/) * (@knappen) * [13 years ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543275) * 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. * Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/) * (@jeherve) * Jetpack Mechanic 🚀 * [13 years ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543276) * [@knappen](https://wordpress.org/support/users/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. * [knappen](https://wordpress.org/support/users/knappen/) * (@knappen) * [13 years ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543277) * [@jeremy](https://wordpress.org/support/users/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. * Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/) * (@jeherve) * Jetpack Mechanic 🚀 * [13 years ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543278) * > 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/](http://jetpack.me/contact-support/) * Thanks! * [Enric](https://wordpress.org/support/users/farsite281/) * (@farsite281) * [12 years, 12 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543279) * 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](http://wp.me/p3sPNo-k) * I use Athaualpa theme. * Any idea without modifying the css file? * Thank you! * [knappen](https://wordpress.org/support/users/knappen/) * (@knappen) * [12 years, 12 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543280) * [@jeremy](https://wordpress.org/support/users/jeremy/) Herve * Yep, the issue persists. Like [@farsite281](https://wordpress.org/support/users/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.) * Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/) * (@jeherve) * Jetpack Mechanic 🚀 * [12 years, 12 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543281) * 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; } ``` * [Enric](https://wordpress.org/support/users/farsite281/) * (@farsite281) * [12 years, 12 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543284) * [@jeremy](https://wordpress.org/support/users/jeremy/) Herve thank you for your response! I applied your code in my css editor and it works! * Thank you so much! * [knappen](https://wordpress.org/support/users/knappen/) * (@knappen) * [12 years, 11 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543286) * Thanks [@jeremy](https://wordpress.org/support/users/jeremy/) Herve! Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Jetpack CSS overriding Custom CSS’ is closed to new replies. * ![](https://ps.w.org/jetpack/assets/icon.svg?rev=2819237) * [Jetpack - WP Security, Backup, Speed, & Growth](https://wordpress.org/plugins/jetpack/) * [Frequently Asked Questions](https://wordpress.org/plugins/jetpack/#faq) * [Support Threads](https://wordpress.org/support/plugin/jetpack/) * [Active Topics](https://wordpress.org/support/plugin/jetpack/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/jetpack/unresolved/) * [Reviews](https://wordpress.org/support/plugin/jetpack/reviews/) ## Tags * [gallery shortcode](https://wordpress.org/support/topic-tag/gallery-shortcode/) * [slideshow](https://wordpress.org/support/topic-tag/slideshow/) * 12 replies * 4 participants * Last reply from: [knappen](https://wordpress.org/support/users/knappen/) * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/jetpack-css-overriding-custom-css/#post-3543286) * Status: resolved