How do I remove the underline in a link?

  • 1
  • 3
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
Photo of Research & Strategic Partnerships RSP030

Posted 6 years ago

  • 1
  • 3
Photo of Katie Lewis

Katie Lewis, Official Rep

  • 3414 Posts
  • 309 Reply Likes
Official Response
Hi! You can accomplish what you're wanting using a little HTML wizardry. Here are the steps:
  1. Highlight the word or words you want to link, such as "Read more."
  2. Click the link icon in the toolbar and create the link as normal. It will at first be underlined.
  3. Click on the HTML button in the toolbar (it looks like this: </>) to pull up the code behind the text box. The link you created with look something like this:<a rel="Read more" href="the URL here">Read more</a>
  4. You will want to add a bit of text to force the link to not underline. Make it look like this:<a style="text-decoration: none;" rel="Read more" href="the URL here">Read more</a>
  5. Click the Save button in the HTML pop-up after doing so.
  6. Now highlight the words "Read more" again and choose a font color from the toolbar, if you'd like to select a different color than the default.
If you need help along the way, let me know!
Photo of FestiGals, Inc.

FestiGals, Inc.

  • 1 Post
  • 0 Reply Likes
This is extremely frustrating. When I insert links into the copy, not once does the html code look like what you describe in your post. Rather, it looks like this:

<p style=""><a href="http://basenola.org/"; style="font-weight: inherit; width: 113px; height: 169px;" data-type="url"><span class="e2ma-style" style="color: rgb(225, 34, 127)">Diane Lyons speaking at the 4th Annual Women's Empowerment Conference.</span></a></p><p style=""><a href="http://basenola.org/"; style="font-weight: inherit;" data-type="url"><span class="e2ma-style" style="color: rgb(225, 34, 127)">Friday, October 2&nbsp;</span></a></p>

I've repeatedly tried adding in the additional text/code you recommended, but either it does not work, or I have to figure out where exactly to put it because it seems to work differently for different copy.

We're trying Emma for right now and quickly discovering it's definitely not as user friendly or has as robust an editing system as others we're also trying. Very disappointed...
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
This reply was created from a merged topic originally titled
Creating links with no underline.


I don't like having the underline in my links, I'd rather show the links in other ways, for example changing the hover color, etc.  Is there any way I can do this in the drag and drop editor?  At the very least could I just remove that ugly underline from my links?  I don't have the ability to unclick the underline button in the test editor on my links.

In the editor before sending the test...


This is how it ends up looking after I send the test, which is just...well ugly.


Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Awesome thanks!
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
That worked perfectly!!!
Photo of Katie Lewis

Katie Lewis, Official Rep

  • 3414 Posts
  • 309 Reply Likes
Glad to hear it!
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
Can I add a hover color to this as well?
Photo of Katie Lewis

Katie Lewis, Official Rep

  • 3414 Posts
  • 309 Reply Likes
Hi Brandi! Would you be up for creating a new conversation to ask this? I’d like to keep this conversation about underlined links, and since I’m sure others have questions about hover colors, too, a new conversation will be easier for them to find the question and answer. :)
Photo of Brandi Leath

Brandi Leath

  • 531 Posts
  • 67 Reply Likes
sure
Photo of Event Fabrics

Event Fabrics

  • 14 Posts
  • 5 Reply Likes
I add color text and the underline to links.  However, in testing this, some people get the mail as i intended (with colored text and underline);  others, however, get the colored text (orange), with the typical blue underline....truly ugly.   Why does this happen?  is it something i can control?
Photo of Laura Dickerson

Laura Dickerson, Official Rep

  • 778 Posts
  • 64 Reply Likes
Hey there,
The link color could be impacted by a number of things -- styling in the template, styling in that block, styling in the link tag, etc. Which mailing did you have the issue with? I can take a peek and try to figure it out. 
Photo of Atterro

Atterro

  • 10 Posts
  • 0 Reply Likes
