Need help? Check out our Support site, then


Unable to override original link hover color in CSS

  1. Dear support forums,

    I am new to WordPress and just barely skimming along with learning CSS. My blog is at http://www.songofthecedars.com and the theme is Customized Twenty Twelve.

    For ease of seeing what I'm doing while editing, I've changed all my custom CSS tags to display links as gaudy purple and then bright green upon hover. I've been troubleshooting through the div names figuring out how to change each link on the page, but have run into the following problems, all of which should be obvious when looking at the blog:

    1. The title, "Song of the Cedars" appears as purple but then becomes WordPress blue upon hover.

    2. The two links in the body of my test post ("this is a link" and "so is this") display the bright green upon hover, but when active appear grey when they should be purple.

    3. Down at the bottom of the page where the theme is listed, the links appear purple but, as with the title, are WordPress blue upon hover.

    4. In the widgets menu, I have some external links which are both displaying and hovering as grey. I am, however, somewhat confident that I've at least tagged the correct div for them as I'm able to remove the underline from the links by setting "text-decoration: none".

    My post title and "leave a reply" links are displaying properly, purple link with bright green on hover.

    I am *assuming* that my issue here is that there is an overriding div category to the ones I am using, and I need to be setting my colors in that?

    I thank you in advance for any advice, I'm hoping that this is a relatively simple issue since there is nothing overly complicated about what I'm doing and I haven't changed very much.

    The blog I need help with is songofthecedars.com.

  2. I've just noticed that the date at the bottom of each entry, as in "This entry was posted in Uncategorized on June 4, 2013" is also displaying as grey, though hovering in bright green.

  3. The post title now no longer displays as purple, but wordpress blue. It is still hovering as bright green. The only thing I changed was to leave a test comment. How frustrating.

  4. Some of the selectors you've used aren't correct. Remove these:

    .site-title a:hover {
        color: #66ff99;
        text-decoration: none;
    }
    .entry-header a:link {
        color: #660077;
        text-decoration: none;
    }
    .widget-area a:hover {
        color: #66FF99;
        text-decoration: none;
    }
    .site-info a:hover {
        color: #66ff99;
        text-decoration: none;
    }

    And add these:

    .site-header h1 a:hover, .widget-area .widget a:hover,  footer[role="contentinfo"] a:hover {
        color: #66ff99;
    }
    a, a:visited, .entry-content a:visited,
    .comment-content a:visited, .widget-area .widget a:visited {
        color: #660077;
    }
  5. PS In the future make sure you post CSS questions in the CSS forum, not the Support forum.

  6. Thank you, this has been very helpful although I am still somewhat lost. Is it appropriate to continue using this thread for questions, or should I start a new one in the CSS forum?

    In case it's the former, here's what I'm still stumbling over:

    Links to post category, date, and replies are still hovering blue. I don't know what the reply link is under, but the post category and date should be under .entry-meta (right?) so somehow my own a:hover command is being overridden?

    Thanks again.

  7. Ah, one more:

    The linked names of authors in the comments? What command do I need to change the style and color for those?

  8. You're welcome.

    I've tagged this thread so that a moderator will move it to the CSS forum, so it's ok to continue here as long as the questions are related to the title of the thread. For a different question, start a new thread.

    "Links to post category, date, and replies"
    The selectors are:
    .comments-link a
    .entry-meta a

    "The linked names of authors in the comments"
    .comments-area article header a
    .comments-area article header cite a

    You use the same selectors plus :visited for the visited links, and the same selectors plus :hover for the hover color.

    You might also need these, for the reply link and the edit link in the comment section:
    a.comment-reply-link
    a.comment-edit-link

    As well as this, if you wish to change the tab next to the comment author link:
    .bypostauthor cite span

    You'll be able to answer such questions yourself if you learn to use Firebug in Firefox or another similar developer extension.

    In case you want to set literally all the links to the same colors, you could stop adding selectors for this and that and that, delete all the relevant CSS you have added, and add these instead:

    a, a:visited {
        color: #123456 !important;
    }
    a:hover {
            color: #654321 !important;
    }

    Replace 123456 and 654321with the hexes or the colors you prefer.

  9. Does not appear to be working. I already had a hover set for .entry-meta but it continues to be blue. Ditto with .comments-link; that one seems to only respond very selectively to the text-decoration command under "a". In addition it seems that all my a:visited commands have been overridden somehow in both the entries and the widget sidebar, as they now display as grey when they should be the same color as unvisited links (light green).

    I have a limited understanding of CSS but it certainly seems like in some places my commands work fine as they've been written and then in others it's as if they weren't even there.

    Also,

    "a.comment-reply-link
    a.comment-edit-link"

    Is this correct? With the "a." in front of the selector?

  10. A summing up of the two most pressing issues:

    a:hover is not being applied to .entry-meta nor .comment-links

    a: visited is not being applied to .entry-content nor .widget-area and .widget

    In both cases I have been able to correctly apply them in other areas of the page, so I cannot see where the code is wrong.

  11. Alright, was able to fix the first issue by undoing all color preferences in the custom editor. The link for comments under the post title is no longer hovering light blue, but it is displaying as dark blue and hovering black, which makes me think it's somehow connected to .site-header since that's the only thing I have set to hovering black? The same thing is also happening with the link to reply to a specific comment.

    I still cannot get the a:visited command to work in the entries or sidebar.

    Maddeningly, the Edit comment link is displaying as the proper green, but is hovering light blue.

    I have deleted my cache several times as I work on this to make sure that everything is up-to-date. I am extremely thankful for your help and feel like this is almost done if I can just narrow down what's causing these last few pesky issues. For reference, here is the entirety of my custom CSS:

    .site-header h1 a, a:visited, a:hover {<br /> color: #000000;<br /> text-decoration: none;<br /> }</p> <p>/* This part controls the link colors in the entries and comments */<br /> a, a:visited, .entry-content a, a:visited,<br /> .comment-content a, a:visited, .comment-links a, a:visited, .comment-reply-link a, a:visited, .comment-edit-link a, a:visited, footer[role="contentinfo"] a:hover, .entry-meta a:hover {<br /> color: #009944;<br /> text-decoration: none;<br /> }</p> <p>.entry-content a:hover, .comment-content a:hover .comment-links a:hover .comment-reply-link a:hover, .comment-edit-link a:hover, footer[role="contentinfo"] a, a:visited, .entry-meta a, a:visited {<br /> color: #005522;<br /> text-decoration: none;<br /> }</p> <p>/* This part controls the link color in the sidebar */<br /> .widget-area .widget a, a:visited, a:active {<br /> color: #00AA22;<br /> text-decoration: none;<br /> }</p> <p>.widget-area .widget a:hover {<br /> color: #005522;<br /> text-decoration: none;<br /> }

  12. Was able to fix the "replies" link under post title, though I can't say for sure how. Both it and the post title are still hovering black, which I am fine with if it means I can just leave it alone, now.

    a:visited commands are still not registering, and this is the biggest issue remaining.

    comment edit links are still hovering light blue, which confuses me since all other light blue hovers were fixed when I undid the color palette in the custom control panel. comment reply links are still displaying dark blue and hovering black, so I assume I do not have the correct selector for them.

    links posted in comments do not hover at all which is totally fine by me since at least they are displaying as green. I only mention it because it seems odd that they aren't getting a hover command from somewhere, and that whenever I fool with the .comment-content selector it only messes with the Edit comment link (which, again, is hovering blue and therefore also only selectively accepting my commands).

  13. You had several mistakes in your CSS, but now you've got only one misunderstanding (several times). And I was going to say we can't go on like this (me making suggestions, you applying some of them, changing other things in the meantime, me having to inspect each element of your page to see what you've done and if it's correct, and so on) but fortunately you changed this by pasting your entire custom CSS here: good move!

    By the way, don't use code tags, because they produce those wrong br and p tags instead of creating line and paragraph breaks. Code tags are used to display computer code, not HTML or CSS. To display code correctly in these forums, enclose it in backticks (see the note on allowed markup).

    So: your misunderstanding has to do with selectors and commas. The commas signify independent selectors. For example, you've written this:

    .site-header h1 a, a:visited, a:hover {
    color: #000000;
    text-decoration: none;
    }

    This doesn't mean make the blog title black when unvisited, when visited and on mouseover, it means make the title black when unvisited, and make generic links black when visited & on mouseover. As I pointed out in my previous reply, to change the visited color or the hover color of an element you need the selector of that element plus :visited or :hover next to it (notice the CSS I suggested in my first reply). And since you've got the same misunderstanding in the rest of your CSS, your rules a) don't change what you want to change, b) they specify three or four conflicting colors for generic links.
    In other words, the selectors in the example I pasted above should be:
    .site-header h1 a, .site-header h1 a:visited, .site-header h1 a:hover
    Same thing for the rest of the selectors. This
    .entry-content a, a:visited
    should become
    .entry-content a, .entry-content a:visited
    etc etc.

  14. You, sir or madame, are a golden god.

    Hopefully my last question: I'm still confused about .comment-reply-link and .comment-edit-link

    You said that I should write it as "a.comment-reply-link" whereas everything else has looked something like ".entry-meta a". So in this case, how would I set visited and hover commands for those selectors? For instance, let's say I wanted comment reply links to remain black all the time, would I write the code like,

    a.comment-reply-link, .comment-reply-link a:visited, .comment-reply-link a:hover {
    color: #000000;
    }

    ...or does there need to be an "a" in front of each ".comment-reply-link"? And if that's the case, then how to specify visited and hover?

    Thanks again, there's nearly a light at the end of the tunnel and I will have to find a way to buy you several drinks.

  15. You're welcome!

    As I said/showed, you use the exact same selector plus the addition, no matter what the selector looks like (no matter if it's one word or more, no matter if it has punctuation marks and spaces or not, no matter if it looks like others or not). What you have confused is that the addition for, say, the hover isn't a:hover, it's just :hover. If the selector for an element is
    #what-the-f-is .this
    the selector for the same element on mouseover is
    #what-the-f-is .this:hover
    Therefore:
    a.comment-reply-link
    a.comment-reply-link:visited
    a.comment-reply-link:hover

  16. Wonderful, this clears up A LOT!

    If you can stomach me for a couple more questions, I was wondering which selector is controlling the color of links left in comments? Is it .comment-content or .comment-link? What is the difference between the two, anyway? It seems like the former should control links in comments and the latter is redundant with a.comment-reply-link?

    Additionally, you had mentioned .bypostauthor cite span to "change the tab next to the comment author link" but I see no such tab? I tried using that line to change the color in which the comment author's names show up, but it didn't seem to have any effect when used like:

    .bypostauthor cite span a, .bypostauthor cite span a:visited, etc.

    If this isn't the selector that changes the link color on comment author's names, do you know which is?

  17. Well, I don't literally "know" the selectors, I find them. So, before answering your questions, couple of questions to you:
    a) What browser are you using?
    b) How did you find the selectors you found before starting asking here?

  18. I'm in Chrome 27

    Before going into this I only knew a bare minimum of CSS from HTML coding years ago, so I thought I was going to get away with just a, a:visited, and a:hover. When that didn't work I spent some time Googling trying to figure out how to customize WordPress and I kinda cannibalized the other terms such as .entry-content from reading other people's posts and just experimented with them until I found ones that fit. So it's entirely possible there are some useless ones in there (for instance I am using both .widget and .widget-area without any real understanding of which does what, just that it looks like what I need it to now). When I couldn't get any further on my own I came here.

    Theme is Twenty Twelve and I've been looking around a bit for a readymade list of every selector in it because that seems like something that should be available, but no luck so far.

  19. Of course there is "a readymade list of every selector": the stylesheet of every theme is readily available. Read this post of mine please:
    http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/

    Now, consulting the original stylesheet of the theme will be useful, but the best thing to do is learn to use a developer extension, so you can examine the actual pages of your blog, see the selector for each element and the rules that are applied to it, and even try out changes. I don't use Chrome so I'm not sure about it: I think it includes Development Tools. If it doesn't, you can add it. Or you can add Firebug lite.

    Now, your questions:

    .comment-content a
    = links in the main text of comments

    a.comment-reply-link
    = the "Reply" link that shows below a comment if you have enabled nested comments

    .comments-link a
    = the link that shows on the main posts page ("Leave a reply", "1 Reply", "2 Replies" etc)

    (If you're wondering why "a" after or "a" before: ".whatever" specifies a class of similar elements; so "a.whatever" means any link that's specified as whatever, but ".whatever a" means unspecified links inside any section that's specified as whatever. Clear or confusing?)

    .comment-link
    doesn't exist in the CSS of 2012

    .bypostauthor cite span a
    = a tab next to the comment author's name; marks that this commenter is the author of the post.
    I think it's visible to visitors only. Check the theme demo:
    http://twentytwelvedemo.wordpress.com/2011/07/07/fall-in-luxembourg/

    "the selector that changes the link color on comment author's names":
    .comments-area article header cite a

    (Since you like clearing things up, let the pedant in me note that your phrase isn't really correct. As you certainly understand, what changes things is the rules inside the brackets, not the selector!)

  20. This is great, you've been a huge help! I was able to find the Twenty Twelve CSS here: http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-content/themes/twentytwelve/style.css.source.html and have been going through it trying different things. You're right, .comment-link was actually .commentS-link and I cleared a few other things up along the way. The "a" after VS. "a" before thing is clear in your explanation but remains confusing insofar as it's still part of the larger CSS ecosystem ;)

    The only one I'm still being tripped up by is .bypostauthor, as there doesn't seem to be a ".bypostauthor cite span a" in the CSS, only three instances of ".bypostauthor cite span" and a couple ".bypostauthor cite b".

    None of them, as far as I've been able to discern, are capable of changing the color of the "post author" text on the tab next to comments. At least, not with a "color:" command.

  21. You're right: the tab is not a link, so there's no "a". In my June 8 reply I gave the correct selector, you added the "a" in the post that starts with "Wonderful, this clears up A LOT!", and then I copied it from that post without thinking about it.
    Here are the complete controls of that stupid tab (personally I would remove it instead of giving it any attention):

    .comments-area .bypostauthor cite span {
        background-color: rgba(230, 230, 230, 0.1);
        background-image: -moz-linear-gradient(center top , rgba(244, 244, 244, 0.8), rgba(230, 230, 230, 0.8));
        background-repeat: repeat-x;
        border: 1px solid #1F6F93;
        border-radius: 2px 2px 2px 2px;
        box-shadow: none;
        color: #1A5F7E;
        font-size: 0.714286rem;
        font-weight: normal;
        line-height: 1.42857;
        margin-left: 0.357143rem;
        padding: 0.142857rem 0.357143rem;
    }

    And careful with stylesheets you find elsewhere. The one you found is ok, but often it might not be the wordpress.COM version of the theme. Better use WP's own:
    https://wpcom-themes.svn.automattic.com/
    https://wpcom-themes.svn.automattic.com/twentytwelve/style.css

  22. This is great. I found that there is a developer tool built right into Chrome that I think has the same functionality as the Firebug program you mentioned.

    The other major piece of the puzzle I was missing was figuring out that a:hover can only come after a and a:visited have been set. That was making some things behave strangely.

    Thanks to you I've got everything sorted :)

    Now I just need to save all these customizations in a text file somewhere before I lose them in an update or something.

Topic Closed

This topic has been closed to new replies.

About this Topic