Hypertext Underlining

  • KATrimels

    #2526

    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

    Josh

    #20699

    Website url?

    KATrimels

    #20700

    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

    Josh

    #20701

    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.

    KATrimels

    #20702

    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

    Mod

    Kenneth John Odle

    #20703

    Or 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.

    Josh

    #20704

    So where did you get #context-main? I haven’t seen that anywhere in my “firebugging” before.

    Mod

    Kenneth John Odle

    #20705

    Really? 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

    KATrimels

    #20706

    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

    Mod

    Kenneth John Odle

    #20707

    Should 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!

Viewing 10 posts - 1 through 10 (of 29 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!