WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change Text Color of Links in Widget (7 posts)

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

    Thanks for your help!

  2. Josh (WP Edit)
    Member
    Posted 1 year ago #

    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.

  3. LimeCanvas
    Member
    Posted 1 year ago #

    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.

  4. rcmorris11
    Member
    Posted 1 year ago #

    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

  5. rcmorris11
    Member
    Posted 1 year ago #

    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!

  6. Josh (WP Edit)
    Member
    Posted 1 year ago #

    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 ;)

  7. rcmorris11
    Member
    Posted 1 year ago #

    awesome thanks so much!

Topic Closed

This topic has been closed to new replies.

About this Topic