Custom CSS code color not overriding js plugin for slideshow

I see you’ve asked your CSS questions in the Themes and Templates forums, as we suggested in the past:
https://www.ads-software.com/support/topic/how-to-change-color-and-font-in-css-stylesheet-editor?replies=1

I’ll mark this thread as resolved.

I followed your advise, reading , but the changes do not appear.

I also reviewed
https://developer.chrome.com/devtools/docs/elements-styles
https://developer.chrome.com/devtools/docs/authoring-development-workflow#live-editing

I added the custom code from jetpack-carousel.css to Appearance > Theme Options > Custom CSS

The code below does not seem to effort the thumbnails page or in the Carousel slideshow https://dev.nataliebork.com/#jp-carousel-908

I added it to
Appearance > Theme Options > Custom CSS
and
Appearance → Edit CSS

See the code in Chrome > Tools > Developer Tools and let me know why I am not successful getting the code to work.

/* ADDED jetpack-carousel.css to change text font, color, size, placement */
/* make it orange links */
.jp-carousel-info ::selection {
	background: #f1831e;
/* Safari */
	color: #fff;
}

.jp-carousel-info ::-moz-selection {
	background: #f1831e;
/* Firefox */
	color: #fff;
}

div.jp-carousel-buttons a:hover {
	color: #f1831e;
	border: none !important;
}

div.jp-carousel-buttons a.jp-carousel-reblog:hover {
	background-position: 6px -56px;
	color: #f1831e;
}

a.jp-carousel-image-download:hover {
	background-position: 0 -122px;
	color: #f1831e;
	border: none !important;
}

.jp-carousel-comments p a:hover, .jp-carousel-comments p a:focus, .jp-carousel-comments p a:active {
	color: #f1831e !important;
}

////////////
/* text caption center horizontally in gallery thumbnail*/
.gallery-item .wp-caption-text {
	text-align: center;
	color: #000 !important;
	font-size: 1em !important;
}

/* carousel text size and color */
/** Title and Desc Start **/
.jp-carousel-titleanddesc {
	border-top: 1px solid #222;
	color: #000;
	font-size: 15px;
	padding-top: 24px;
	margin-bottom: 20px;
	font-weight: 400;
}

.jp-carousel-titleanddesc-title {
	font: 300 1.5em/1.1 "Helvetica", sans-serif !important;
	text-transform: none !important;
/* prevents uppercase from leaking through */
	color: #fff;
	margin: 0 0 15px;
	padding: 0;
}

.jp-carousel-photo-info h2 {
	font-size: 1em !important;
	color: #000 !important;
	font-family: font-name !important;
	text-align: center;
}

/* text description left horizontally in Carousel slideshow*/
.jp-carousel-titleanddesc-desc p {
	font-size: 1em !important;
	color: #000 !important;
	text-align: left;
	line-height: 1.4;
	margin-bottom: .75em;
	padding-top: 0;
}

.jp-carousel-titleanddesc p a,
.jp-carousel-comments p a,
.jp-carousel-info h2 a {
	color: #fff !important;
	border: none !important;
	text-decoration: underline !important;
	font-weight: normal !important;
	font-style: normal !important;
}

.jp-carousel-titleanddesc p strong,
.jp-carousel-titleanddesc p b {
	font-weight: bold;
	color: #000;
}

.jp-carousel-titleanddesc p em,
.jp-carousel-titleanddesc p i {
	font-style: italic;
	color: #000;
}

.jp-carousel-titleanddesc p a:hover,
.jp-carousel-comments p a:hover,
.jp-carousel-info h2 a:hover {
	color: #f1831e !important;
}

.jp-carousel-titleanddesc p:empty {
	display: none;
}

.jp-carousel-photo-info h1:before,
.jp-carousel-photo-info h1:after,
.jp-carousel-left-column-wrapper h1:before,
.jp-carousel-left-column-wrapper h1:after {
	content: none !important;
}

/** Title and Desc End **/
/** Meta Box Start **/
.jp-carousel-image-meta {
	display: none;
	background: #fff;
	border: 0 solid #fff;
	color: #fff;
	font-size: 13px;
	font: 12px/1.4 "Helvetica", sans-serif !important;
	overflow: hidden;
	padding: 0;
	width: 0 !important;
}

.jp-carousel-image-meta li,
.jp-carousel-image-meta h5 {
	font-family: "Helvetica", sans-serif !important;
	position: inherit !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	background: none !important;
	border: none !important;
	font-weight: 400 !important;
	line-height: 1.3em !important;
}

