How to change link color in body of the text only?

  • Resolved foulprank

    (@foulprank)


    16 years ago

    I’m looking for a quick way to change my link color in such a way that only links in posts and pages (but not in headings or anywhere else) are affected. What changes should I make in style.css?

    Underlined links made my blog look a bit messy, so I removed the underline attribute from all links (using a {text-decoration: none;}). This was an improvement but the contrast between link and non-like text could be better. The current link color is #642 which I find very appealing in headings but in the body of the text something like #9E6935 might be more better suited.

    My blog is here and I’m using the theme Natural Essence. Thanks for any help you can give!

Viewing 5 replies - 1 through 5 (of 5 total)
  • chaoskaizer

    (@chaoskaizer)

    I’m looking for a quick way to change my link color in such a way that only links in posts and pages (but not in headings or anywhere else) are affected. What changes should I make in style.css?

    Add inside style.css

    .entry a{color:#9E6935 !important; text-decoration: none}
.entry a:hover{color:#963 !important;text-decoration: underline }

    Thread Starter foulprank

    (@foulprank)

    Well, that was mighty fast. Thanks a bunch.

    I tried adding the text above to my style.css file and it didn’t change anything. Do I need to replace any text with the code above or simply insert it into the style.css file? Maybe I placed it in the wrong area? I placed it directly under
    /* Main – Content – Post */

    Any help would be much appreciated.

    That might be because it’s a visited link try using..

    .entry a:link,
.entry a:visited,
.entry a:active {color:#87552F; text-decoration: none}
.entry a:hover {color:#963;text-decoration: underline}

    Adjust as required.

    I replaced the following lines I had added under /* Main – Content – Post */ in the style.css file:

    .entry a{color:#9E6935 !important; text-decoration: none}
    .entry a:hover{color:#963 !important;text-decoration: underline }

    with the following lines:

    .entry a:link,
    .entry a:visited,
    .entry a:active {color:#87552F; text-decoration: none}
    .entry a:hover {color:#963;text-decoration: underline}

    The only adjustments I made were to change the color. The links whether visited, hovering over or not visited are still the same color as regular text. The best I can do at this point to alert a reader that this is a clickable link is to make the link text bold, but that really doesn’t stand out enough (as told to me by readers who can’t find a link I mention).

    Could I be placing the code in the wrong place?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to change link color in body of the text only?’ is closed to new replies.