Image titles in carousel customization in Hero theme

  • Author
    Posts
  • #1180703

    emecu
    Member

    I’m working in a blog about photography history, so the titles of the photographies are rather long. I can’t find a way to decrease the size of the titles font in Hero.

    Can you please help mi with this?

    Thank you very much in advance.

    The blog I need help with is fdfot.wordpress.com.

    #1180899

    siobhyb
    Staff

    In your custom CSS editor, add the following:

    .featured .entry-title a {
    font-size: 1.6em;
    }

    This code targets the font-size of the title on the images in your site’s slider. You can adjust the value in the font-size to your wants and needs.

    #1180934

    emecu
    Member

    Thanks siobhyb, but the one I need is the carousel images titles, the one that opens when you click an image inside an entry.

    The one you wrote is, indeed, the title for the slider text on the front page.

    #1180937

    siobhyb
    Staff

    Can you confirm that this the following URL links to an example of the carousel you’re speaking of?

    http://fdfot.wordpress.com/2013/01/04/kurt-schnitzer/#jp-carousel-1040

    If so, you can target the title by including the following in your CSS editor:

    .jp-carousel-titleanddesc-title {
    font-size: 1em !important;
    }

    #1180942

    siobhyb
    Staff

    Looking through further images in your carousel, I would suggest 0.85em as a font-size.

    .jp-carousel-titleanddesc-title {
    font-size: 0.85em !important;
    }

    Hope that helps, apologies for my mistake earlier.

    #1180945

    emecu
    Member

    siobhyb, yes, that’s the one!

    However, the code doesn’t work. The title remains being gigantic.

    #1180946

    siobhyb
    Staff

    Ah, that’s odd. It’s working for me in the inspector. Did you copy and paste the code exactly as above?

    #1180949

    emecu
    Member

    Yes. I then changed the 1em to .85 em and then to .5em, just to be sure. Nothing happened. I then saved the stylesheet and opened the blog in another browser. Nothing. :-( Don’t know what to do or say…

    #1180953

    siobhyb
    Staff

    Ok, the CSS from the carousel’s stylesheet seems to be taking precedence as it is being processed after your Custom CSS. Let me have a look on my test blog and I’ll try to find a workaround for this. :s

    #1180959

    emecu
    Member

    Thanks for your interest so far. I appreciate it.

    #1181029

    +1 for a live example, you should always include a specific link if you possibly can.

    It appears you’ve deleted the example @siobhyb linked to before, and I found this one to use instead:
    http://fdfot.wordpress.com/2013/03/12/julio-pou-1862-1940/#jp-carousel-994

    @siobhyb is correct that the Carousel CSS gets loaded after the Custom CSS. To get around that, you need to make your custom CSS more specific than the CSS used by the final stylesheet loaded. One way to do that is to use a more specific selector. For example, if you change “.jp-carousel-titleanddesc-title” to “.jp-carousel-titleanddesc .jp-carousel-titleanddesc-title” then it should work.

    Give this a try:

    .jp-carousel-titleanddesc .jp-carousel-titleanddesc-title {
    	font-size: .85em !important;
    }
    #1181040

    emecu
    Member

    Thank you very much!

The topic ‘Image titles in carousel customization in Hero theme’ is closed to new replies.