.jp-carousel-image-meta ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.jp-carousel-image-meta li {
	width: 48% !important;
	float: left !important;
	margin: 0 2% 15px 0 !important;
	color: #fff !important;
	font-size: 13px !important;
}

.jp-carousel-image-meta h5 {
	color: #000 !important;
	text-transform: uppercase !important;
	font-size: 15px !important;
	margin: 0 0 2px !important;
	letter-spacing: .1em !important;
}

a.jp-carousel-image-download {
	padding-left: 23px;
	display: inline-block;
	clear: both;
	color: #fff;
	line-height: 0;
	font-weight: 400;
	font-size: 13px;
	text-decoration: none;
	background-position: 0 -82px;
}

a.jp-carousel-image-download span.photo-size {
	font-size: 11px;
	border-radius: 1em;
	margin-left: 2px;
	display: inline-block;
}

a.jp-carousel-image-download span.photo-size-times {
	padding: 0 0 0 2px;
}

a.jp-carousel-image-download:hover {
	background-position: 0 -102px;
	color: #fff;
	border: none !important;
}

/** Meta Box End **/
/* ----- Light variant ----- */
.jp-carousel-light .jp-carousel-overlay {
	background: #fff;
}

.jp-carousel-light .jp-carousel-next-button:hover span,
.jp-carousel-light .jp-carousel-previous-button:hover span {
	opacity: .8;
}

