mail() con html y css

educacanis · #1 (**permalink**) 16/11/2011, 06:09

hola, estoy intentando hacer un mail plantilla para enviar a varios destinatarios.
Estoy utilizando la función de php mail() para enviarlos y hasta ahí todo bien.

El problema es que quiero que sea un correo que no sólo tenga texto sino que tenga también imagen de fondo y una estructura determinada, similar a la que tendría una web y por eso para maquetarlo utilizo html de la siguiente manera

Código PHP:

  $mensaje .= ' 
<html> 
<head> 
  <title>Recordatorio de cumpleaños para Agosto</title> 
  <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
  <p>¡Estos son los cumpleaños para Agosto!</p> 
  <table> 
    <tr> 
      <th>Quien</th><th>Día</th><th>Mes</th><th>Año</th> 
    </tr> 
    <tr> 
      <td>Joe</td><td>3</td><td>Agosto</td><td>1970</td> 
    </tr> 
    <tr> 
      <td>Sally</td><td>17</td><td>Agosto</td><td>1973</td> 
    </tr> 
  </table> 
</body> 
</html> 
';

El problema es que quiero darle un diseño concreto y lo tengo en una hoja CSS, he intentado ponerlo en la cabecera del <html> como muestro en el código, pero no funciona.

Me gustaría saber si hay que ponerlo en las $cabeceras del mail() y cómo hay que ponerlo, etc.

Estoy perdidísima

Eleazan · #2 (**permalink**) 16/11/2011, 06:12

No creo que puedas añadir CSS (no lo he probado, aunq en todo caso tendrías que añadir la ruta completa!).

Lo q estoy seguro, es q la etiqueta style sí funciona :)

En la cabezera tienes q añadir el Content-type: html ;)

Código PHP:

  $cabeceras .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; //Por ejemplo!

educacanis · #3 (**permalink**) 16/11/2011, 06:17

ok gracias, lo del Content Type ya lo sabía, pero quería saber si hay forma de añadir css.

Lo que quiero es similar a los emails de publicidad como groupalia, juegos multijugador, etc, no creo que eso lo hagan con styles porque son larguísimos, pero bueno si no hay otra cosa lo haré con ello

lgruz · #4 (**permalink**) 16/11/2011, 06:21

Para que te funcionase, tendrías que tener el fichero style.css en el propio correo.

En estos casos, lo que deberías hacer es, o usar el atributo "style" como bien ha indicado Eleazan, o utilizar la etiqueta "<style></style>" en el head, escribiendo dentro el código CSS que desees. Te quedaría de la siguiente forma:

Código:

$mensaje .= ' 
<html> 
<head> 
  <title>Recordatorio de cumpleaños para Agosto</title> 
  
  <style>
      #objeto1 {
          color: #000;
      }
      ...
  </style>


</head> 
<body> 
...

educacanis · #5 (**permalink**) 16/11/2011, 06:34

os dejo un ejemplo de parte de un email con imágenes, texto, etc. similar a lo que quiero conseguir:
[http://imageshack.us/photo/my-images/811/mailni.jpg/

educacanis · #6 (**permalink**) 16/11/2011, 07:09

lo he intentado con el style y en gmail sí se ve, pero en hotmail no. No sé si porque no lo soporta o por otros problemas, el caso es que yo los tipos de email que quiero se ven en todos los servidores de correo...
En realidad sólo me ocurre en algunos casos, porque el color de la letra sí lo cambia en todos los correos, pero por ejemplo el color de fondo sólo lo cambia en gmail y no en hotmail

maycolalvarez · #7 (**permalink**) 16/11/2011, 08:17

no se recomienda utilizar CSS para los emails debido a que muchos clientes de correo no lo soportan, lo ideal es usar HTML y etiquetas ya obsoletas como <font>

educacanis · #8 (**permalink**) 16/11/2011, 09:07

Seguro que así no se soluciona, pero por lo menos he conseguido que funcione tanto en hotmail como en gmail y en el email del móvil.
En cada sitio funciona una cosa, así que hay que ponerlo todo.
En gmail y en otros correos funcione el style dentro de las etiquetas html como habéis dicho. Ésto NO funciona en hotmail.
Sin embargo en hotmail lo que funciona es definir los estilos en la cabecera del html. Ésto NO funciona en gmail y otros correos.

De todas formas espero que esta solución sea opcional. si alguien tiene otra, se lo agradeceré.

lgruz · #9 (**permalink**) 16/11/2011, 10:11

El tema de los correos es algo bastante complicado. Si te fijas, muchos de los boletines son tablas con celdas, e imágenes dentro de cada celda, que en conjunto forman una sola imagen. Ni texto ni nada, sólo la imagen formada a partir de varias, como un puzzle. Se ve que será la mejor forma de conseguir compatibilidad con todos los clientes.

educacanis · #10 (**permalink**) 17/11/2011, 06:05

Es cierto la mejor forma es utilizar tablas, dentro de otras y con las etiquetas html, vamos como diseñar una página web a la antigua