CSS for font color on image caption text and widget image text.

• 

  sydesiderataclassic · Member · Jun 27, 2013 at 5:36 pm

  • Copy link
  • Add topic to favorites

  Hello,

  Looking for help in changing the font color across the whole site for the following:

  1) Image captions – the text always reverts to grey not purple.
  2) On the two image widgets on home page – the text is grey not purple.

  Would the selectors for the 1) captions be:

  1)
  .wp-caption-text {
  color: #6F375C
  }

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

• 

  timethief · Member · Jun 27, 2013 at 6:02 pm

  • Copy link

  I’m using Firefox 22 and the color of the font in image captions for me is purple. It does not change when hovering and does not change when clicked. If you can take honest feedback then I liked the previous font color and do not like this purple at all.

• 

  justpi · Member · Jun 27, 2013 at 7:28 pm

  • Copy link

  Yes, normally you’d change the color of the captions that way (only you’re missing the semicolon after the hex number). You’re seeing a different shade of purple because you’ve added span tags in the captions themselves:
  <span style="color:#6f375c;">CAPTION HERE</span>

  So, to change the color of the captions as well as the widget titles, remove the span tags from the captions and this in the CSS editor:

  .wp-caption-text, .widget-title {
  color: #6F375C;
  }

• 

  sydesiderataclassic · Member · Jun 27, 2013 at 8:10 pm

  • Copy link

  Super thank you – removed the old span tags and popped the code in. The color for the widget text has changed but not the image caption text.

  Because I have added widgets at the bottom of the page I now have another line that is grey and not blue to match. I tried:

  footer.entry-meta {
  border-color: #a9d2cc;
  }

  But that didn’t work either :S

  Thank you TimeThief for your honesty – it is not my personal website but a friends so it is not up to me to change :)

• 

  justpi · Member · Jun 27, 2013 at 10:53 pm

  • Copy link

  Then turn the above to this:

  .widget-title {
  color: #6F375C;
  }
  .wp-caption-text {
  color: #6F375C !important;
  }

• 

  justpi · Member · Jun 27, 2013 at 10:56 pm

  • Copy link

  As for the line, add this:

  .template-front-page .widget-area {
      border-top: 1px solid #a9d2cc;
  }

• 

  sydesiderataclassic · Member · Jun 27, 2013 at 11:04 pm

  • Copy link

  Awesome thanks justpi – that worked perfectly for both!