How do I remove UNDERLINE in wordpress link?

by ezjob
16 replies
  • WEB DESIGN
  • |
Is there an EASY way to remove UNDERLINE in wordpress link?

Thanks,
Ez
#link #remove #underline #wordpress
  • Profile picture of the author sf_Imtiaz
    You can set the 'text-decoration' property to 'none' for the link selector in the CSS file:

    Code:
    a.class {text-decoration:none;}
    something like this: CSSDesk - SxJ76
    {{ DiscussionBoard.errors[8920290].message }}
    • Profile picture of the author Logia
      There is no easier method other than editing the CSS directly. If you want me to search the answer well of course I'd done it for you: http://bit.ly/1fLw1lL
      {{ DiscussionBoard.errors[8920470].message }}
      • Profile picture of the author ezjob
        Originally Posted by Logia View Post

        There is no easier method other than editing the CSS directly. If you want me to search the answer well of course I'd done it for you: http://bit.ly/1fLw1lL
        Thanks but I've already done this search and tried them all with no luck.

        The only thing that worked was to enter this html code at the top of each page :

        Add this to top of page using text-

        <style type="text/css">
        a {
        text-decoration: none;
        }
        </style>

        I wanted to enter something in the style.css editor so I don't have to keep adding the code.
        {{ DiscussionBoard.errors[8922793].message }}
        • Profile picture of the author Logia
          Originally Posted by ezjob View Post

          Thanks but I've already done this search and tried them all with no luck.

          The only thing that worked was to enter this html code at the top of each page :

          Add this to top of page using text-

          <style type="text/css">
          a {
          text-decoration: none;
          }
          </style>

          I wanted to enter something in the style.css editor so I don't have to keep adding the code.
          What theme is it? Is it a prebuilt theme?

          Anyway, make sure you are editing the css of the theme you are currently using, then search for text-decoration using ctrl+f. If you think there is no text-decoration there, search for a+space, a:hover, a:link, whatever you think that connects with the links. Then add your code.
          {{ DiscussionBoard.errors[8922919].message }}
    • Profile picture of the author ezjob
      Originally Posted by sf_Imtiaz View Post

      You can set the 'text-decoration' property to 'none' for the link selector in the CSS file:

      Code:
      a.class {text-decoration:none;}
      something like this: CSSDesk - SxJ76

      Thanks but I can't find the link selector in css to enter the code.

      You are talking about the style.css page right?
      {{ DiscussionBoard.errors[8922781].message }}
  • Profile picture of the author sham2
    The easiest way to remove underline from wordpress links. write this simple code in style.css file.
    a:link, a:visited{text-decoration:none;}. The under line will be remove. If you want to remove underline on mouse hover then write this code
    a:hover{text-decoration:none;}
    {{ DiscussionBoard.errors[8922979].message }}
  • Profile picture of the author entrepenerd
    I'd recommend installing the Simple Custom CSS plugin to your Wordpress site.

    Once that's installed you can add your own CSS that will get loaded after the theme's CSS files so you can override any styles set in whatever theme you are using.

    Once it's installed, do like mentioned before.

    a {
    text-decoration: none;
    }

    The issue is going to be if your theme has more specific styling rules set, you'll have to figure out what's causing the underline on the links you're having issues with and be sure to override that specific selector.

    That's where Firebug comes in handy. Use that to inspect the link you are having issues with and see what styles are set that might be setting the text-decoration property. If you find a .class on the "a" element that is using text-decoration, then just set a matching rule in your custom CSS that turns off the text-decoration.

    For example, if you find that the theme CSS is using a.underlined-link as a selector to set text-decoration: underline; then put a matching rule in your custom CSS that turns it off.

    /****** if in your theme *******/
    a.underlined-link {
    text-decoration: underline;
    }

    /****** then put this in your custom ******/
    a.underline-link {
    text-decoration: none;
    }


    Keep in mind that the more specific a rule in CSS the more likely it is to get carried forward. So, if your theme has a rule that's very specific, you'll have to be as specific or more to get your rule to take over.

    Another option is to use the !important declarative on your custom rule. I don't like to overuse this, but if you're at your wits end, it can sometimes save you.

    It looks like this:

    a {
    text-decoration: none !important;
    }

    That tells the browser to give your rule more importance than rules that don't use the !important flag.

    Hope that helps. Best of luck!
    {{ DiscussionBoard.errors[8923703].message }}
    • Profile picture of the author ezjob
      Hello and thanks to all of you.

      I'm using the Asteroid theme and it has a custom css editor built in but it's not changing the theme when I enter the codes.

      I've searched for {text-decoration:none;} and changed all of them to "none" before I asked for help here.

      There is no a.link found anywhere in the style.css editor.

      I don't know what to do. I tried the plugin Simple Custom CSS and it didn't work either.

      Thanks again,
      Ez
      {{ DiscussionBoard.errors[8923824].message }}
      • Profile picture of the author RobinInTexas
        You would probably get the right answer if you went to the theme's support page. Ron, the author, is responsive to support requests and propably can give you the answer.

        WordPress › Support ยป Asteroid
        Signature

        Robin



        ...Even if you're on the right track, you'll get run over if you just set there.
        {{ DiscussionBoard.errors[8924098].message }}
      • Profile picture of the author sf_Imtiaz
        Originally Posted by ezjob View Post

        Hello and thanks to all of you.

        I'm using the Asteroid theme and it has a custom css editor built in but it's not changing the theme when I enter the codes.

        I've searched for {text-decoration:none;} and changed all of them to "none" before I asked for help here.

        There is no a.link found anywhere in the style.css editor.

        I don't know what to do. I tried the plugin Simple Custom CSS and it didn't work either.

        Thanks again,
        Ez
        The easiest way is this:
        • Make sure the theme you are trying to edit is activated.
        • From WP dashboard, click "Editor" under "Appearance". This should open the stylesheet in wordpress theme editor.
        • Add this line at the very end of the file and click "Update File" button below the editor.
        Code:
        a {text-decoration:none !important;}
        Installing a plugin to implement just one CSS style is far from an optimal solution. It's rather a very inadequate way to do this.
        {{ DiscussionBoard.errors[8924178].message }}
        • Profile picture of the author ezjob
          My theme is activated and I did what you requested and it still did not remove the underline from my links.

          I added the code at the very bottom of the style.css page and updated it.

          No luck. sf_Imtiaz
          thanks,
          {{ DiscussionBoard.errors[8924226].message }}
        • Profile picture of the author ezjob
          Okay, I've done this and it works.

          I went to Apprearance, Edit Css, placed cursor at bottom of page at the end of the last line, and hit enter.
          added this code:
          a {text-decoration:none !important;}

          Now it's working.

          When I view my page there is no underline but when I'm editing my page there is an underline.
          Strange but it works.

          I was going to Appearance, Editor, and adding the code and it didn't work on the Stylesheet.css editor.
          I didn't know I had to add the code on the Edit Css tab under Appearance.

          My webpage isn't published yet. It is in draft. Can't post a link.

          Thanks for your help,
          Ez
          {{ DiscussionBoard.errors[8924296].message }}
          • Profile picture of the author clickbump
            Originally Posted by ezjob View Post

            Okay, I've done this and it works.
            ...
            When I view my page there is no underline but when I'm editing my page there is an underline.
            Strange but it works.
            Actually, its not that strange that it works on the live site but not in the post editor. The reason is that the editor-style.css file (assuming your theme has one) does not contain your custom css tweak.

            The editor-style.css file is a special file that theme developers can include so that the formatting of the post editor matches the content formatting on the live website. It usually contains a subset of the main theme CSS rules (those pertaining to the content area text elements like headings, blockquotes, list items, line-height, font sizes, etc...)

            If your theme DOES have an editor-style.css file, you would just need to add your custom css tweak to that file and you would get what you expect.
            Signature
            {{ DiscussionBoard.errors[8924648].message }}
  • Profile picture of the author Logia
    What is your site url? Or are you using WAMP? Because Wordpress in WAMP is so buggy.
    {{ DiscussionBoard.errors[8924103].message }}
  • Profile picture of the author sf_Imtiaz
    Can you please post the link to your website here, you can PM if you don't want to post the link publicly.
    {{ DiscussionBoard.errors[8924257].message }}
  • Profile picture of the author socialmediaandseo
    try to add at the end of style.css:

    table a { text-decoration: none; }
    {{ DiscussionBoard.errors[8929044].message }}

Trending Topics