Support » Themes and Templates » Link underlines in CSS

  • Resolved HeatherY

    (@heathery)


    The only links I wanted underlined were within the post text so I made all the text decorations none and added:

    .post a{
    text-decoration: underline;
    }

    This works except 3 areas I don’t want underlined that are included in the post area – titles, category names and the “Leave a comment” line. Can anyone help?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Well I’m no expert but personally I’d type:

    a.post{
    text-decoration: underline;
    }

    instead of

    .post a{
    text-decoration: underline;
    }

    But that won’t make a difference unless you have a whole with the class of “post”. Instead, just class the link. E.g. <a class="post" href="http://blah">Home</a>

    And I’m not quite understanding the last part of what you said. You DON’T want a line beneath category names etc? In that case, create another link class such as:
    a.noline{
    text-decoration: underline;
    }

    …for all the links that you don’t wany you have underlines. This would be a lot easier, in my opinion. Hope that helps you a bit.

    My site is castlefairchild.com. I’m using modified default and this is the area that will underline everything or nothing in the css ( I know hover is in it – but it’s default – not hover)

    a, h2 a:hover, h3 a:hover {
    color: #147;
    text-decoration: none;
    }

    it’s followed by this:

    a:hover {
    color: #147;
    text-decoration: underline;
    }

    This made no links underlined anywhere, which was fine except I wanted only links in the post text to underline…I searched the forums until I found

    .post a{
    text-decoration: underline;
    }

    but that underlines my post title, category at bottom of post and leave a comment line since those are technically links too.

    I’m not good at code, but I find the area and alter it – so I’m not sure how to set classes.

    OK I see now hehe. In this case I WOULD use the

    .post a{
    text-decoration: underline;
    }

    (which simply makes all links in the <div id="post"> underlined, hence your problem).

    However, to fix your problem I’d edit your index.php and single.php and class the header (you’ve obviously done this already) and the category and comment links, so that you can control their styles and get rid of the underline.

    So: <a class="noline" href="http://comments.php">Leave a comment</a>
    and <a class="noline" href="http://category.php">Categories</a>

    And in your CSS, add:

    a.noline{
    text-decoration: underline;
    }

    That SHOULD fix it.

    I understand what you mean…I’m just not sure where to add what (except the css, that I’ve got). Do I add the lines you have in both index and single?

    OK, sorry hehe. Where it has

    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

    add class="noline" after the <a

    Savvy? That takes care of the header and that should be the same for both files.

    Then for the category and commenting bizo, where you have

    <p class="postmetadata">Posted in <a href="http://castlefairchild.com/?cat=3" title="View all posts in The United States of America" rel="category tag">The United States of America</a> <strong>|</strong> <a href="http://castlefairchild.com/?comments_popup=30" onclick="wpopen(this.href); return false">Leave a Comment »</a></p>

    Do the same, adding class="noline" after the <as. There should only be 2.

    Just tested.

    .post h2 a, .postmetadata a {
    text-decoration: none;
    }

    I tested it at the bottom of the style sheet so it overwrites whatever you had defined higher up in the sheet.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Link underlines in CSS’ is closed to new replies.