Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje16-08-2015, 21:07 (UTC)    
Título del mensaje: [CSS + HTML] Mensajes de alerta

[CSS + HTML] Mensajes de alerta

¡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> 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'.

Cita:
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("http://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("http://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("http://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("http://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("http://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("http://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.

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

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

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

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

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

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


===================================================================================================

Eso fué todo amigos, espero que les haya gustado.
Saludos!


Ultima edición por nesbet el Dom Ago 16, 2015 5:11 pm; editado 2 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group