Estaba modificando un theme de wordpress para adaptarlo a wp 2.7.1 y me encontré este pedazo de código dentro del css del theme.
.informacion {
background: #eaeed2 url(images/post-style/informacion.gif) no-repeat left 1px;
padding: 12px 3px 12px 40px;
clear: both;
width: 70%;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #DAE1B0;
font-size: 12px;
line-height: 17px;
color: #272727;
}
Este código nos permite darle formato a un texto y hacerlo resaltar dentro de alguna entrada, por ejemplo:
-Descargar este archivo
-No olvides visitar la pagina mas seguido
-Procura utilizar un navegador que no sea IE6
-Da click en este link
Explicación
Para usar este tipo de mensajes deben tener una hoja de estilos donde colocarlo o agregar ese código dentro de las etiquetas <head> </head>. Por ejemplo, en el theme de este blog tengo una hoja de estilos que se llama style.css, ahí es donde copie el código que puse al inicio con algunas modificaciones para poder utilizarlo como yo quería.
Para usarlo en sus entradas deben asignarle la clase “informacion” a la etiqueta a la cual le quieren dar ese formato desde la edición de entradas por HTML, por ejemplo:
<p class=”informacion”>-No olvides visitar la pagina mas seguido</p>
Resultado:
-No olvides visitar la pagina mas seguido
Si quieren hacer sus propias clases, cambiar los iconos, modificar el tamaño de la fuente, colores u otra cosa. Aquí les explico un poquito de que significa cada cosa.
.informacion { } <–Esta parte indica como se llamara la clase y como será llamada desde sus entradas, inicia con una llave y se cierra con otra, donde todo lo que este dentro es el formato que tendrán sus mensajes, si quieren crear otro formato solo hay que cambiar el nombre de “informacion” por el que ustedes quieran, solo que a la hora de llamarlo deben colocar el nombre de esa clase dentro de la etiqueta a la que darán formato.
<p class=nombre_que_eligieron>MENSAJE<p>
background: #eaeed2 url(images/post-style/informacion.gif) no-repeat left 1px;<–Aquí se establece un color de fondo , la ruta del icono que aparecerá dentro del cuadro de estilo, no-repeat indica que esa imagen no se repetirá y que solo aparecerá una vez, left 1px dice que la imagen aparecerá separada un pixel a partir de donde inicia el cuadro.
padding: 12px 3px 12px 40px; <– Se utiliza para acomodar el contenido, esta es la forma abreviada de colocar
padding-top: | padding-right: | padding-bottom: | padding-left
width: 70%; <–Dice que dará formato al 70% de lo ancho del 100% total de nuestro DIV o del espacio donde aparecen nuestras entradas.
border: 1px solid #DAE1B0; <–El borde del cuadro tendrá un grosor de 1 pixel y sera de X color.
font-size: 12px; <–Tamaño de la fuente del texto.
color: #272727; <–Establece el color de la fuente del texto.
Y bueno, creo que con eso ya pueden personalizar su propio estilo para los mensajes, pero si no me entendieron o quieren saber mas, pueden visitar estos sitios.
Información sobre CSS
w3schools.com – es.html.net – Margen y Padding
Grandioso, andaba buscando algo asi, muchas gracias 🙂
De nada, espero haya quedado entendible xD.
Ahh! y bienvenido 🙂
saludos!.
deberias de hacer unos tuts para nettuts y ganarte una lanilla extra 🙂
los screencast son la onda ahorita
Orale, pues si sería interesante, pero la onda es que no domino 100% el ingles Y_Y..
Esa net es la onda, en ese lugar he aprendido a hacer un montón de cosas 😛
Gracias por la recomendación y la visita 🙂
what!?!?
jojo…
me perdí en alguna parte de la explicacion… XD
…a mi, que me expliquen con manzanitas…
Post como este son de agradecer, información útil y explicación pedagógica.
Saludos desde España.