Change Text Color of Links in Widget

  • Resolved rcmorris11

    (@rcmorris11)


    11 years, 11 months ago

    Hi, I have edited the CSS so that links on my page are light gray and blue on hover. However this also changed the links in my widget. I have been unable to find a way to make the widget links black and blue on hover.

    I tried editing

    .widget ul { list-style-type: none; padding: 0px;
margin: 0px; }

    by adding Color: #999; however nothing changes. There are 2 link CSS

    /* Default Links */
a, a:active, a:visited { color: #999; text-decoration: none; }
a:hover, a:focus { color: #1d9ff5; text-decoration: underline; }
/* Generic Links */
.rtp-common-link, .rtp-common-link:visited, .rtp-common-link:active, .rtp-common-link span, .rtp-common-link span:visited, .rtp-common-link span:active, .rtp-common-link a, .rtp-common-link a:visited, .rtp-common-link a:active { color: #1D33F5; }
    .rtp-common-link:hover, .rtp-common-link:focus, .rtp-common-link span:hover, .rtp-common-link span:focus, .rtp-common-link a:hover, .rtp-common-link a:focus { color: #1d9ff5; }

    I am not quite sure of the difference between Default and Generic
    website: https://www.bluemountainbelle.com
    I am working in the theme rtPanel

    Thanks for your help!

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

  • Well.. the way the link is defined in your theme doesn’t really give you a way to target it uniquely. This is why it was changed when you made the change for your main content links.

    The only defining attribute is that .widget class used in div for a widget.

    So, let’s try this in the custom css:

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

    That basically cascades down from that widget div.. and targets each <a> tag in an unordered list.

    Now, if you have an ordered list – or a link in some other type of html – it may still display the old gray.

    Hey @rcmorris11

    You can take a higher level approach and target your links in the sidebar using

    #sidebar .widget{

    }

    Some themes make use of multiple widget areas, especially footers, so have a look in your source code and find out which div container your widgets are in.

    Wil.

    Thread Starter rcmorris11

    (@rcmorris11)

    Thanks Josh that worked!

    One more question I can’t find where to edit the color of the word “comments” in the top right corner of a post. Id like it to just be black

    Thread Starter rcmorris11

    (@rcmorris11)

    Actually, is there a way I could just have the links in post or pages be gray and all the other links (widgets or comments section) stay black?

    Thanks!

    To target links only in your post content area.. you would want to use this rule:

    .post-content a {
    color: #ff0000;
}

    Obviously, I don’t think you want red… but you get the idea ??

    Thread Starter rcmorris11

    (@rcmorris11)

    awesome thanks so much!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Text Color of Links in Widget’ is closed to new replies.