Change a Theme's Default Link Colors
-
Hi.
I would like to change that green/brownish color to something else. I already purchased the custom CSS but I don’t know how to do it. I noticed the CSS changed slightly than how it used to be before. Previously, the entire style sheet was visible so it was easier for me to guess where the link color is and then change it but now it’s hidden. I think I’m only allowed to type new commands.
I noticed the color I’m trying to change is put on the right side bar links and also as a hover-on text.
Can someone walk me through this please?
I would most appreciated it. Thanks.
The blog I need help with is: (visible only to logged in users)
-
I think I’ve found all the occurences of that colour in your theme’s existing CSS, so if you want to change it you can just replace the colour code (twice) in the example below:
a, a.action-link, .more-link, .dater .month, .copy table th, .entry-meta a:hover, .comment h4.comment-name a, .comment-reply-link, ul.widget-list li.widget .content a, .infinite-scroll #infinite-handle span {color: #f00;} .copy blockquote{border-left-color:#f00;}Read this article about the development tools available in most browsers and you’ll see how you can inspect your theme’s code to help you make CSS changes.
-
Hi Hallluke,
Thanks for replying. Do I copy and paste the exact thing you typed twice into the stylesheet (after changing the color)?
Also there’s something typed there already, do I delete it and paste this?
-
Update: It worked! But now only the links on the right and within the posts has changed. The hover-on text at the post title is still the old color :( Any ideas?
-
You only need to paste it in once, you just change the colour code both times it appears. If you’ve not edited the styling before the custom CSS area should be blank (I think) so maybe try removing what is already there and replacing it with what I suggested above.
It looks like there are a couple of quite similar colours used for the hover states, you can change them with the following:
.logo h1 a:hover {color: #999657;} .post-title a:hover, .attachment-title a:hover, .page-title a:hover {color: #7c7a45;} -
Ok. I will try it now.
Hopefully I’ll also figure out how to change the blog title color.
Sorry if I’m drowning you with my questions but I’m curious now how you managed to view the entire stylesheet. From the browser itself?
-
Here’s a screenshot that might help.
This is using the regular FireFox Inspect Element option when you right click somewhere on the page. I then clicked on the “Style Editor” (highlighted blue in the centre of the image). There’s a list of style sources on the left and I scrolled through these to find the default stylesheet for the theme (also highlighted blue). It was easy to find as it has the most rules!
You can also use the “Inspector” tab to view the HTML code that the theme generates for each page on your site which I find really useful.
On top of that if you click on the cursor-box icon (just to the right of where it says “Network”) you can move your mouse over parts of your site and they will show up highlighted in the inspector so you can easily find your way around.
-
Hallluke,
Thank you so much for the help. I will play around with this and see. I don’t use Firefox though. Later if I can’t figure out, I might as you to help me change the Main blog title color but I don’t wana bother you anymore at the time being, hehe.
-
Have a look at the link in my first reply, it lists some alternatives for other browsers. Here’s how to change the title colour, both normal and when mousing over:
h1.site-title a {color: #000;} h1.site-title a:hover {color:#999;} -
I went through the link you posted but it was a bit too technical hehe. I’ll read it again. Thank you again Hallluke!
- The topic ‘Change a Theme's Default Link Colors’ is closed to new replies.
WordPress.com Forums 
