Need help? Check out our Support site, then

Image titles in carousel customization in Hero theme

  1. 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

  2. In your custom CSS editor, add the following:

    .featured .entry-title a {<br /> font-size: 1.6em;<br /> }

    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.

  3. 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.

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

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

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

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

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

    Hope that helps, apologies for my mistake earlier.

  6. siobhyb, yes, that's the one!

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

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

  8. 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...

  9. 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

  10. Thanks for your interest so far. I appreciate it.

  11. +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:

    @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;
  12. Thank you very much!

Topic Closed

This topic has been closed to new replies.

About this Topic