0

Este es el código que uso, pero outlook no eja insertar codigo, si no solo copiar desde el navegador y pegarlo, pero no me aparece la img ni el orden en el que lo tengo en el codigo, alguno sabe porque pasa esto? he mirado otras preguntas similares pero no me funciona las soluciones

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/style.css">
<title>Firmas GeoStudio</title>
<style>
   @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

@font-face {
  font-family: 'Brandon', sans-serif;
  src: ('font/BRANDON_REG.OTF')
}

body {
  font-family: 'Brandon', sans-serif;
}

.firm {
  display: flex;
  background-color: white;
  border-radius: 10px;
  padding: 15px 30px;
  width: 700px;
}

.slogan {
  font-size: 10px;
  width: 140px;
  margin-top: -2px;
}

.text {
  display: block;
  margin: 30px 0;
  font-size: 15px;
}

img {
  width: 140px;
  height: 39px;
}

.logotipo {
  padding: 30px 0px;

}

.info {
  margin-left: 150px;
  width: 240px;

}

.iconn {
  display: flex;
  font-size: 15px;
}

.icon {
  width: 16px;
  height: 15px;
  padding: 6px;
}

.iconn a {
  padding: 4px;
  text-decoration: none;
  color: #3e4e59;
}

.vertical-line {
  width: 4px;
  height: 95px;
  background-color: #84f5d4;
  margin: 10px 20px;
  border-radius: 25px;
}

.horizontal-line {
  width: 710px;
  height: 4px;
  background-color: #84f5d4;
  margin: 10px 20px;
  border-radius: 25px;
}

h3 {
  color: #3e4e59;
  margin: 5px 0;
  font-size: 17px;
}

h2 {
  color: #3e4e59;
  margin: 5px 0;
  font-size: 20px;
}

p {
  color: #3e4e59;
  margin: 3px;
}

    </style>
</head>
<body>
 
<div class="firm">
    <div class="logotipo">
    <img src="/img/Logotipo.png">
        <p class="slogan">Innovación, datos y territorio</p>
    </div>
    <div class="vertical-line"></div>
        <div class="text">
        <h2>Paola Luna</h2>
        <h3>Coordinadora</h3>
    </div>
    <div class="info">
        <div class="iconn"><img class="icon" src="/img/MAIL.png"><p>[email protected]</p></div>
        <div class="iconn"><img class="icon" src="/img/PHONE.png"><p><strong>(+57) </strong>301 230</p></div>
        <div class="iconn"><img class="icon" src="/img/WORLD.png"><a href="https://geostudio.com.co/">www.geostudio.com.co</a></div>
        <div class="iconn"><img class="icon" src="/img/MAP.png"><a href="https://geostudio.com.co/">Calle 90 No. 12-28</a></div>   
    </div>
</div>
<div class="horizontal-line"></div>

</body>
</html>

como se debe ver en el correo

como se ve cuando envió el correo

como se ve cuando envió el correo

2 respuestas 2

0

lo mejor para este caso es realizar lo siguiente:

  • Abrir un nuevo documento con office Word, versión 2016 o superior.
  • Una vez allí escribí y diseña todo lo que consideres deba tener tu firma. Debe quedar igual a como esperas que outlook lo tome. Te sugiero dejar antes y después de la autofirma un par de lineas en blanco para cuando debas responder emails tener el tipo de letra controlado.
  • Luego vas a outlook -> menu firma -> menu firmas.
  • Allí podes crear una nueva firma y simplemente copia y pega lo que hiciste en el word aqui.
  • Seleccioná si es para mensajes nuevos o respuestas y acepta.

nota importante: tené en cuenta que podes crear hipervínculos en el word y luego llevarlos a la firma directamente.

Fijate el siguiente link como referencia. El truco es pasar por el word porque hacerlo en el outlook directamente es complejo.

Ojala esta info sea de utilidad.

1
  • Muchas Gracias lo voy a probar
    – Gaviota
    Commented el 3 mar. 2021 a las 16:22
0

la firma de outlook genera su propio codigo html

debes editarlo directamente. ubica la carpeta Appdata en la carpeta de tu usuario, AppData\Roaming\Microsoft\Signatures o si lo tienes en español busca la carpeta Firmas; alli veras el codigo .htm que genera cada firma creada en las opciones de outlook. junto con la carpeta de los estilos.

reemplaza el codigo de una firma vacia que hayas creado en outlook por tu codigo, respetando el head.

si incluyes ccs es mas complejo.

por ultimo, tu imagen no se ve porque la estas llamando de una carpeta local... trata de subirla online y coloca esa ruta en el href...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.