How to change the hover and visited colors for RSS widget links
-
I’ve recently updated the theme of my blog to be Twenty Ten. I’ve customized the link colors using CSS, but these changes do not extend to the links found in the sidebar RSS widget, where hovering over a link is orange and a visited link shows no difference from an unvisited one.
Is there a way to change the hover color for the RSS links? I want it to be either the burgundy or green of my other links.
Is there a way to change the color for visited RSS links? I like to scroll through all the links on the sidebar and easily identify links that I have not clicked on, but right now that’s impossible, as they’re all black. Again, I’d like these to be either burgundy or green like my other links.
The blog I need help with is: (visible only to logged in users)
-
Hi there, add the following to your custom CSS. I’ve used the colors you have set in the other rules in your custom CSS for the two link state cases.
.widget_rss a.rsswidget:hover { color: #8FA898; } .widget_rss a.rsswidget:visited { color: #7D1F40; } -
I notice in your custom CSS that the color for links and for visited are the same, if you want differentiation in those links in the content area, you will need to make those different.
You may want the following as well, which will do the same as the above for all the links in the sidebar.
.widget-area a:hover { color: #8FA898; } .widget-area a:visited { color: #7D1F40; } -
Wonderful, thank you! Those are very helpful (and thanks for using the colors already in the custom CSS). Based on your comments, I’ve differentiated between visited (now light burgundy) and unvisited (now burgundy) links. I’ve also added a rule to change the RSS links to be burgundy when unvisited (prior to this they were appearing black, which was the default for my theme). This has lead me to a few more questions.
#1: With these new changes, when I’ve visited an RSS link it changes from burgundy to light burgundy. This is great. However, I seem to have broken the hover color rule for RSS links (both visited and unvisited). Oops! The rule is still there to have the hover color be green for RSS links but it doesn’t seem to be working. I can’t seem to find the problem, can you help?
#2: Sometimes when I hover over a link in the content of a post, it will also change the title of the post as though I’m hovering over that as well. Is there a fix for this?
#3: Is there a rule that will change the mouse over color of my tags and categories to also be green, so they match everything else?
-
For #1, the code we added for the visited on the RSS overrides the hover color, and it would take another CSS rule to do a hover on a visited link.
.widget_rss a.rsswidget:visited:hover { color:#8FA898; }On #2, the following two rules in your custom CSS have some errors. You are setting a hover for hentry itself which means anytime you hover anything within the hentry, all links are changing. Remove these two rules
.hentry:hover .entry-title,.hentry:hover .entry-title a,.entry-title a:hover,.hentry:hover .entry-title a:hover,.sticky .entry-title a:hover { color:#8FA898 } .hentry:hover .entry-date,.hentry:hover .entry-date a,.entry-title a:hover,.hentry:hover .entry-date a:hover,.sticky .entry-meta a:hover { color:#8FA898 }and replace them with this and then test and see if everything is covered.
.hentry a: hover, .hentry .entry-title a:hover, .hentry .entry-meta a:hover { color:#8FA898 }For #3, this should do it for you.
.entry-utility a:hover { color: #8FA898; } .entry-utility a:visited { color: #a36d80; } -
Thanks again! These changes have led me to a few more questions…
On #1: The new code fixed the problem for RSS visited link hover colors, but the unvisited link hover color wasn’t changing. I guessed and added in this new rule and it seemed to fix that problem, so that now both visited and unvisited RSS links have a green hover color. Does this new rule make sense?
.widget_rss a.rsswidget:link:hover {
color: #8FA898;
}On #2: I did as you suggested. The date and title no longer change to a hover color when I hover over content text (that part is fixed), but now the hover color for both the title and date of a post is back to the default orange, even though the rule you suggested has the green color. I’m not sure what to add to fix this.
#3: No issues, this is great. Thanks!
-
-
I found one more area where the hover color is the default orange that I need help with. On the page for a specific post, there are links at the top to take you to the previous post or the next post. I’m fine with the grey color, but would like the hover color to be green like everything else. I’m just not sure what will reference that specific aspect in the code. I’d appreciate your help again. Thanks!
-
Here’s an example of a specific post, but it’s the same with any specific post on my blog: https://thequintessentialclothespen.com/2017/09/29/1943-mauve-print-dress/
-
Hi there, this will get the previous and next post links the same green hover color.
.nav-previous a:hover, .nav-next a:hover { color: #8FA898; } -
-
- The topic ‘How to change the hover and visited colors for RSS widget links’ is closed to new replies.
WordPress.com Forums 