WordPress.org

Forums

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

  1. wpforum
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

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

About this Topic