hover and link color
-
Hi
I’m making my first attempts at CSS so sorry for very basic newbie questions. I’m trying to modify the color of my links which currently appear gray. I have two questions:1) In my dev tool pane, I have no “matched CSS” box but in the style box, I see that the color when you hover over the link is #3B83B3 and is also changeable. How do I change the color of the link itself from gray to something darker? I thought all default colors for links are blue(ish)?
2) On that same note, when I find identify the element for any link in my post area, the same color as above is crossed out, thus stays gray even when it’s hovered over. Can you tell me why that is?
my site is experimentalexpats.comthanks
The blog I need help with is: (visible only to logged in users)
-
Hi there, I see you have chosen a blue color for the links at Appearance > Customize > Colors, which is a great way to do it although not all themes offer that option. In the past, it was a general practice to make links blue, but design practices have changed over the years, and blue doesn’t always work for all designs with different colors and such. It is generally still a widely followed practice to differentiate links from standard text and to give them a different hover color so it is easy to see when you are on the link and it is clickable.
In the CSS, in some instances the designer will set a base link color using a and a:hover and then set other links, perhaps in the sidebar, to a different color using a more specific selector (example .sidebar a and .sidebar a:hover). Sometimes it just takes a bit of detective work with the web inspector to find the correct selector for the item you want to change.
And, welcome to the world of CSS! Once you have played with things a bit, I think you will enjoy getting your site just the way you want it, and please don’t hesitate to ask here in the CSS forum if you get stumped on something. That is what this forum is here for. :)
-
Hi
Thanks for the reply; I have tried for hours but can’t identify any selectors to help me here. Can you take a quick look at your browser’s editor and give me a push?
Thanks -
Hi there, I see you have chosen a blue color for the links at Appearance > Customize > Colors, which is a great way to do it although not all themes offer that option.
Hi
I’m not really understanding; I don’t see any options for other than a background color; where is the choice for the links you say I’ve chosen? -
Hi, if you go to Appearance > Customize > Colors, you will see two blue circles. If you click on the first, you will see it says that one is for “Links.” If you click on the second, that one says it is for “Link Hover”. You can change link and link hover colors there. That may, or may not change all links in your site, but it would be a good starting place that doesn’t require any CSS to change. If there are additional links that do not change, let us know and we can help with those. You can read more on setting Custom Colors here: http://en.support.wordpress.com/custom-design/custom-colors/#change-colors .
-
Hi, if you go to Appearance > Customize > Colors, you will see two blue circles. If you click on the first, you will see it says that one is for “Links.” If you click on the second, that one says it is for “Link Hover”. You can change link and link hover colors there. That may, or may not change all links in your site, but it would be a good starting place that doesn’t require any CSS to change
Hi
This seems very strange; When I change the color to dark blue for links and green for the hover, it still does absolutely nothing on my PC, still shows every link in a poorly readable light gray, even if I click the tablet or phone view.However, when I use the laptop, the links are in fact all blue, but not the blue but when I changed to a darker blue, it didn’t change to darker. The hovers do show up as my chosen color on the laptop and phone.
Could this be my OS? I am one of the few still using Vista; never got a chance to upgrade to Win 7 and will never use Win 8 (hate it).
Thanks
-
Hi, I just checked your site in Chrome, Safari and Firefox on my Mac and see the blue for the links and the green for the hover. Try clearing your browser cache and see if by chance your browser is using cached files instead of fetching the new ones.
-
The Custom Colors section does have some accessibility rules that can sometimes change colors so that there is proper contrast. What are the color codes you are wanting to use, and we can try changing things with CSS instead to bypass those rules.
-
Hi
Clearing the cache appears to have helped except for one link in a widget that remains gray (first link under top posts and pages) and I don’t really need to change it
Thanks for helping; if I could only figure out my CSS issues (see other posts on that) -
Ah, if that link is grey, then that link has been visited from your browser. There is a visited link color set. To change that so that it retains the blue color, add the following CSS.
.widget-area .widget a:visited { color: #003989; } -
-
Your browser will keep track of links you have visited and when it sees visited links are set to show a different color, it applies them. All browsers keep track of your history until you manually clear it. Sometimes clearing your browser cache will do it, but sometimes you actually have to clear the history separately.
-
Ok, thanks I guess I don’t care as long as other people see them blue and green hover
Are you able to help me re-style my comments? I kind of have it figured out but not really;
basically I’m looking to
1) decrease the line spacing between each element (text, the like button, the edit link and the reply link)- not sure if that’s margin, line spacing or something else
2) trying to add a subtle background color to the entire comment area, maybe light shade of gray or very light blue to make the comment stand out more
3) looking to perhaps put borders around comments so they stand out more; any suggestions? Others I like seem to stand out much better;
4) finally, add a color for only the name and dateI have comments on this post:
http://experimentalexpats.com/2014/10/08/hangin-with-the-hill-people-in-thailand/#commentsThanks so much !!!!
-
Those sound like great things to start learning CSS with! Here are some resources for learning how to find the correct CSS selectors:
And you can find some more CSS resources here:
http://en.support.wordpress.com/custom-design/custom-css/#css-help
Let me know when you’ve got some code worked out and I can help you debug if needed. :)
-
Those sound like great things to start learning CSS with! Here are some resources for learning how to find the correct CSS selectors:
And you can find some more CSS resources here:
http://en.support.wordpress.com/custom-design/custom-css/#css-help
Let me know when you’ve got some code worked out and I can help you debug if needed. :)
Hi and thanks for the reply
I actually figured out how to make the comments good enough with some starting help from another forum member. I’ve read every tutorial that exists including those above and although it seems simple, it’s not. I still can;t really decipher how to use the selectors that work; My next project is the menus so I will ask you again when I start
Thanks so much !!!
-
Of course! CSS and HTML can definitely be confusing when you first start. Here’s a tutorial that will walk through how HTML and CSS relate to each other, and have you working in a sandboxed environment that looks quite similar to what you see when you look at actual web code:
http://www.codecademy.com/en/skills/make-a-website/topics/html-elements/html-css-intro
Let me know what exact change you’re trying to do and what selectors you’re using, and I can help figure out why it’s not working. :)
-
sounds great; thanks
I was going to start today but the events in Ottawa compelled me to write a post and now my eyes are shot -
- The topic ‘hover and link color’ is closed to new replies.
WordPress.com Forums 