Hypertext Underlining
-
All,
I am trying to format the pages such that links are underlined and a different color instead of just a different color. So, I added the following to my child theme:
a,
a:visited {
color: #1772af;
text-decoration: underline;
}
a:hover {
color: #074d7c;
text-decoration: underline;
}
That made the link underlined – that’s the good. The bad is that now the items in the menu bar are also underlined.
Any suggestions on how to get the links on a page underlined but no other links?
Thanx. Keith
Website url?
Sorry, Josh; forgot to include it (was focusing on code)
http://contemporaryengineer.com/KATCopy/
I ran the “inspect element” with Firebug, but the class ID was pretty extensive because of the nested values for the menu items. So I was confused as to which one(s) would need to be defined with a text-decoration: none element.
At least that was what I was going to try unless you have a smoother solution to underlined links on the pages only.
Thanx. Keith
Hmmm… I’m thinking it would be easiest to define a custom class, and then just call it each time you tpye a link.
So, we could add this to our CSS:
.link {
text-decoration: underline;
}Then, each time we type out a link in our content, we would make it look like this:
<a class="link" href="YOUR LINK">Here is the link</a>
It’s going to require that extra step of adding
class="link"
each time. But it definitely won’t interfere with any other area of your sites text… unless you specify it.Thanx for the reply, Josh.
How would the visited and hover be effected if defining a link class?
Being pretty novice at the coding game, would I also have to define a link:visited and link:hover class as well?
As always, I appreciate all the help from you, Ken, and Syahir.
Keith
ModOr just use descendent selectors:
#context-main a,
#context-main a:visited {
color: #1772af;
text-decoration: underline;
}
#context-main a:hover {
color: #074d7c;
text-decoration: underline;
}This will target links in just the main context area, where posts and post excerpts appear.
So where did you get
#context-main
? I haven’t seen that anywhere in my “firebugging” before.ModReally? It’s that part of the
#content
that isn’t sidebar: previous and next links, post/page content, comments.Here we go again…let’s see if it works
Thanx for the reply, guys. Like I didn’t even know about a specific tag.
Anyway, I put it into the code right below the #content sections of the child theme. It dropped the underlining off the menus (good) but also off the links on the pages (not good).
Should the code above have been “content” instead of “context”? Could that be what’s causing the issues?
BTW – I’ve loaded stuff up on the website for prepping – the new link is:
http://www.engineeryourcopy.com
Thanx for the help.
Keith
ModShould the code above have been “content” instead of “context”? Could that be what’s causing the issues?
Yes, that is correct. Now I know what Josh was asking about. Sorry for the typo. I am going off to do forty head-slaps right now.
content-main
should work.Talk about embarrassing!
- You must be logged in to reply to this topic.