Need help? Check out our Support site, then


CSS for removing underline for ALL links on blog

  1. Good day to you!

    I have been searching around for posts concerning this matter:

    I am looking for CSS code to remove all the underlining on my links (text as well as images), on all pages. I am satisfied with only changing colour of said links and feel like the underline "clutters" - especially when it shows up underneath some of my thumbnails/images.

    While I have found posts trying to explain how to code properly to remove these underlines I simply cannot grasp it, according to my Previewing of changes when I try to apply the code to my own page.

    My blog: http://felixmeijer.com/

    Any help would be greatly appreciated.

    The blog I need help with is felixmeijer.com.

  2. Try this

    #content .entry a:link, #content .entry a:visited { border-bottom: none; }

    If that doesn't work for the images, give me a link to a place where the border is showing below an image. I can't find one at this time.

  3. Thank you, thesacredpath!

    Unfortunately it did not work. Here is a link to a post containing both underlined links and images:
    http://felixmeijer.com/2010/08/20/100820-dog-days-are-over/

    (images at bottom/lower half)

  4. On the images, are you talking about the black border around them or the dashed line underneath them?

    The code I gave gets rid of the dashed line underneath the links and images - at least it does in Firefox and in Safari.

  5. Wait, are you talking about the border below when you hover your mouse over a link or image? If so, then this will correct it.

    #content .entry a:link, #content .entry a:hover, #content .entry a:visited { border-bottom: none; }

  6. The black border around them I have added myself, and would like to keep as-is. It's the dashed line underneath I'm less satisfied with, and would like to remove.

    Preferably I would like for the dashed underline (showed all the time) And the solid underline (showed when hoovering) not to show.
    For text I do not mind the hoover related underline to show, but it really messes with the layout when it appears below image thumbnails.

    I am using Firefox, but for whatever reason your suggested css does not seem to work. I'm at loss here, I should only paste the code in the Edit CSS window and be done with it, right? Or do I need to add it in a certain part to have it effect the entire page? Needless to say, I have very limited experiences with CSS, and coding in general.

    I have "Add this to the MistyLook theme's CSS stylesheet (view original stylesheet)" checked.

  7. The code above should work although I had an extra space in there.

    #content .entry a:link, #content .entry a:hover, #content .entry a:visited {border-bottom: none; }

    That will take the underlines - regular or hover out from under all links in all content. I don't know if there is a way to remove them only from the images.

    You should be able to paste the above, just as it is into your CSS and then preview and it should be gone.

  8. Eureka!

    I inserted your most recent CSS and pressed preview, but it was still there. Then I figured "what the heck, it may as well be a problem with the preview" and saved the changes, which did the trick!
    (so it's pretty safe to say your previous codes would have worked as well. "preview" was the culprit!)

    Thank you for your time and devotion, tesacredpath.

  9. Glad that worked for you and you are welcome. I've had issues with preview before as well, but had forgotten about that possibility.

  10. Just stumbled on this thread -- I too would like to remove the automatic underline on my text links. I tried both sets of code supplied by thesacredpath, and "saved" my CSS changes, but nothing changed on my blog.

    Is the code specific to a particular theme?
    When adding code to my CSS, do I need to delete all the existing code that's there? Or just add the new code to the top of the window?

    Thanks very much!

  11. The reason it didn't work for you, is that you are using a different theme, and CSS is theme specific. Each author decides on their own what they will name selectors. Change "text-decoration" from "underline" to "none" in "a" in your custom CSS as below.

    a {
    color:#0060FF;
    text-decoration:none;
    }
  12. thesacredpath ---

    A) You resolved that for me - worked first time!

    B) You cleared up a HUGE source of confusion for me: "CSS is theme specific". Yikes! That explains so much I can't even begin to describe it.......

    THANKS

  13. Scott, you are welcome.

  14. thesacredpath -

    a {color:#0060FF; text-decoration:none;}

    Works for me and I like the fact that your code is simple and to the point.

    Would you tell me how to change the color of my text links (before they are "moused-over", I understand that my text links will turn color:#0060FF when they are moused over or selected)

    Thank you so much!

    Pete

Topic Closed

This topic has been closed to new replies.

About this Topic