formatting font-weight of links in my sidebar
-
I want all the links in my sidebar to be formatted the same way, and have managed to do that, but I have one pesky one that doesn’t want to submit! Its the link for the Follow Me Twitter button in my sidebar. It will do everything but font-weight: bold, although the other Follow Me links have changed to a bold font. Here is the code I’ve used which has worked on the other links:
.text-3 a:link {
color:#663366;
text-decoration:none;
font-weight:bold;
}.text-3 a:hover {
color:#663366;
text-decoration:underline;
font-weight:bold;
}Any ideas?
The blog I need help with is: (visible only to logged in users)
-
When I look at http://cup-let.com/, all the links have the same style.
Have you managed to solve your problem? If that still doesn’t look good on your side, you might want to clean your browser cache, that could help.
-
I’ve just cleared the cache, but it still shows that the link I described is not in bold text. Also, it looks like all the links in the sidebar are a darker shade of purple than the link I’m having a problem with. The colour of the rss links seem to be the same – not as dark as the links in my twitter stream and the links for my Instagram and yfrog follow buttons. Perhaps its just my eyes? But they definitely don’t appear to be the same colour to me.
Any ideas ?
-
Your twitter links are bold, that’s sure.
However, the color differences you see are probably due to the difference between visited links and non-visited links. To solve that issue, and if you want to have all your links from the same color, you have to declare a color for a:visited too.
Try adding this to your stylesheet:
.widget_recent_comments li a, .widget_twitter a {
color: #663366 !important;
}
a:link, a:visited {
color: #663366;
}Let me know if that helps!
-
You’re targeting very specific links with your examples above, e.g. the text widget with id=3. If you want to change the color of all links, it might be better to step back and try setting them all at the same time. When I’m looking for how to do that, I open up the original CSS (and you’ll want to check the purple.css one for Bueno too in this case) and look around just to get an idea of what’s going on if I can. Keep in mind that part of CSS is that it’s cascading… that means that the order matters and whatever is loaded last should be the final rule used. What I do is look around for anything like a:link or a:visited. Another thing to check is to look for “!important” at the end of any rules because that forces that rule to be used even if there are other rules added later.
In your case, the links inside the Twitter widget all looked like a darker color to me. I think that’s because of this rule from purple.css:
.widget_recent_comments li a, .widget_twitter a { color: #3B0466 !important; }To update that color, add that line to the bottom of your custom CSS and change out the color.
If you want to step back and try to target all of the other sidebar links at once in Bueno, try this:
.widget a:link, .widget a:visited, .widget a:hover { color: #636; font-weight: bold; text-decoration: none; } .widget a:hover { text-decoration: underline; }See how I set the :hover style first, and then made a second rule just to override one thing? Cascading!
-
thanks to both of you for your replies! you’re really helping me tweak the final few niggling things before I go live! I’d actually had a look around the original CSS for Bueno and found the colour #3B0466 a few hours ago, so I think i’d like to set all my links to that color. So if I wanted to do that, is this the correct code:
a:link, a:visited, a:hover {
color: #3BD0466;
} -
Yes it is. And if you would like that rule to overwrite all the other color styles defined elsewhere for the other links in the document, you have to specify that the rule is !important, like so:
a:link, a:visited, a:hover {
color: #3BD0466 !important;
}Thus you will make sure that rule is the most important, as @designsimply explained in her post above.
Let us know if that worked!
-
that has worked! you guys are awesome! now to push my luck and pick your brains a little bit more… Now that all my links match in color and style, I want to make sure the rss links match too. At the moment the color matches what we’ve done with the other links, but only when I move the cursor over them – the static color doesn’t seem to be the same. This is what I originally had down for this, but I must be missing something (I’ve had a look through the original CSS for Bueno but can’t see it for looking):
.rss_links-3 a:link,a:visited {
color:#3BD0466;
text-decoration:none;
font-weight:bold;
}.rss_links-3 a:hover {
color:#3BD0466;
text-decoration:underline;
font-weight:bold;
}Also, as I have all my posts stored up ready to go out at the same time, I don’t have any archive post links in my sidebar at the moment. But once the posts have been published, I want to make sure that the links for these are set up in the same format as the other links. How would I go about sorting the code for that?
And, if you wouldn’t mind, I’d love your thoughts on which way to go with a txt document i want to put into one of my posts. I’ve got two options I’m tinkering with at the moment, both using Scribd. Option One is to embed a document i’ve uploaded to Scribd directly into my post, so that you can scroll through it on the page. TOption Two is to insert the URL for the document into the post and set it up as a link, so that the document opens in a new window when clicked. The second option is consistent with another item on the post, but perhaps the first option is more visually pleasing? I’m not sure :) I think I’m leaning towards option two, but I’d love your opinions. You can see both options in the “Code Runner” post (if you can see the “Code Runner” post that is :))
And, in general, is the website looking ok? I’m a total newbie and could do with some expert feedback before I go live (eek!) this week…
-
Here is the code making the RSS links gray right now:
.widget ul li a:link, .widget ul li a:visited { color: #666666; }So, what happened was that you changed the basic a:link and a:visited styles, but something more specific exists for those links. You could fix that by adding the selectors above to the rule you already created like this:
a:link, a:visited, a:hover, .widget ul li a:link, .widget ul li a:visited { color: #3BD0466; }[UPDATE: Noticed a typo… #3BD0466 should be #3B0466.]
-
Also, as I have all my posts stored up ready to go out at the same time, I don’t have any archive post links in my sidebar at the moment. But once the posts have been published, I want to make sure that the links for these are set up in the same format as the other links. How would I go about sorting the code for that?
To test the archives widget, you could create a sample post and change the date to something at least a month in the past.
-
There you go for the links:
.widget ul li a:link, .widget ul li a:visited {
color: #3BD0466;
}I can’t see your Code Runner post right now, but I guess I’d go for the embedded version, it is nicer for your readers.
And in general, your wbesite looks good. All it misses is some great content to go with it! ;)
-
-
Hehe. :) But the feedback stuff, that would be awesome to get more replies on.
And, if you wouldn’t mind, I’d love your thoughts on which way to go with a txt document i want to put into one of my posts.
WordPress.com doesn’t offer a way for you to upload html or txt files directly, see http://en.support.wordpress.com/accepted-filetypes/
So I would recommend using the sourcecode shortcode first if the txt is short enough, then Scribd as the 2nd choice. Personal preference on my part that I like the sourcecode shortcode better.
-
@cuplet, I would recommend clearing your browser cache and cookies and/or also testing from an alternate web browser. You can click around and click back to see if visited links look like you want. And you should also check to make sure you aren’t posting links to things that other people may not have access to (i.e. some of the code links you mentioned).
-
ok thats a lot of info to take on board! so first thing’s first. I’ve tried the following, but the rss links, the archive link and the recent posts link are still showing as grey until I hover over them, so i’m a bit confused now:
a:link, a:visited, a:hover, .widget ul li a:link, .widget ul li a:visited {
color: #3BD0466;
}I’ve tried your sourcecode shortcode suggestion – awesome tool btw! – but I think the text I want to insert is a little too long for this to look all that good. But i’ve published the post with it in, including the other two options for you both to look at, so you can see what it is i’m trying to post. I think with the size of the document, probably embedding it with a scroll bar is a better option, or pasting a link in. But again, your feedback would be much appreciated :)
-
-
Oh good grief! how did I miss that?! think it’s time to give it a break for the night :) but thanks! I’ll pick up on any thoughts you have on the txt stuff with a fresh pair of eyes tomorrow I think.
thank you both for all your help. you’ve both been awesome :D
-
-
Morning all!
Right, ok, I corrected the color typo from yesterday which now has my RSS, Recent Posts and Archives all purple rather than gray – hoorah! But now that i’ve amended the typo, my header and pagenav links are also purple, but I want these to stay gray. Oh dear. These last few OCD page tinkerings are doing my head in! Anyway, I’ve tried the following, but no success:
.site-title h1 a:link, a:visited, a:hover {
color:#666666 !important;
}#pagenav ul li a:link; a:visited; a:hover {
color:#666666 !important;
}And now i’ve noticed that my Follow me links have lost their bold font-weight. Goodness. I think I have royally messed up my CSS :( Could someone take a look at my whole CSS additions and try and help me unpick my mess and tidy it all up. I think my newbie brain is frazzled and I’m struggling right now to see how to put things right.
- The topic ‘formatting font-weight of links in my sidebar’ is closed to new replies.
WordPress.com Forums 