How do I change widget text color

  • I tried adding the following CSS to my child theme, but am not getting any results.

    .textwidget {
    color: #000;
    }

    I want the text on the widgets to be black instead of gray. Any help would be greatly appreciated.

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

  • Hi Kyle. The textwidget element doesn’t contain any text, pe se, so there’s nothing to style with color. You need to target the individual elements within th widget. For instance, if you had a menu in the widget, you’d style the individual items, like so:

    .textwidget ul li a {
    color: #000;
}
    Thread Starter _KyleBenson

    (@_kylebenson)

    Does that mean I need to figure out which CSS works with each individual widget?

    You need to find the specific elements within the widget that you want to change. There may be common/recurring elements in different widgets that you can target with one css statement but, without specificity, the css won’t know what it’s supposed to style. It would be like trying to change all the text on the site by applying a color to the top-level <body> element. There’s nothing to color in the <body> element so nothing changes. You could add specificity by using the wildcard “*” selector and !important rule, but that’s not something I’d recommend.

    Thread Starter _KyleBenson

    (@_kylebenson)

    My site is under construction, but I made it public hoping you may be able to help me figure this out. Here is my site – https://www.modern-romance.net/
    I was able to change the title color of the widgets (per your advice above) but not the individual text that the widget creates.

    Below is my style sheet: Is there anything else I can add to change the color? The gray fades too much and makes it hard to read.

    .nav { font-weight: bold; }
    #nav-topbar .nav li a { color:#fffff7; }
    #nav-topbar .nav li > a:hover,
    #nav-topbar .nav li:hover > a,
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-menu-ancestor > a,
    #nav-topbar .nav li.current-post-parent > a { color:#000; }

    #nav-header .nav li a { color:#fffff7; }
    #nav-header .nav li > a:hover,
    #nav-header .nav li:hover > a,
    #nav-header .nav li.current_page_item > a,
    #nav-header .nav li.current-menu-item > a,
    #nav-header .nav li.current-menu-ancestor > a,
    #nav-header .nav li.current-post-parent > a { color:#000; }

    #footer .nav li a { color:#000000; }
    #footer .nav li > a:hover,
    #footer .nav li:hover > a,
    #footer .nav li.current_page_item > a,
    #footer.nav li.current-menu-item > a,
    #footer .nav li.current-menu-ancestor > a,
    #footer .nav li.current-post-parent > a { color:#000; }

    .textwidget ul li a {
    color: #000;
    }

    .entry, .entry.excerpt p {color:#000}
    h1, h2, h3, h4, h5, h6,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #000
    }

    p.post-byline {
    color: #000;
    }

    .page-title a { color: #000; }

    .wpcf7-list-item {
    display: block;
    }

    I can’t view the site at the moment; I’m behind a firewall.

    but not the individual text that the widget creates.

    Is this one of the theme widgets? If so, which one? Or a text widget that contains some text? Images? HTML?

    Also, just a note on posting code. Please use the “code” button above the editor to enclose your code with tick marks. Easy way to do that is enter your code, then hit Enter to add a line below the code, then highlight the code text and then click the button. This makes it much easier to read and also helps keep your post out of the forum spam filter. Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I change widget text color’ is closed to new replies.