Manejar estilos en Outlook respetando la plantilla HTML/CSS en un programa Python

Question

Buenos días,

 

Tengo un programa de Python (tiene una plantilla ya preestablecida de HTML/CSS en el código) que tiene como finalidad crear una firma para el usuario. El problema que me estoy encontrando es que en todos los hipervínculos me crea un subrayado. En el programa también, pero solo en las direcciones de correo o en las páginas web (eso realmente no me importa demasiado). Lo que me estoy encontrando y el motivo de este post es que el Outlook trata los hipervínculos por igual, sea una imagen o texto y lo subraya. He intentado modificar el código añadiendo que el text-decoration fuera "none", he creado clases específicas para detallarlo y que no me subraye, pero es imposible.

Me da error subir las fotos aquí, he usado imgur para ponerlo. Si tenéis otro servicio, me decís.

Cómo se ve en el programa: https://imgur.com/a/C1Kb8OY

 

Cómo lo trata Outlook: https://imgur.com/f4OaUMG

 

Parte del código: https://imgur.com/a/eCCb5tf Me gustaría de alguna manera que el Outlook me respetara el texto original del programa y no aplicara sus estilos.

Gracias y un saludo

Answer 1

Hola Joaquim Serrat

¡Bienvenido a Preguntas y respuestas de Microsoft!

 Entiendo tu momento, Código no es exactamente soportado pero he estado alli, dejame intentar guiarte un poco.

1. Uso de CSS en línea: Outlook tiene un soporte limitado para CSS, especialmente para estilos en línea. Asegúrate de que tu CSS para text-decoration: none; esté aplicado directamente en el elemento <a> en lugar de en una clase CSS externa.

      <a href="https://example.com" style="text-decoration: none;">Enlace sin subrayado</a>
      
   

2. VML para imágenes: Para imágenes, puedes usar VML (Vector Markup Language) que es compatible con Outlook. Aquí tienes un ejemplo de cómo hacerlo:

      <!--[if gte mso 9]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#0072C6" fillcolor="#0072C6">
          <w:anchorlock/>
          <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Enlace sin subrayado</center>
      </v:roundrect>
      <![endif]-->
   

3. Clases específicas para Outlook: Puedes crear clases específicas para Outlook utilizando comentarios condicionales de Microsoft:

      <!--[if mso]>
      <style type="text/css">
      .no-underline a { text-decoration: none !important; }
      </style>
      <![endif]-->
      
   

4. Uso de mso-style-priority: A veces, agregar mso-style-priority puede ayudar a que Outlook respete tus estilos:

      <a href="https://example.com" style="text-decoration: none; mso-style-priority: 99;">Enlace sin subrayado</a>
   

Prueba estas sugerencias y verifica si alguna de ellas resuelve el problema. Si necesitas más ayuda, no dudes en preguntar.

¡Buena suerte!

Jonathan.

---

¡Tu opinión es muy importante para nosotros! Si esta respuesta resolvió tu consulta, por favor haz clic en ‘Sí’. Esto nos ayuda a mejorar continuamente la calidad y relevancia de nuestras soluciones. ¡Gracias por tu colaboración!

 

Answer 2

Hola Joaquim Serrat

Agradezco sinceramente por haber tenido la oportunidad de ayudarle Es gratificante saber que la información que proporcioné estaba correcta

Jonathan