How to make link/hover color uniform throughout Traction theme?

barrygcooper · Member · Apr 8, 2013 at 5:41 pm
Copy link

Add topic to favorites
How can I set the link colors (and hover link colours) in my CSS so that they are uniform throughout my site?

I’m using the Traction theme, and it seems that blog post title links are colored differently in the “Featured Articles” slider, compared to the non-featured blog posts.

I tried to do this using the “customise your blog” sidebar in the Dashboard, but couldn’t find a way. Many thanks for any help you can offer.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 8, 2013 at 5:59 pm
Copy link
See if this gets you what you want. We can then work from there if it doesn’t get you where you want to go.

Slider:
```
div.feature-main h3 a:link, div.feature-main h3 a:visited {
color: #444444;
}

div.feature-main h3 a:hover {
color: #285A86;
}
```
Recent articles:
```
#content a:link {
color: #1D2471;
}
```
barrygcooper · Member · Apr 8, 2013 at 6:57 pm
Copy link
Thanks thesacredpath for such a swift response!

I’ve added the CSS code but it doesn’t seem to have changed the appearance.

Ideally what I’d like is for all links to be navy blue, turning black when you hover the mouse over them.
thesacredpath · Member · Apr 8, 2013 at 8:27 pm
Copy link
Did you edit the color codes in the stuff I gave you after you pasted it in?

What is the blue color code you want to use? Did you want to use a solid black (#000000) or a dark grey such as #333333?
barrygcooper · Member · Apr 9, 2013 at 9:02 am
Copy link
Thanks for the help, tsp.

You’re right – I just copied and pasted without changing the hex codes. I’ve changed them now, as follows, but am still having problems:

div.feature-main h3 a:link, div.feature-main h3 a:visited {
color: #285A86;
}

div.feature-main h3 a:hover {
color: #A8A8A8;
}

#content a:link {
color: #285A86;
}

#content a:link a:hover {
color: #A8A8A8;
}

…what I’d like to achieve is for all links to behave in the same way. Links are blue, hover is grey. (That includes the links immediately under “featured articles”, which is currently staying stubbornly black, and also any sidebar links).

Grateful for your help with this!
designsimply · Member · Apr 15, 2013 at 3:35 pm
Copy link
It’s possible for a theme to have additional rules for specific links. In order to change links like that, you can right-click on the element and select the “Inspect Element” option and the CSS rules that have been applied will be on the right. You should be able to find the specific selector you need to change the element you clicked on from there.

For example, to change the color of the Featured Articles links on the right in the Traction theme, find this in your custom CSS:
```
div.feature-main h3 a:link,
div.feature-main h3 a:visited {
	color: #285A86
}
```
And add this “div.feature-sidebar ul li a strong” so that the new rule looks like this:
```
div.feature-main h3 a:link,
div.feature-main h3 a:visited,
div.feature-sidebar ul li a strong {
	color: #285A86
}
```
barrygcooper · Member · Apr 19, 2013 at 11:13 am
Copy link
Thanks so much designsimply. The “inspect element” option was something I didn’t know about.

I did manage to make the “Featured” bar at the top behave as I’d like (ie links are light blue, hover is grey).

But I’m still having trouble making the links elsewhere on the site behave the same way.

I’ve copied and pasted below my custom CSS, so you can see where I’m going wrong.

body {
font-family: “museo-1”, “museo-2”, serif;
line-height: 2.2em;
}

div.feature-main h3 a:link,
div.feature-main h3 a:visited,
div.feature-sidebar ul li a strong {
color: #285A86;
}

div.feature-main h3 a:hover,
div.feature-sidebar ul li a strong:hover
{
color: #A8A8A8;
}

h2 a:link,
h2 a:visited
{
color: #285A86;
}

h2 a:hover
{
color: #A8A8A8;
}

#content a:link {
color: #285A86;
}

#content a:link a:hover {
color: #A8A8A8;
}

#copyright {
display: none;
}

div.cats {
display: none;
}

div.tags {
display: none;
}

#pg-nav-bg {
display: none;
}

