Avatar for Username

Cari Bantuan

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.

Pelajari Lebih Lanjut

Utas ini telah diarsipkan. Silakan membuat pertanyaan baru jika Anda membutuhkan bantuan.

How can I style links in my signature using CSS?

  • 1 balas
  • 1 memiliki masalah ini
  • 6 kunjungan
  • Balasan terakhir oleh Smokva

OldHonky
OldHonky
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.

Semua Balasan (1)

Smokva
Smokva
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 < >

Diperbarui oleh Smokva pada