HTML lien d'email de couleur dilemme
J'ai conçu un e-mail HTML et je vais avoir des questions suivantes: la Première de toute ma conception est basée sur une couleur bleue donc tout bleu, le texte ne sera pas lisible par le lecteur/utilisateur, le texte doit être blanc.
GMAIL automatiquement la couleur des numéros de téléphone et les liens en bleu mais le principal problème est que Microsoft Outlook, OWA.
De fixer le numéro de téléphone et le lien de coloriage dans GMAIL, je n'ai suivantes:
<a style="color: #FFFFFF;
text-decoration: none"
href="#/">
<span style="color: #FFFFFF;
text- decoration: none">
1800-000-0000
</span>
</a>
Cela fonctionne parfaitement pour GMAIL et chaque où d'autre, MAIS comme je l'ai mentionné, la plupart de mon client utilise Outlook ou microsoft OWA (Outlook Web Application).
OWA ignore la couleur, j'ai mis dans mon style en ligne et fait le lien bleu par défaut; cela n'arrive que lorsque l'email est prévisualisé. Si vous ouvrez l'e-mail tous les styles de coups de pied dans.
Mon dilemme est, que dois-je faire? J'ai déjà donné de l'espoir mais c'est mon dernier recours. Est-il un moyen de remplacer la couleur du lien pour Outlook, OWA? J'ai utilisé !IMPORTANT, l'étiquette de POLICE, de NIDIFICATION pour les 5 degrés.
Le Problème ici n'est pas Outlook mais OWA.
Voici une capture d'écran quand je inspecter l'élément Chrome:
Et voici FF:
Des idées?
S'il vous plaît!
- Avez-vous inspecté dans le navigateur lors de l'état où le style n'est pas appliqué? Avec Firebug ou Chrome Console, vous devez être en mesure de déterminer ce qui est primordial, le style que vous avez défini. Aussi, juste une je devine, avez-vous essayé un
<style>a:link, a:visited, a:hover { color: white; }</style>
insérer? - Où serais-je mettre ce style? Et non, je n'ai pas inspecté anyting parce que j'étais sous l'impression que, même si vous saviez que vous ne pouvez pas le contrôler.?? Pas sûr, juste une pensée. Par le moyen de ne pas les styles se dépouillés si elles ne sont pas inline?
- Si vous trouvez le style qui est remplacé, vous pourriez être en mesure de remplacer qu'avec un
!important
plus de votre style. Habituellement, je trouve que c'est une mauvaise pratique, mais ce pourrait être un cas où c'est une bonne idée. - Avez-vous déjà essayé de regarder les codes en y? J'ai donc droit o cliquez sur l'élément dans ma page et cliquez sur inspecter? Pas vraiment vu quelque chose, mais je suis sûr que quelque chose est là, le code est très long.
- Pouvez-vous copier dans tous les css que vous voyez dans le "inspecter l'élément" de Google Chrome?
- Dans Firefox/Chrome passez votre souris sur l'élément en question, cliquez-droit, et
Inspect Element
. Je préfère et de savoir mieux Firebug, de sorte que vous verrez leHTML
focus sur l'onglet, et à l'extrême droite de droite une boîte avecStyle
onglet concentré. Vous pouvez regarder les styles appliqués par élément en cliquant sur chacun d'eux dans la gaucheHTML
onglet, qui sera mise à jour de la droite. Faites défiler laStyle
onglet et vous verrez qui sont actifs et qui sont en train d'être remplacé (est barré). Plus ou moins, que vous avez à faire pour comprendre ce qui se passe, et doit apprendre à le faire de toute façon. C'est assez pratique. - Et, tu sais, c'est mieux que de deviner et de l'ajout de
!important
à tout. Remarque, il y a aussi! important
(avec un espace). - Je n'ai que ça, mais encore une fois je ne suis pas le voir tout cela semble être plus de l'écriture de la ligne de la feuille de style. J'ai ajouté une capture d'écran ci-dessus. La balise d'ancrage que j'utilise a pas de Classe, je suis en utilisant uniquement des styles en ligne.
- Vous souhaiterez peut-être modifier le lien d'arrière-plan (ou de ses environs, en arrière-plan) si sa couleur de texte ne peut pas être remplacée.
Vous devez vous connecter pour publier un commentaire.
Vous trouverez de succès, y compris la
<font>
déclaration, qui est déprécié moderne, HTML, même si certaines versions de OWA toujours respecter:Outlook Web App (OWA) associer les couleurs changent de styles en ligne.
J'ai passé quelques heures à essayer de modifier/corriger la couleur des liens dans OWA où il élimine les styles en ligne pour les modèles d'e-mail, je suis en train de créer. J'ai essayé diverses techniques avec + de tags, sans succès.
Enfin trouvé quelque chose qui semble fonctionner:
Changé:
Semble très bien jusqu'à présent.
D'autres tests. J'ai mis le légèrement de la couleur sur le
<td style="color:#FFFFF6;">
puis la bonne couleur sur la<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">
<a>
étiquette est à l'intérieur d'un autre élément avec un différentes couleur spécifiée, la<a>
couleur sera obéi (il me semble). OWA version 14.3.235.1, Firefox 41.C'est un bug connu avec Outlook que si une balise d'ancrage ne contient pas une URL valide, alors le style de l'étiquette sera ignoré.
La tendance à ajouter !important va également travailler contre vous, dans ce cas, parce que les Perspectives d'ignorer complètement les balises suffixé avec !important.
Mettre une URL dans votre balise d'ancrage, ou le texte à la ligne dans une balise span à l'intérieur de l'ancre et de mettre votre style là.
J'ai été en mesure de résoudre ce problème en mettant une table à l'intérieur de la
a
tag.Chiffres. Juste au moment où nous avons pris l'habitude de ne pas être en mesure d'utiliser la fraîcheur de la nouvelle e-mail astuces car Outlook ne prend pas en charge, Microsoft lance OWA à nous, avec une flopée de nouveaux bugs.
Nous avons eu autour de son affreux lien style par l'application d'un
display:inline-block
pour le lien. Au moins se débarrasser de le souligner. Je n'ai aucune idée pourquoi.Nous avons couru dans un autre bug lors de la tentative de style de nos liens de la même couleur que l'élément parent. Pour une raison quelconque, faisant de l'élément parent de couleurs différentes, il fixe. De le changer par un caractère vers le haut ou vers le bas vous donne une jolie couleur sont proches.
J'ai utilisé la commande suivante et il a bien fonctionné dans Outlook 2007, 2010, 2013, et Outlook.com. Je vais vérifier avec OWA bientôt.
OWA est en fait le décapage de tous les styles de l'étiquette, y compris celui de la durée de balise que vous avez inclus. Vous pouvez ajouter des styles dans la partie de la tête, mais encore une fois, OWA est ignorant ce pour les liens hypertexte. J'ai ajouté un style pour un, a:link, a:visited dans la tête, de la même couleur que dans la balise et notamment de la durée de la balise. Le résultat? Mon linktext est de couleur mais le soulignement est encore le bleu par défaut.
Un indice: il n'y a pas la moindre idée pour moi.
Lors de l'envoi d'e-mails html la meilleure pratique consiste à s'en tenir aux vieilles HTML3 et HTML4.
Les clients de messagerie ne joue pas bien avec CSS2 et jusqu'. CSS fonctionnent beaucoup mieux.
Au lieu de:
Par la voie, vous avez des erreurs de syntaxe dans cette ligne, après chaque déclaration css vous avez besoin d'un ;
Corrigé:
Essayez ceci:
N'oubliez pas de spécifier la version HTML sur le DOCTYPE.
J'ai trouvé moi-même de travailler dans les deux côtés de cette situation.
J'ai travaillé sur le web un client de messagerie à l'aide de PHP avec IMAP, j'ai eu à bande, à des e-mails HTML
de beaucoup de choses parce qu'ils avaient pause non seulement la mise en page de l'application, mais aussi
le comportement prévu des boutons et formulaires. Comment? vous pourriez vous demander. Avec un ordinateur de bureau e-mail
client ce ne serait probablement pas un problème, mais avec un basé sur le web e-mail client de chargement
externe des fichiers css/js dans un très large éventail de pièges potentiels et
de méchants bugs.
Sur une autre occasion, j'ai été travailler sur les invitations de mariage envoyés sur les e-mails HTMl,
Le montant de css que nous avions à faire était ridicule. Pour le faire fonctionner sur vous avez
à utiliser principalement HTML3 et peut-être un peu de HTML4, mais pas trop.
Je vous recommande d'expérimenter avec des tables et des obsolète HTML3 css.
Essayez d'ajouter une classe
my-link
de chaque lien, en question et le code CSS suivant dans votrestyle
tag:Qui couvre généralement les choses pour moi. Si cela échoue, il y a une version plus lourde de ce code ici:
source
J'ai vu ce fil et essayé les options ci-dessus. Le TD hack travaillé sur la modification du code hex, mais je viens de tombé sur une solution sympa si quelqu'un voudrais essayer:
Réglage de la DIV text-decoration AUCUN n'a été pris en charge par OWA. Personnellement, j'ai été invité à supprimer le soulignement, donc pour mon cas, c'est parfait.
J'espère que les gens trouver cela utile. Merci pour tous ceux qui ont ajouté leurs solutions.
Cette question est toujours d'actualité aujourd'hui 21-12-2017. Je n'ai eu aucun problème avec mon code dans Outlook, Gmail, mais pas dans Outlook Web App. J'ai eu à utiliser cette balise obsolète pour le résoudre.
C'était bizarre que le style à l'intérieur de lien hypertexte ne fonctionne PAS pour Outlook Web App(OWA), à cet effet, l'ajout de
<font color="#ff6600 !important;">
travaillé! Étrange mais c'est la façon dont Microsoft veut nous taquiner!il a travaillé pour moi! Assurez-vous d'utiliser
<strong>
, je l'ai essayé avec d'autres balises, mais cela ne fonctionne pas.**
PSEUDO CSS pris en charge (2007, 2010, 2016, 2017 et autres)
C'est comme un hack car il ne prend pas en charge.