Twenty Twelve widget area caption color

  • Resolved rpsellers

    (@rpsellers)


    10 years, 10 months ago

    Hi all:

    With my child theme of 2012, I’m trying to isolate the widget area caption to change font color and alignment. I know that I can change the font color by a change to the following (sorry, site is still on local testing server – no link):

    body {
    font-size: 14px;
    font-size: 1rem;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
    }

    That, unfortunately, also changes the text color of all posts and pages. Is there a way / place to isolate the caption of the widget area to put in my child theme’s style that can change color and alignment without changing the main body color? I tried inserting the following in the .widget-area .widget ul ul (lines 1373ff 2012 style)
    color: #1d2075 !important;
    text-align: center !important;

    No joy on that. Any ideas appreciated!

    Thanks,

    RP Sellers

Viewing 3 replies - 1 through 3 (of 3 total)

  • To target the widget captions, try, for example:

    .widget-area .widget h3 {
color: green;
}

    Leave the !important clause off your CSS properties; in most cases it is not needed and can complicate matters in the future. Most people who use it don’t understand how to properly calculate CSS specificity to override existing rules.

    Thread Starter rpsellers

    (@rpsellers)

    Thanks for the help. Worked perfectly for widget area titles but not for the caption. But it jogged my thinking – this is caption for an image inserted with image widget. Using HTML in the caption in the widget entry works fine. Makes me wonder if that widget plugin won’t accept the css for the rest of the images?

    As least a work around – and I don’t mind finding them accidentally! I’ll mark as resolved failing any other ideas.

    Thanks again,

    Ah, OK, I misunderstood when you stated captions that you meant the caption for an image. I don’t see an image widget with TwentyTwelve, is this from a gallery plugin? If your captions all have the same class, you can use that instead of the h3 element in the selector: .widget-area .widget .caption. Use a web debugging tool like Firebug or Chrome Developer Tools to examine the caption.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Twelve widget area caption color’ is closed to new replies.