Carousel Caption and Title – Change font, color, size

For the title, you should be able to add something like this to your theme’s style.css or using the Appearance->Edit CSS option if you have the Custom CSS module in Jetpack enabled.

.jp-carousel-titleanddesc-title {
font-size: 1em !important;
color: #CC5500 !important;
font-family: font-name !important;
}

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

while changing those lines as required for your needs.

Cheers!

Won’t this conflict with the code that’s already in jetpack-carousel.css?

.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-titleanddesc-title {
		font-size: 1em !important;
	}

.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;
}

.jp-carousel-photo-info {
		left: 0 !important;
		width: 100% !important;
	}

.jp-carousel-photo-info {
	position: relative;
	left: 25%;
	width: 50%;
}

.jp-carousel-transitions .jp-carousel-photo-info {
	-webkit-transition: 400ms ease-out;
	-moz-transition: 400ms ease-out;
	-o-transition: 400ms ease-out;
	transition: 400ms ease-out;
}

Yup, that’s the goal is to provide new rules to override the existing ones.

One thing I didn’t take into account is on archive pages, the carousel.css is loaded in the footer, which means we need to be more specific in our rules to make sure it works in all cases.

e.g.

.jp-carousel-light .jp-carousel-info .jp-carousel-titleanddesc div {
	color: #CC5500 !important;
}

for the title.

Cheers!

Do I need to remove the code that’s already in jetpack-carousel.css or add all of the code you provide in theme’s (child) style.css or using the Appearance->Edit CSS?

Don’t edit the core files (e.g. jetpack-carousel.css). CSS is designed to allow multiple declaration of rules. The latest (and most specific) rules will be used.

I changed the color, but the font sizes remained the same. How can we change that? Added the following to Appearance->Edit CSS. Sorry, I don’t know css code that well. Thanks for your help.

.jp-carousel-titleanddesc-title {
	font-size: 1em !important;
	color: #000000 !important;
	font-family: font-name !important;
}

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

.jp-carousel-light .jp-carousel-info .jp-carousel-titleanddesc div {
	color: #666666 !important;
}

I added font-size to the first two .jp-carousel, but it didn’t change the size. Help please.

.jp-carousel-titleanddesc-title {
	font-size: 2em !important;
	color: #000 !important;
	font-family: font-name !important;
}

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

.jp-carousel-light .jp-carousel-info .jp-carousel-titleanddesc div {
	color: #000 !important;
	font-size: 1em !important;
}

Perhaps with the title:

.jp-carousel-light .jp-carousel-info h2, .jp-carousel-light .jp-carousel-titleanddesc {
font-size: 2em !important;
}

The key is finding the right CSS selector. My replies are meant to be suggestions on where to start looking, not ready-to-use code. CSS work is customization beyond the scope of support we provide.

This resource may help https://dailypost.wordpress.com/2013/07/25/css-selectors/

Cheers!

The thumbnail images are all in one vertical column. Why? How can I fix this. I fix one thing, and something else breaks.

https://dev.nataliebork.com/projects/glance/

I added this to Appearance > theme options > Custom CSS

and it works!!!!

/* carousel text size and color */

.jp-carousel-titleanddesc-title {
	font-size: 1em !important;
	color: #000 !important;
	font-family: font-name !important;
        text-align: left;
}

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

/* text description centered horizontally in Carousel slideshow*/
.jp-carousel-titleanddesc-desc p {
	font-size: 1em!important;
	text-align: center;
	padding-top: 7px;
color: #000000 !important;
}

.jp-carousel-light .jp-carousel-info .jp-carousel-titleanddesc div {
	color: red !important;
	font-size: 1em !important;
        text-align: left;
color: #000 !important;
}

/* text caption left horizontally in Carousel slideshow*/
.jp-carousel-light .jp-carousel-info h2, .jp-carousel-light .jp-carousel-titleanddesc {
font-size: 1em !important;
text-align: left;
color: #000 !important;
}