¡Hola amigos! En este post les voy a enseñar a añadir los siguientes mensajes de alerta a su página. Es muy simple y rápido así que espero que les sirva y puedan entender. Ya saben que en caso de problemas, no duden en preguntarme. 

---

vista previa

código css

Copiar y pegar el siguiente código entre las etiquetas <style type="text/css"> en algunos de los boxes que se encuentran en la configuración avanzada de los 'Ajustes de Diseño'. Si usted usa el diseño "CSS-Design" que ofrece el servicio, el código debe pegarlo en "CSS-Design sin Style Tags" ubicado también en la configuración avanzada de 'Ajustes de Diseño'.

div.box {
border-radius: 6px 6px 6px 6px;
font-size: 14px;
margin: 2px 0 15px;
padding: 20px 15px 20px 65px;
}

div.success-box {
background: url("https://img.webme.com/pic/d/design-adri/check.png") no-repeat scroll 15px center #EBFAB6;
border: 1px solid #BBCC5B;
color: #599847;
}

div.arrow-box {
background: url("https://img.webme.com/pic/d/design-adri/arrow.png") no-repeat scroll 15px center #EBFAB6;
border: 1px solid #BBCC5B;
color: #599847;
}

div.alert-box {
background: url("https://img.webme.com/pic/d/design-adri/alert.png") no-repeat scroll 15px center #FBDD96;
border: 1px solid #E5AF51;
color: #CA6B1C;
}

div.error-box {
background: url("https://img.webme.com/pic/d/design-adri/error.png") no-repeat scroll 15px center #FDD2D1;
border: 1px solid #F6988F;
color: #883333;
}

div.notice-box {
background: url("https://img.webme.com/pic/d/design-adri/note.png") no-repeat scroll 15px center #F9EBCA;
border: 1px solid #E5B2AC;
color: #9F6722;
}

div.info-box {
background: url("https://img.webme.com/pic/d/design-adri/info.png") no-repeat scroll 15px center #E6EBF0;
border: 1px solid #89BECD;
color: #277DCE;
}  

código html

Copie y pegue el siguiente código html en donde desea que aparezca el mensaje de alerta, están ordenados con respecto a la imagen de muestra. Lo que está señalado en verde, es el texto que debe editar.

<div class="box success-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 

<div class="box arrow-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>	 

<div class="box alert-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>	 

<div class="box error-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>	 

<div class="box notice-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>	 

<div class="box info-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>