WordPress.org

Forums

Jetpack by WordPress.com
Carousel Caption and Title - Change font, color, size (11 posts)

  1. wpforum
    Member
    Posted 11 months ago #

    http://dev.nataliebork.com/projects/glance/#jp-carousel-655

    Caption is small and gray.
    Title is bigger font, black.

    How do I change font, color, size for each?

    https://wordpress.org/plugins/jetpack/

  2. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    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!

  3. wpforum
    Member
    Posted 11 months ago #

    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;
    }
  4. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    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!

  5. wpforum
    Member
    Posted 11 months ago #

    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?

  6. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    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.

  7. wpforum
    Member
    Posted 11 months ago #

    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;
    }
  8. wpforum
    Member
    Posted 11 months ago #

    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;
    }
  9. Brandon Kraft
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    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!

  10. wpforum
    Member
    Posted 11 months ago #

    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/

  11. wpforum
    Member
    Posted 11 months ago #

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

Reply

You must log in to post.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic