Image titles in carousel customization in Hero theme

• 

  emecu · Member · Mar 12, 2013 at 5:22 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  siobhyb · Member · Mar 12, 2013 at 7:51 pm

  • Copy link

  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.

• 

  emecu · Member · Mar 12, 2013 at 9:53 pm

  • Copy link

  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.

• 

  siobhyb · Member · Mar 12, 2013 at 10:01 pm

  • Copy link

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

• 

  siobhyb · Member · Mar 12, 2013 at 10:07 pm

  • Copy link

  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.

• 

  emecu · Member · Mar 12, 2013 at 10:13 pm

  • Copy link

  siobhyb, yes, that’s the one!

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

• 

  siobhyb · Member · Mar 12, 2013 at 10:21 pm

  • Copy link

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

• 

  emecu · Member · Mar 12, 2013 at 10:33 pm

  • Copy link

  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…

• 

  siobhyb · Member · Mar 12, 2013 at 10:51 pm

  • Copy link

  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

• 

  emecu · Member · Mar 12, 2013 at 10:56 pm

  • Copy link

  Thanks for your interest so far. I appreciate it.

• 

  designsimply · Member · Mar 19, 2013 at 9:52 pm

  • Copy link

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

• 

  emecu · Member · Apr 8, 2013 at 2:11 am

  • Copy link

  Thank you very much!