WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Change Text Color of Links in Widget

[Resolved] Change Text Color of Links in Widget

  • rcmorris11
    Member

    @rcmorris11

    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: http://www.bluemountainbelle.com
    I am working in the theme rtPanel

    Thanks for your help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Josh
    Participant

    @josh401

    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.

    Wil
    Member

    @limecanvas

    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.

    rcmorris11
    Member

    @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

    rcmorris11
    Member

    @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!

    Josh
    Participant

    @josh401

    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 😉

    rcmorris11
    Member

    @rcmorris11

    awesome thanks so much!

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