Support » Theme: Adelle » Change color hyperlinks sidebar

  • Resolved Johnny81

    (@johnny81)


    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?

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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

    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.

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

    aside a {
      color: #000;
    }

    Yesss. It works.

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

    Thank you for your help, Maria.

    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 🙂

    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.

    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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change color hyperlinks sidebar’ is closed to new replies.