WordPress.org

Forums

Adelle
[resolved] Change color hyperlinks sidebar (8 posts)

  1. Johnny81
    Member
    Posted 8 months ago #

    Hi,

    I want to change the color of the hyperlinks in the sidebar.
    The hyperlinks in the articles must be another color.
    Default the color is pink.

    When I use:
    .article a {
    color: blue;
    }

    the color of the links in te article turn blue. Great!

    Now the sidebar.

    When I use:
    .container a {
    color: black;
    }

    the color of the links in the sidebar turn black, but the links in the articles also turn black.

    So in the end the links in the articles must be blue and the links in the sidebar must be black. How can I do that?

  2. Maria Antonietta Perna
    Member
    Posted 8 months ago #

    Hi Johnny,

    Having a link to your site would help me be more precise with my answer. However, try with this snippet of CSS code in style.css of your child theme or custom CSS editor:

    #secondary a {
    color: black;
    }

    This should affect only the links inside the sidebar. If the code doesn't work, then it means that I need a link to your page to target the HTML elements more precisely.

    I hope this helps :)
    - Maria Antonietta

  3. Johnny81
    Member
    Posted 8 months ago #

    Maria,

    Thanks for your help.
    Unfortunately this doesn't help.

    The links in the sidebar are still pink.

    The site is http://www.worldlytreasury.com

    In my CSS editor I now have:

    .article a {
    color: blue;
    }

    and

    #secondary a {
    color: black;
    }

    The links in the article are blue, but the links in the sidebar are still pink.

  4. Maria Antonietta Perna
    Member
    Posted 8 months ago #

    Yes Johnny, thanks for the link. This should change the color of the links in your sidebar:

    aside a {
      color: #000;
    }
  5. Johnny81
    Member
    Posted 8 months ago #

    Yesss. It works.

    See the result: http://www.worldlytreasury.com

    Thank you for your help, Maria.

  6. Maria Antonietta Perna
    Member
    Posted 8 months ago #

    Very glad to hear that! My suggestion would be to add a hover effect for usability purposes:

    #secondary a:hover,
    #secondary a:focus {
    color: #444;
    }

    On mouse over or keyboard focus the link color gets a bit lighter. It's good practice to add a hover effect to communicate to users that they've hit a link area.

    Very best :)

  7. Johnny81
    Member
    Posted 8 months ago #

    Maria,

    Thanks for the suggestion.
    When I use #secondary nothing happens.
    But .aside does work.

    So this is (for me) the correct code

    .aside a:hover,
    .aside a:focus {
    color: #444;
    }

    Thanks, again.

  8. Maria Antonietta Perna
    Member
    Posted 8 months ago #

    Sorry, my mistake, of course. It's just the original code I gave above but with the hover and focus pseudo selectors. I copied and pasted from the wrong post.

    I think your site looks great!

Reply

You must log in to post.

About this Theme

About this Topic