Changing the color of links

  • Unknown's avatar
    elliemae411 · Member ·

    Hello, I’m not up on CSS coding and need some help, please. I’d like to change the color of the links on my website — both before clicks, and after clicks. At the moment, it’s the same color as the posts selected by visitors on the home page. I *don’t want to change that color.

    Many thanks!
    Best regards,
    Ellen

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi Ellen, no problem. I noticed in your current theme you’ve got the ability to change colors with the customizer. So if you’d like, you can log in and pick your colors there.

    Otherwise, here’s the current CSS:

    a:active, a:focus, a:hover, button, footer.entry-meta a, input[type=button], input[type=email], input[type=password], input[type=reset], input[type=search], input[type=submit], input[type=text], input[type=url], textarea, .site-title a:hover, .main-navigation .children li:hover:before, .main-navigation .sub-menu li:hover:before, .main-navigation ul>li:hover>a, .main-navigation ul ul>li:hover>a, .menu-toggle, .menu-toggle:focus, .dropdown-toggle.toggled-on:after, .dropdown-toggle:hover:after, .dropdown-toggle:active, .dropdown-toggle:focus, .entry-content a, .entry-meta a:active, .entry-meta a:hover, .entry-title a:active, .entry-title a:hover, .bypostauthor .fn:before, .comment .comment-author a, .comment-content a, .comment .comment-reply-link, .comment .comment-reply-title a, #infinite-handle span button, .posts-navigation a, .widget_calendar table a, .widget_tag_cloud a[style], .wpcom-reblog-snapshot .reblog-post:before {
    color: #81696e;
}

    This too, though it seems to be coming from cusotmized colors: 

    a, a:visited, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=text]:focus, input[type=url]:focus, mark, textarea:focus, .entry-content a:active, .entry-content a:hover, .entry-title a, .site-title a, .site-description, .main-navigation ul>li a, .dropdown-toggle:after, .comment-content a:active, .comment-content a:hover, .widget_calendar table a:active, .widget_calendar table a:hover {
    color: #0e0007;
}

    That’s a lot! But the color is there at the end, and can be changed if the customizer option isn’t working for you. If you need color options for a different theme, let us know.

  • Unknown's avatar
    estherfricker · Member ·

    Thanks! This help me to:-)

  • Unknown's avatar
    elliemae411 · Member ·

    Thanks for the reply, Supernovia!

    Yes, customizer works for color changes, but it does not work for changing only the link- unless I’m missing something. I only want to change the link, and *not the highlighted area around the front page stories when a cursor or finger hits the post. The two colors in the customizer are the same – for the front page and for all links. I’d like separate colors.

    I see in the CSS, there color options. Where do I get those numbers/codes for the colors?

    Thanks again for your help!
    Best regards,
    Ellen

  • kokkieh · Staff ·

    Hi Ellen,

    I see in the CSS, there color options. Where do I get those numbers/codes for the colors?

    Every colour has two potential values in HTML, either using a hex code, like #000000, or a RGB code, like rgb(0, 0, 0), and for some colours you can also use the pre-defined colour name, like black. In CSS we mostly use the hex code, and the RGB code only if you want to add transparency, e.g. rgb(0, 0, 0, 0.5) is black but 50% transparent, but you can use any of the three available options.

    You can find a list of the predefined values in any HTML/CSS reference like https://www.w3schools.com/colors/colors_names.asp

    Or else you can search for a “HTML colour picker” online to get colour pickers that lets you select any colour, and copy the hex or RGB code for the colour you want.

    I like to use https://www.colorschemer.com/color-picker/, or http://paletton.com/ is a good option if you want something that gives you an entire colour scheme based on a base colour you select.

  • Unknown's avatar
    elliemae411 · Member ·

    Thanks so much, Kokkieh! This helps a lot.

  • The topic ‘Changing the color of links’ is closed to new replies.