This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

How can I style links in my signature using CSS?

  • 1 freagra
  • 1 leis an bhfadhb seo
  • 6 views
  • Freagra is déanaí ó Smokva

more options

I want to style links in my email signature using pseudo classes, I can't find a way to do this that works and Mozilla always turns them into horrible blue underlined links which don't look good with my colour scheme.

I want to style links in my email signature using pseudo classes, I can't find a way to do this that works and Mozilla always turns them into horrible blue underlined links which don't look good with my colour scheme.

All Replies (1)

more options

I've been doing a lot of sig creating/testing in the last few days so I'll see if some of my tricks will help you. First of all, complex (sometimes even not-so-complex) HTML or CSS codes will not work in email clients. It is not a website, and this is its way of telling you that. In fact, I'd go so far as to say that you should avoid HTML5 and CSS3 coding unless they existed in previous versions. Here is a good source to research accepted style elements. https://www.campaignmonitor.com/css/

Second, inline styling is a must which you probably know, but that doesn't mean that other email clients won't strip it away. You will have to do testing. And if your testing shows a particular client "converting" your link, you will have to adjust your style - possibly even duplicate it in several areas. My testing has shown G-Mail to be the most annoying when it comes to the dreaded blue-link-conversion.

Here is an example of a link that currently appears and functions properly in G-Mail, Outlook and Thunderbird.

It is clickable, no underline, and a red color:

{font}{a href="http://www.mywebsite.ca" style="color:#cc0000; font-size:11pt; font-weight:normal; text-decoration:none;"} http://www.mywebsite.ca {/font}{/a}

This is a direct paste from a code I use, so try to keep key elements in the same order while you modify the info.

I hope this helps. If not, perhaps be more specific about what you are trying achieve and what you have tried.

  • Edit* When I posted, I noticed some tags disappeared. So I have substituted { } for the < >

Athraithe ag Smokva ar