Change Image Captions to sans bold font

• 

  melodysimmonsdesign · Member · Jun 6, 2015 at 6:50 am

  • Copy link
  • Add topic to favorites

  I want to change my image captions to a sans bold font – like Abril Text but bold, also slightly bigger so they are more visible. Is there is simple CSS code I can add to change them?

  Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · Jun 8, 2015 at 8:32 am

  • Copy link

  Hi there!

  Ok. You have three image caption fragments: title (Welcome-Introduction), meta information ( May 24, 2014 by ebookindiecovers ) and comments link. You can use .hide selector to group font size and weight changes as those three texts are inside a div characterized with this class.

  To adapt your font-size values, take into account current value for this “hide area” is 13px. From this, title is 1.32em -that means about 1/3 bigger than this reference- and meta information is 0.75em -that means about 1/4 smaller than this reference-. So, if you redefine .hide font-size to be 18px, for instance, relative sizes of title and meta will remain unchanged. Try it:

  .hide {
      font-size: 18px;
      font-weight: bold;
  }

  Bold parameter will not affect post title because there is another more specific selector already changing font-weight. You would need to override this more specific declaration:

  .wf-active .portfolios h2.entry-title {
      font-weight: bold;
  }

  I hope this helps. :)

• 

  melodysimmonsdesign · Member · Jun 8, 2015 at 8:40 am

  • Copy link

  Thank you. I copied and pasted the CSS coding where it says Customize and CSS in my Dashboard. It makes no difference at all to anything so I must be doing something wrong. Am I supposed to see a difference before clicking Save & Publish?

  Anyway what I want to change are the captions under images in my galleries as they are too small and hard to read, like on this page:

  http://ebookindiecovers.com/premade-ebook-covers-general-fiction/

  Only image captions in galleries – nothing else like headings etc.

• 

  staff-jeanpierreac · Staff · Jun 8, 2015 at 8:46 am

  • Copy link

  Ok, I misinterpreted your post. Sorry about that.

  In this case, you can use the following code adapting value for the font-size parameter, knowing current value is 0.75em :

  .wf-active .gallery-caption{
      font-size: 1.1em;
  }

  Is this better? :)

• 

  melodysimmonsdesign · Member · Jun 8, 2015 at 8:49 am

  • Copy link

  Thank you it’s nice! Anyway to get it bold too?

• 

  staff-jeanpierreac · Staff · Jun 8, 2015 at 8:57 am

  • Copy link

  Yes!

  .wf-active .gallery-caption{
  font-weight: bold;
  }

  Enjoy blogging!

• 

  melodysimmonsdesign · Member · Jun 8, 2015 at 8:59 am

  • Copy link

  Ah! Sooo much better now! Thx a million!!!!

• 

  staff-jeanpierreac · Staff · Jun 8, 2015 at 12:27 pm

  • Copy link

  :)
  Glad to read that! Enjoy blogging!