Support » Themes and Templates » Theme: TwentyTwelve Changing link color

  • Resolved mmdm

    (@mmdm)


    I’ve searched and found threads on this but I still can’t get it to work. I have set up a child theme. By default, links are light gray and I’d like to change them. Here is what I’ve got in my child theme’s style.css file which I copied from on of those threads.

    /*
    Theme Name:     Twenty Twelve Child
    Description:    Child theme for the Twenty Twelve theme
    Template:       twentytwelve
    
    */
    
    @import url("../twentytwelve/style.css");
    
    a:link {
    color:#000000; !important;
    }
    a:visited {
    color:#21759b; !important;
    }
    a:hover {
    color:#0f3647; !important;
    }

    My site is http://www.toadinaboat.com/
    Help, please?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Because there are some links that are set with more specific selectors. To overwrite parent’s, just copy the same set of selector and use in Child Theme stylesheet down below the @import line and it will work overwriting parent’s. There is no need to use !important.

    You could try this and change the colors to your liking. Use the same pattern though so the whole site is in one design.

    a:link { color: blue; }
    a:visited { color: orange; }
    a:hover { color: red; }
    a:active { color: red; }
    
    .widget-area .widget a { color: blue; }
    .widget-area .widget a:visited { color: orange; }
    .widget-area .widget a:hover { color: red ; }
    
    a.comment-reply-link, a.comment-edit-link { color: blue ; }
    a.comment-reply-link:hover, a.comment-edit-link:hover { color: red; }
    
    .comments-link a, .entry-meta a { color: blue ; }
    .comments-link a:hover, .entry-meta a:hover { color: red; }
    
    .comments-area article header a { color: blue; }
    .comments-area article header a:hover { color: red; }
    
    .comments-area article header cite a { color: blue; }
    .comments-area article header cite a:hover { color: red; }
    
    footer[role="contentinfo"] a { color: blue; }
    footer[role="contentinfo"] a:hover { color: red; }
    Thread Starter mmdm

    (@mmdm)

    I was really only concerned with links in posts but I pasted that code into the style.css (changed visited to a dark blue) to try it and it didn’t do anything as far as I can see. All links are still gray. I can’t even find the place in the parent theme that is setting that gray link color.

    ETA: Actually, it did change the color of links in the sidebar but not in the posts, which is where I’m really concerned with changing them. I hate trying to read gray text on a white background and would never purrposely inflict that on my readers.

    I tried Live Edit CSS via Firebug, channging link color that you have in your child theme stylesheet and it changes link color in the post area. So it could be browser cache that prevented you from seeing the changes, did you clear browser cache after ?

    Thread Starter mmdm

    (@mmdm)

    Yes, I did clear the cache. I just cleared it again and still see the gray links. Then I went and checked the site on a computer that has never been there and some of the in-post links are blue and some of them are gray! They are all just regular links and shouldn’t have any difference between them. Not sure what is going on.

    Were the links gray for you (all the way down the page?) before you changed them with Firebug, because I left the style.css there so they should still all be blue.

    @mmdm , I missed this one (I couldn’t see this in FF because I set my FF to no tracked in privacy setting.)

    .entry-content a:visited, .comment-content a:visited { color: orange; }

    So here is the whole thing with it.

    a:link { color: blue; }
    a:visited { color: orange; }
    a:hover { color: red; }
    a:active { color: red; }
    
    .entry-content a:visited,
    .comment-content a:visited { color: orange; }
    
    .widget-area .widget a { color: blue; }
    .widget-area .widget a:visited { color: orange; }
    .widget-area .widget a:hover { color: red ; }
    
    a.comment-reply-link, a.comment-edit-link { color: blue ; }
    a.comment-reply-link:hover, a.comment-edit-link:hover { color: red; }
    
    .comments-link a, .entry-meta a { color: blue ; }
    .comments-link a:hover, .entry-meta a:hover { color: red; }
    
    .comments-area article header a { color: blue; }
    .comments-area article header a:hover { color: red; }
    
    .comments-area article header cite a { color: blue; }
    .comments-area article header cite a:hover { color: red; }
    
    footer[role="contentinfo"] a { color: blue; }
    footer[role="contentinfo"] a:hover { color: red; }

    Anyway, that one missing is for visited link, so your test on a computer that never been to the site should not see link in gray.

    Thread Starter mmdm

    (@mmdm)

    Thanks, Paul. That seems to have fixed it. I don’t understand why it was gray on the other person’s computer. They don’t even know how to get to my blog so I’m sure they haven’t been to it before. I don’t have access to it today to check but it looks right on mine, now. Many thanks.

    it was gray on the other person’s computer.

    I think that person’s computer had visisted those sites linked to from your site.

    On the privacy side, maybe we can help keep user privacy by styling the visited link the same as normal link.

    Thread Starter mmdm

    (@mmdm)

    You mean so people can’t tell you visited the links? It’s my art blog and I link to other art blogs. I don’t link to anything that should embarrass anyone, unless you don’t want people to know you enjoy painting.

    Actually it’s not about content, it’s about privacy.
    https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

    My primary web browser is FF and I couldn’t recall seeing visited link (in different color) for a long time. I think it’s because I set it to no track and no keeping cache or history. I got that missing code for you by using Chrome.

    Anyway, I’m no expert on this, and this subject is beyond the scope here.

    Thread Starter mmdm

    (@mmdm)

    OK, thanks for the link and the help.

    I am trying to change the comment hover color in my 2012 child theme. I am able to change it for already posted comments i.e. ‘1 comment’ I was able to change, however the initial comment button will not. I am working on this site for a client, but would be happy to take down the coming soon page if you can help. Thank you!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Theme: TwentyTwelve Changing link color’ is closed to new replies.