quitar - como poner color a las letras en html

HTML correo electrónico enlace color dilema

Question

Diseñé un correo electrónico HTML y tengo los siguientes problemas: mi diseño completo está basado en un color azul, por lo que el lector / usuario no puede leer ningún texto azul, el texto debe ser blanco. GMAIL colorea automáticamente los números de teléfono y los enlaces en azul, pero el principal problema es Microsoft Outlook OWA.

Para arreglar el número de teléfono y la coloración del enlace en GMAIL hice lo siguiente:

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

Esto funciona perfectamente para GMAIL y en todas partes, PERO como mencioné, la mayoría de mis clientes usan Outlook o MS OWA (aplicación web de Outlook).

OWA ignora el color que establezco en mi estilo en línea y hace que el enlace sea azul por defecto; Esto solo sucede cuando se obtiene una vista previa del correo electrónico. Si realmente abres el correo electrónico se activan todos los estilos.

Mi dilema es, ¿qué debo hacer? Ya he perdido la esperanza, pero este es mi último recurso. ¿Hay alguna forma de anular el color del enlace para Outlook OWA? He usado! IMPORTANTE, la etiqueta FONT, NESTING a 5 grados.

El problema aquí no es Outlook sino OWA.

Aquí hay una captura de pantalla cuando inspecciono el elemento en Chrome:

Y aquí está FF:

¿Algunas ideas?

¡Por favor!

Answer 1

Al enviar correos electrónicos html, la mejor práctica es atenerse a los antiguos HTML3 y HTML4. Los clientes de correo electrónico no juegan bien con CSS2 y superiores. El CSS en línea funciona mucho mejor.

En lugar de:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a> 

Por cierto, tiene errores de sintaxis en esta línea, después de cada declaración css necesita un;

Corregido:

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a> 

Prueba esto:

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

No olvide especificar la versión HTML en el DOCTYPE.

Me he encontrado trabajando en ambos lados de esta situación. Trabajé en un cliente de correo electrónico basado en web utilizando PHP con IMAP, tuve que eliminar los correos electrónicos HTML de muchas cosas porque no solo romperían el diseño de la aplicación sino también el comportamiento previsto de los botones y formularios. ¿Cómo? usted podría preguntar Con un cliente de correo electrónico de escritorio, esto probablemente no sería un problema, pero si un cliente de correo electrónico basado en la web carga archivos css / js externos, puede resultar en una gran variedad de peligros potenciales y errores desagradables.

En otra ocasión estaba trabajando en invitaciones de boda enviadas a través de correos electrónicos HTMl. La cantidad de CSS en línea que teníamos que hacer era ridícula. Para que funcione, tienes que usar principalmente HTML3 y quizás un poco de HTML4 pero no demasiado.

Te recomiendo que experimentes con tablas y HTML3 en desuso en línea css.

Answer 2

Encontrará el éxito al incluir la declaración de <font> , que está en desuso en el HTML moderno, aunque OWA lo respeta:

<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>

Answer 3

Es un error conocido de Outlook que si una etiqueta de anclaje no contiene una URL válida, se ignorará el estilo de dicha etiqueta.

La tendencia a agregar! Important también funcionará en su contra en este caso porque Outlook ignorará por completo cualquier etiqueta con el sufijo importante.

Coloque una URL en su etiqueta de anclaje, o envuelva el texto en una etiqueta de separación dentro del ancla y ponga su estilo allí.

Answer 4

Esta pregunta sigue siendo relevante a partir de hoy 21-12-2017. No tuve ningún problema con mi código en Outlook, Gmail pero no en la aplicación web de Outlook. Tuve que usar esta etiqueta obsoleta para resolverlo.

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

Fue extraño que el estilo dentro del hipervínculo NO funcione para la aplicación web de Outlook (OWA), por lo tanto, agregando <font color="#ff6600 !important;"> ¡funcionó! ¡Extraño pero así es como Microsoft quiere burlarse de nosotros!

Answer 5

Figuras Justo cuando nos hemos acostumbrado a no poder usar los nuevos y geniales trucos de correo electrónico porque Outlook no los admite, Microsoft nos lanza OWA, con una gran cantidad de errores nuevos.

Hemos superado su horrible estilo de enlace mediante la aplicación de una display:inline-block en display:inline-block en el enlace. Esto al menos se deshace del subrayado. No tengo ni idea de porqué.

Nos topamos con otro error al intentar estilizar nuestros enlaces del mismo color que el elemento principal. Por alguna razón, hacer que el color del elemento padre sea diferente lo solucionó. Cambiarlo por un carácter hacia arriba o hacia abajo generalmente te da un color bastante cercano.

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>

Answer 6

He podido solucionar esto colocando una tabla dentro de la etiqueta a.

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>

Answer 7

Intente agregar un my-link clase a cada enlace en cuestión y el siguiente CSS en su etiqueta de style :

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

Eso usualmente cubre las cosas por mi. Si eso falla, hay una versión más pesada de este código aquí:

.my-link a,
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

source

Answer 8

Los colores del enlace de la aplicación web de Outlook (OWA) cambian de los estilos en línea. He pasado algunas horas intentando cambiar / corregir los colores de los enlaces en OWA, donde elimina los estilos en línea de las plantillas de correo electrónico que estoy creando. Probé varias técnicas con etiquetas + sin éxito. Finalmente encontré algo que parece funcionar:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

Se cambió a

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

Parece bien hasta ahora.

Pruebas adicionales. Puse el color ligeramente apagado en el <td style="color:#FFFFF6;"> luego el color correcto en el <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

Answer 9

OWA en realidad está eliminando todos los estilos de la etiqueta a, incluida la etiqueta span que incluyó. Puede agregar estilos en la parte principal, pero nuevamente, OWA está ignorando esto para los hipervínculos. Agregué un estilo para a, a: link, a: visit en la cabeza, el mismo color que en la etiqueta a y la etiqueta de intervalo incluida. ¿El resultado? Mi enlace de texto está coloreado, pero el subrayado sigue siendo el azul predeterminado. La pista: no hay ninguna pista para mí.

Answer 10

Utilicé lo siguiente y funcionó bien en Outlook 2007, 2010, 2013 y Outlook.com. Voy a consultar con OWA pronto.

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>

Answer 11

Vi este hilo y probé las opciones de arriba. El truco de TD funcionó con el cambio del código hexadecimal, pero me topé con una buena solución si alguien quisiera probar:

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

La configuración de DIV en la decoración de texto NONE fue compatible con OWA. Personalmente me pidieron que eliminara el subrayado, así que para mi caso es perfecto.

Espero que la gente encuentre esto útil. Gracias a todos los que agregaron sus soluciones también.

Answer 12

<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>

funciono para mi Asegúrate de usar <strong> , lo probé con otras etiquetas, pero eso no funcionó.