Añadir 'Notas', 'Warnings', etc... con icono (II)
Me quedé con la tecla de que se podría mejorar eso de añadir algunos párrafos resaltados, y que, a la vista de los códigos fuentes de las webs donde los veía, la cosa iba a ir por la creación (y posterior invocación) de alguna etiqueta 'class' de CSS.
y voy a tratar de adaptar un poco eso de las 'Notifications boxes' a lo que yo quiero. Para empezar, voy a crear una 'class' que llamaré 'nota', y lo haré creándola así:
<style type='text/css'>
.nota {
color:#555;
border:1px solid #6699ff;
background-color:#ccffff;
border-radius:10px;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:12px;
padding:10px 10px 10px 36px;
margin:10px;
}
</style>
que copiaré en la plantilla del blog, justo antes de la etiqueta </head>
Hecho esto, si ahora la invoco, en edición HTML con un simple
<div class="nota">... (texto)...</div>
...obtengo lo que ves aquí. Naturalmente, los valores que he puesto de color (es el color del texto), border (su grosor, tipo de línea y color), background-color (el color del fondo), el margen interno (padding), el externo (margin), etc..., los puedes poner a tu antojo, incluso añadir más cosas, como por ejemplo width=90%, si quieres que ese sector no ocupe todo el ancho, etc.
Y, sobre todo, de esta forma, y automáticamente, todo lo que escribas dentro de una 'div class' se ajustará a los parámetros que definiste para la class, y dentro de su 'marco'.
Y, sobre todo, de esta forma, y automáticamente, todo lo que escribas dentro de una 'div class' se ajustará a los parámetros que definiste para la class, y dentro de su 'marco'.
Por supuesto, puedes crear cuantas class quieras, otra, por ejemplo, la puedes llamar 'nota-orange', y usar esa gama de colores en ella.
PERO HAY ALGO MÁS...
Ahora voy a clear una 'class' con un icono... Algo como esto:
<style type='text/css'>
.info {
background:#e3f7fc url('link_al_icono') no-repeat 10px 50%;
border:1px solid #8ed9f6;
}
</style>
(donde, en 'link_al_icono' pondré, entre esas dos comillas, la ruta donde tengo guardado el icono que me interese poner.
Y ahora, si invoco a la vez a las dos class con
<div class="nota info">
esto es lo que sale
Ya con el icono puesto
¿a que mola...?
Ya con el icono puesto
¿a que mola...?
Y, como ves, así se crean y se añaden muy fácilmente estas notas resaltadas... de las que puedes crear las que quieras.
Por ejemplo, aquí dejo unos iconos (el tamaño bueno parece ser que es el de 16x16px) interesantes, que he subido a blogger, y por tanto tengo sus URLs.
Y a experimentar...
¡Ah! y para los códigos de los colores... puedes obtenerlos, por ejemplo,
en esta web
o en esta otra
en esta web
o en esta otra
Imprimir el artículo/crear PDF
Volver al Indice del Blog
entrada de Julio Bengoa ('aka' doc) @ 3/19/2014 10:46:00 p. m.
0 comentarios
