How do I remove UNDERLINE in wordpress link?

13 years ago

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

[ 1 ] Thanks
2 replies

{{ DiscussionBoard.errors[8920290].message }}

Logia

13 years ago

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

[ 1 ] Thanks
1 reply

{{ DiscussionBoard.errors[8920470].message }}

ezjob

13 years ago

Originally Posted by 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

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.

Thanks
1 reply

Signature

My Help Shack - Massive Amounts of Free Training & Tools

{{ DiscussionBoard.errors[8922793].message }}

Logia

13 years ago

Originally Posted by ezjob

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.

Thanks

{{ DiscussionBoard.errors[8922919].message }}

ezjob

13 years ago

Originally Posted by 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

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

You are talking about the style.css page right?

Thanks

Signature

My Help Shack - Massive Amounts of Free Training & Tools

{{ DiscussionBoard.errors[8922781].message }}

sham2

13 years ago

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;}

Thanks

{{ DiscussionBoard.errors[8922979].message }}

entrepenerd

13 years ago

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!

[ 1 ] Thanks
1 reply

Signature

FREE Video Reveals...
7 Secrets to Internet Marketing Failure
...or, how you can short circuit my mistakes and become an Internet Market Success!!

{{ DiscussionBoard.errors[8923703].message }}

ezjob

13 years ago

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

Thanks
2 replies

Signature

My Help Shack - Massive Amounts of Free Training & Tools

{{ DiscussionBoard.errors[8923824].message }}

RobinInTexas 13 years ago

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
- Thanks
Signature

Robin

...Even if you're on the right track, you'll get run over if you just set there.
{{ DiscussionBoard.errors[8924098].message }}

sf_Imtiaz

13 years ago

Originally Posted by 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

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.

[ 1 ] Thanks
2 replies

{{ DiscussionBoard.errors[8924178].message }}

ezjob 13 years ago

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,
- Thanks
Signature
My Help Shack - Massive Amounts of Free Training & Tools
{{ DiscussionBoard.errors[8924226].message }}
ezjob 13 years ago

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
- Thanks
- 1 reply
Signature
My Help Shack - Massive Amounts of Free Training & Tools
{{ DiscussionBoard.errors[8924296].message }}
- clickbump 13 years ago
  
  Originally Posted by ezjob
  
  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.
  
  [ 1 ] Thanks
  
  Signature
  
  ******** WORLD'S FASTEST WORDPRESS THEME + 99/100 PageSpeed ********
  
  *NEW* Learn ClickBump! | Get ClickBump Theme WSO | Get ClickBump SEO!
  
  Live Demos: "Perfect Silo" | Killer "Landing Page" | Mashable Skin
  Watch ClickBump Smoke Thesis/Genesis
  
  {{ DiscussionBoard.errors[8924648].message }}