.jp-carousel-light .jp-carousel-close-hint:hover,
.jp-carousel-light .jp-carousel-titleanddesc div {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-comments p a,
.jp-carousel-light .jp-carousel-comment .comment-author a,
.jp-carousel-light .jp-carousel-titleanddesc p a,
.jp-carousel-light .jp-carousel-titleanddesc p a,
.jp-carousel-light .jp-carousel-comments p a,
.jp-carousel-light .jp-carousel-info h2 a {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-comments p a:hover,
.jp-carousel-light .jp-carousel-comment .comment-author a:hover,
.jp-carousel-light .jp-carousel-titleanddesc p a:hover,
.jp-carousel-light .jp-carousel-titleanddesc p a:hover,
.jp-carousel-light .jp-carousel-comments p a:hover,
.jp-carousel-light .jp-carousel-info h2 a:hover {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-info h2,
.jp-carousel-light .jp-carousel-titleanddesc,
.jp-carousel-light .jp-carousel-titleanddesc p,
.jp-carousel-light .jp-carousel-comment,
.jp-carousel-light .jp-carousel-comment p,
.jp-carousel-light div.jp-carousel-buttons a,
.jp-carousel-light .jp-carousel-titleanddesc p strong,
.jp-carousel-light .jp-carousel-titleanddesc p b,
.jp-carousel-light .jp-carousel-titleanddesc p em,
.jp-carousel-light .jp-carousel-titleanddesc p i {
	color: #fc6412;
}

.jp-carousel-light .jp-carousel-buttons {
	border-bottom-color: #f0f0f0;
	background: #f5f5f5;
}

.jp-carousel-light div.jp-carousel-buttons a:hover {
	text-decoration: none;
	color: #f1831e;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog,
.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog:hover {
	background-position: 4px -56px;
	padding-left: 24px !important;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged,
.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like.liked {
	background-color: #2ea2cc;
	color: #fff;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
	background-position: 0 -176px;
}

.rtl .jp-carousel-light div.jp-carousel-buttons a.jp-carousel-commentlink {
	background-position: 100% -176px;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like,
.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like:hover {
	background-position: 5px -15px;
	padding-left: 23px !important;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-reblog.reblogged {
	background-position: 5px -36px;
}

.jp-carousel-light div.jp-carousel-buttons a.jp-carousel-like.liked {
	background-position: 5px 5px;
}

.jp-carousel-light div#carousel-reblog-box {
	background: #eee;
	background: -moz-linear-gradient(bottom,#ececec,#f7f7f7);
	background: -webkit-gradient(linear,left bottom,left top,from(#ececec),to(#f7f7f7));
	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
}

.jp-carousel-light #carousel-reblog-box textarea {
	border: 1px inset #ccc;
	color: #666;
	border: 1px solid #cfcfcf;
	background: #fff;
}

.jp-carousel-light #carousel-reblog-box .canceltext {
	color: #888;
}

.jp-carousel-light #carousel-reblog-box .canceltext a {
	color: #666;
}

.jp-carousel-light #carousel-reblog-box select {
	background: #eee;
	color: #333;
	border: 1px solid #aaa;
}

.jp-carousel-light #carousel-reblog-box input#carousel-reblog-submit, #jp-carousel-comment-form-button-submit {
	color: #333;
	background: #fff;
	background: -moz-linear-gradient(bottom,#ddd,#fff);
	background: -webkit-gradient(linear,left bottom,left top,from(#ddd),to(#fff));
	border: 1px solid #aaa;
}

.jp-carousel-light .jp-carousel-image-meta {
	background: #fafafa;
	border: 1px solid #eee;
	border-top-color: #f5f5f5;
	border-left-color: #f5f5f5;
	color: #333;
}

.jp-carousel-light .jp-carousel-image-meta li {
	color: #000 !important;
}

.jp-carousel-light .jp-carousel-close-hint {
	color: #ccc;
}

.jp-carousel-light .jp-carousel-close-hint span {
	background-color: white;
	border-color: #ccc;
}

.jp-carousel-light #jp-carousel-comment-form-comment-field::-webkit-input-placeholder {
	color: #aaa;
}

.jp-carousel-light #jp-carousel-comment-form-comment-field:focus {
	color: #333;
}

.jp-carousel-light #jp-carousel-comment-form-comment-field:focus::-webkit-input-placeholder {
	color: #ddd;
}

.jp-carousel-light a.jp-carousel-image-download {
	background-position: 0 -122px;
}

.rtl .jp-carousel-light a.jp-carousel-image-download {
	background-position: 100% -122px;
}

.jp-carousel-light a.jp-carousel-image-download:hover {
	background-position: 0 -122px;
	color: #f1831e;
}

.rtl .jp-carousel-light a.jp-carousel-image-download:hover {
	background-position: 100% -122px;
}

.jp-carousel-light textarea#jp-carousel-comment-form-comment-field {
	background: #fbfbfb;
	color: #333;
	border: 1px solid #dfdfdf;
	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}

.jp-carousel-light #jp-carousel-comment-form-commenting-as input {
	background: #fbfbfb;
	border: 1px solid #dfdfdf;
	color: #333;
	-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}

.jp-carousel-light #jp-carousel-comment-form-commenting-as input:focus {
	background: #fbfbfb;
	color: #333;
}

.jp-carousel-light  #jp-carousel-comment-post-results span {
	background: #f7f7f7;
	border: 1px solid #dfdfdf;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
	box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.jp-carousel-light .jp-carousel-slide {
	background-color: #fff;
}

.jp-carousel-light .jp-carousel-titleanddesc {
	border-top: 1px solid #eee;
}

.jp-carousel-light .jp-carousel-fadeaway {
	background: -moz-linear-gradient(bottom,rgba(255,255,255,0.75),rgba(255,255,255,0));
	background: -webkit-gradient(linear,left bottom,left top,from(rgba(255,255,255,0.75)),to(rgba(255,255,255,0)));
}

“I want to change text font, color, size, placement.”

I don’t know what has worked and what hasn’t. Please indicate the OLD color for links and then tell me the desired NEW color. We can get this fixed quick.

https://dev.nataliebork.com/
I would like the font size to be larger.

https://dev.nataliebork.com/#jp-carousel-908
I would like to make the link orange (#fc935a), like at https://dev.nataliebork.com/, instead of blue (#1e8cbe).
Also, I would like to change the font size for the title, description, and caption.

.jp-carousel-photo-info h2 a {color:fc935a;}

That’s the line you need to add to your css to fix the link color. If it doesn’t work add !important after the ; and before the }

When ont his page : https://dev.nataliebork.com/#jp-carousel-908 inspect element on the link in question. You’ll see the css is coming from jetpack on line 888 from a whole bunch of jp-carousel-light styles.

.jp-carousel-photo-info h2 {font-size:2em;}

That line should get you started on the resizing of fonts.

If any of this stuff deson’t work, it may be because your custom styles are being loaded in the site BEFORE the jetpack styles. In css whatever loads last is the style that is used. So if you still have problems, and aren’t trying to win any coding best practice awards, you can always add a style block in your html at the bottom of the page.

So again, this isn’t best practice, but what you can do is open up footer.php in your theme, and add this right before your closing </body> tag:

<style>
.jp-carousel-photo-info h2 a {color:fc935a;}
</style>

That virtually guarantees your rule will be loaded last after all other css and will therefore be the style used.

Thanks a heap for this solution!

I was able to use the <style> tag to override the styling in a third-party JS script external to my site that I was using in a widget. Adding the code to the end of the widget was sufficient to override what was used in the script. It might also work to add it to the end of a post or page that invokes a script (haven’t tried it yet).