Mostrar mensajes personalizados en las entradas del blog con CSS








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

Fuente:
Soycachanilla.com





Búsquedas recientes:

  • codigo mensajes personalizados en css
  • mostrar mensaje css

  • MOSTRAR MENSAJE CON CSS
  • entradas blog css

  • mensajes mostrando entradas en blog
  • blogger css solo entradas
  • personalizar blog css

Comentar entrada

Loading Facebook Comments ...