p + p {
margin-top: 1.5em;
}

ul li.widget ul.tweets li {
padding: 1px 0 10px;
}

Would be very grateful if someone could put me out of my misery :)
barrygcooper · Member · Apr 23, 2013 at 12:07 pm
Copy link
Anyone willing to ride to the rescue this St George’s Day?
designsimply · Member · Apr 23, 2013 at 2:42 pm
Copy link
I’ve copied and pasted below my custom CSS, so you can see where I’m going wrong.

You should only paste short snippets of CSS in forums if needed. CSS can be viewed through the “Inspect Element” option in a browser any time. Also, seeing the current custom CSS won’t help with determining what needs to change for links elsewhere, you may need to create new custom CSS for those links depending on which specific links you’re looking at.

But I’m still having trouble making the links elsewhere on the site behave the same way.

In this case, I would actually recommend viewing the original theme CSS file. Here is a direct link:
https://s1.wp.com/wp-content/themes/premium/traction/style.css?m=1355330217g&minify=false

Look through that CSS for any “color” properties and note the selectors. If you want to find and replace a specific color code, you can search for just that code, copy all the relevant selectors into a comma-separated list, and paste that list followed by a new color property. Here is an example to illustrate:
```
YOUR_LIST_OF_SELECTORS
     {
           color: #f00;
     }
```
Replace #f00 with a color code of your choice.

Be careful when doing a full find and replace because there may be exceptions to colors you want to change (i.e. a specialized widget that has a dark background and needs to keep its light colored text). Sometimes it just takes a little experimentation to find which combination of selectors will work best.

This may also help when it comes to differentiating visited vs unvisited links:
http://css-tricks.com/snippets/css/link-pseudo-classes-in-order/

If you still need help, can you link to a specific example and point out the link text of a link you’re still having trouble with and mention what you found when you used the “Inspect Element” option on it?
barrygcooper · Member · Apr 23, 2013 at 3:13 pm
Copy link
Thanks for taking the time to help, designsimply.

An example of the link text I’m having trouble with is here:

http://www.barrycooper.com

If you look at the heading “No Pain Was Spared Him. No Blessing Will Be Denied You”, you’ll see it’s blue, with no hover color. Compare this to the behaviour of the Featured Article links above, and you’ll see how I’d like it to behave.

When I do “inspect element”, this is the code that is highlighted:

No Pain Was Spared Him. No Blessing Will Be Denied You.

Grateful for your help.
thesacredpath · Member · Apr 23, 2013 at 5:57 pm
Copy link
Add this. I’ve used the same grey hover color you have on the featured slider titles.
```
#content .title a:hover {
color: #a8a8a8;
}
```
barrygcooper · Member · Apr 23, 2013 at 6:13 pm
Copy link
Thank you thesacredpath! That’s exactly it.

I’m trying to learn how to do this myself, but am not quite there yet. For example, I’d like to apply the same grey hover to the “Read More” links.

1. I ctrl-click, inspect elements. It tells me the “Read More” is connected to “a class=”more-link””.

2. So I insert CSS that says:

#content a.more-link a:hover {
color: #a8a8a8;
}

…but it doesn’t work. Any ideas which wrong steps I’m taking? Very grateful for your help and patience here.
thesacredpath · Member · Apr 23, 2013 at 6:42 pm
Copy link
With more and more of the CSS3 capabilities being opened up to us, we are getting more and more tools to make our sites look the way we want them. The downside, if one wants to think of it that way, is that the CSS becomes more complex and sometimes harder to figure out exactly what you need to change. In this case, compare my code below with yours. I went to a more specific class (.entry) and note where I put the “hover”. I also had to use the !important qualifier. I typically try and stay away from using that, but couldn’t see a way around it in this case.
```
.entry a:hover.more-link {
color: #a8a8a8 !important;
}
```
thesacredpath · Member · Apr 23, 2013 at 6:43 pm
Copy link
Keep working at it, your site looks very good. CSS is a lot of fun and it just takes some time working with it. I’ve been doing quite a lot of it now for several years, and I still learn something new everyday.

No items found.