I'm having this same issue, removing an automatic underline to an email address listed. The "text-decoration: none' is listed, but I'm still seeing a bold, bright underlined blue color in my test. I prefer it to be not underlined, italicized and a specific color. Can anyone help give suggestions?

My code is here:

<span class="e2ma-style" style="font-family: Tahoma, Geneva, Verdana, Arial, sans-serif; font-size: 18px; color: rgb(153, 172, 195);"><em>digitalpeoplemktg@digitalpeople.net</em></span></p><p style="text-align: left"><em><span class="e2ma-style" style="font-family: Tahoma, Geneva, Verdana, Arial, sans-serif"><span class="e2ma-style" style="text-decoration: none"><span class="e2ma-style" style="color: rgb(153, 172, 195)"> </span></span></span></em></p>
Photo of Paul Zimmerman-Clayton

Paul Zimmerman-Clayton, Official Rep

  • 400 Posts
  • 34 Reply Likes
Hey there, thanks for that code! I see where you added the style="text-decoration: none" and you have the right idea, but in this case, there's already some inline styling for the email address. You'll want to add the text-decoration: none; to the existing styling. In your first line of code, use this: 

style="text-decoration: none; font-family: Tahoma, Geneva, Verdana, Arial, sans-serif; font-size: 18px; color: rgb(153, 172, 195);"

Also, consider that this email address doesn't appear to be a link (it would have an <a mailto: somewhere in there if it were). It's possible that your email client is linking that email address automatically and adding an underline. 

See if the style change removes the underline. If not, let me know the name of the campaign you're working on, and I'll take a look!
Photo of Erin RM Coco

Erin RM Coco

  • 3 Posts
  • 0 Reply Likes
I am having the same issues. I've gotten it to work in other places just not this time. Can you explain what I'm doing wrong that it's not removing the underline? (thank you in advance!) Here is my code:

<p style="text-decoration: none; text-align: center"><span style="text-decoration: none; font-size: 16px; color: rgb(255, 255, 255)"><a data-name="FABRIC" data-type="url" href="https://rmcoco.com/product-filter.php?types=Fabric"; style="font-weight: inherit; color: rgb(255, 255, 255)">FABRIC</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a data-name="LINING" data-type="url" href="https://rmcoco.com/lining/"; style="font-weight: inherit; color: rgb(255, 255, 255)">LINING</a>&nbsp; &nbsp;| &nbsp;&nbsp;<a data-name="TRIM" data-type="url" href="https://rmcoco.com/product-filter.php?types=Trim"; style="font-weight: inherit; color: rgb(255, 255, 255)">TRIM</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a data-name="HARDWARE" data-type="url" href="https://rmcoco.com/hardware/"; style="font-weight: inherit; color: rgb(255, 255, 255)">HARDWARE</a>&nbsp; &nbsp;| &nbsp;&nbsp;<a data-name="WORKROOM" data-type="url" href="https://rmcoco.com/custom/"; style="font-weight: inherit; color: rgb(255, 255, 255)">WORKROOM</a></span></p>
Photo of Grey Stepp

Grey Stepp, Support Team Manager

  • 1700 Posts
  • 135 Reply Likes
Hey there Erin, 

I believe what you're looking at there is that you've got the "text-decoration: none" designation in the wrong place.  You're going to want that in the < a > tags.  It would look like this:

<a data-name="FABRIC" data-type="url" href="https://rmcoco.com/product-filter.php?types=Fabric"; style="text-decoration: none; font-weight: inherit; color: rgb(255, 255, 255)">FABRIC</a>

Also, you will need to add that in for each link in your code in order to take the underline away from each of them.  

It also looks like your code is a bit cluttered.  It might be worthwhile to clean that up by taking your TEXT (not the code) and pasting that into Editpad.org, then copy and paste it from there back into your campaign.  That can help clean up some of this excess code.   You could also try using the Tx button in the text formatting toolbar.  

Let me know if you have any questions.
(Edited)
Photo of Erin RM Coco

Erin RM Coco

  • 3 Posts
  • 0 Reply Likes
Got it! Thank you so much!