WordPress.org

Support

Support » Plugins and Hacks » Carousel Caption and Title – Change font, color, size

Carousel Caption and Title – Change font, color, size

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor Brandon Kraft

    @kraftbj

    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!

    wpforum

    @wordpressorgforum

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

    Plugin Contributor Brandon Kraft

    @kraftbj

    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!

    wpforum

    @wordpressorgforum

    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?

    Plugin Contributor Brandon Kraft

    @kraftbj

    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.

    wpforum

    @wordpressorgforum

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

    @wordpressorgforum

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

    Plugin Contributor Brandon Kraft

    @kraftbj

    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 http://dailypost.wordpress.com/2013/07/25/css-selectors/

    Cheers!

    wpforum

    @wordpressorgforum

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

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

    wpforum

    @wordpressorgforum

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Carousel Caption and Title – Change font, color, size’ is closed to new replies.