Personalizar plantillas email

[AlexM4]

Buenos días,
 
Primero de todo decir que estoy usando la versión 1.6.0.14 de Prestashop.
 
He estado personalizando la plantillas de emails de Prestashop, he conseguido modificar el cuerpo del correo pero no logro modificar la parte de la cabecera y el logo.
 
Explico lo que quiero hacer:
 
Primero quería poner una imagen de fondo en el logo para hacerlo más personalizado al estilo de la tienda pero cuando se enviaba el correo tanto al gmail como al outlook, esa imagen de cabecera no se ve ya que por ejemplo el gmail ponía una url delante de la que yo había puesto que era donde se encontraba la imagen y hacia que no encontrará la imagen de fondo lógicamente pero no sé de donde sacaba esa url.
 
También quería poner el nombre de la tienda y una frase descriptiva de quien éramos por encima de la imagen de la cabecera de esta forma quedaría el nombre de la tienda y la frase a la izquierda y el logo a la derecha todo encima de la imagen de fondo.
 
Al no conseguir mostrar la imagen de fondo lo que he hecho es modificar el logo que se pone en la plantilla emails poniendo el fondo en el logo y así aparece el logo con fondo.
 
Bien hasta aquí, después lo que he hecho es poner el nombre de la tienda y la frase y aparecen debajo del logo y lo que he hecho es poner esto:

<td align="center" class="logo" style="line-height: 9px;">
    <a title="{shop_name}" href="{shop_url}" style="color:#337ff1;float: right;margin-right: 40px;">
        <img src="{shop_logo}" alt="{shop_name}" />
    </a>
    <br><span style="float: left; position: absolute; margin-left: 20px;"><a href="{shop_url}" style="color:white; text-decoration: none; font-weight: bold; font-size: 15px;">{shop_name}</a></span>
    <br/><br/><br/>
    <span style="float: left; position: absolute; margin-left: 20px; color:white; font-weight: bold; font-size: 12px;">Aqui va la frase</span>
</td>

Pero no reconoce el position: absolute, es decir, cuando lo miro con el firebug es el único que no aparece y ya no sé como hacerlo.

 

He intentado explicarlo lo mejor posible y lo siento por si es demasiado largo.

 

Muchas gracias por adelantado.

 

P.D.: En la imagen se encuentra lo que quiero hacer, modificando el correo enviado con el firebug hago que se muestre como yo quiero pero eso es temporal.

 

Edited September 14, 2015 by AlexM4 (see edit history)

[elperi17]

Cuando maquetes emails no utilices tus conocimientos de CSS avanzados. Me refiero a que los lectores de correo electrónico no utilizan todos los atributos para posicionar elementos, colorearlos, etc... Intenta maquetar al viejo estilo con tablas anidadas, así te asegurarás que todo queda en donde debería estar, sin usar posiciones relativas ni absolutas.

[AlexM4]

Muchas gracias, voy a intentar hacerlo como dices y si lo consigo diré como lo he hecho.

 

Muchas gracias por contestarme tan rápido.

[AlexM4]

He estado intentando hacer lo de las tablas anidadas pero no consigo que salga la tabla que tiene la url de la tienda y la frase dentro de la tabla del logo para que este una dentro de la otra.

 

En lo facil que es con el position absolute y como se complica con las tablas.

 

Siento pedir ayuda pero me podrian orientar un poco como poder hacerlo para que se pueda ver como en la imagen.

 

P.D.:Adjunto el codigo del correo que estoy modificando por si es de ayuda. (CONTACT_FORM.HTML)

contact_form.html

Edited September 16, 2015 by AlexM4 (see edit history)

[AlexM4]

Otra pregunta, como puedo cargar una imagen de fondo para la cabecera por ejemplo con background-image y la ruta donde se encuentra la imagen sin que ponga delante de la mia una url que se inventa el lector de correos?