Manual para crear cajas de colores utilizando CSS

En este manual aprenderás a crear unas cajitas de texto de distintos colores que contengan una imagen. Para hacerlo modificaremos el CSS (Cascade Style Sheet).

Nos quedará algo parecido al siguiente ejemplo:

Ejemplo de correcto
Ejemplo de aviso
Ejemplo de error
Ejemplo de información

Que hacer para poner las cajitas?

Para empezar deberemos modificar el archivo css que está en (pon el nombre del tema que estés usando):

wp-content/nombredeltheme/stylesheet.css

Una vez listo para editar el archivo deberemos poner este código:

.aviso {

background: #fffddc url(url de imagen de aviso) no-repeat 10px;

padding: 7px 10px 7px 37px;

border: 1px solid #f0ea8b;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

font-size:10px;

width: 580px;

}

Aviso será el nombre.

background: #fffddc url(url de imagen de aviso) no-repeat 10px; dónde background indica el fondo, #fffddc es el color, url de la imagen ya se sabe, url entera entre paréntesis y sin espacio entre url y los paréntesis.

padding: 7px 10px 7px 37px; paddinges la separación entre los objetos en pixels.

border: 1px solid #f0ea8b: Esto es el ancho del borde y su color.

-moz-border-radius: 5px; Esto es el radio de la esquina en caso que queramos redondearlo.

-webkit-border-radius: 5px; Esto es el radio de la esquina en caso que queramos redondearlo.

font-size:10px; Este será el tamaño de la letra.

width: 580px; Será el ancho.

Quizás os sea de ayuda esta imagen para comprenderlo un poco mejor.

Las fotos mejor que sean 16×16 porque 48×48 es demasiado grande aunque no lo parezca.

De este modo usaremos el estilo de texto de la página es decir el tipo de letra y su tamaño.

Ahora la parte de configuración ya está lista.

Cómo indicar que queremos colocar las cajas de texto?

Para colocar las cajitas de texto deberemos crear un post normal y poner <div class=»nombre»>Aqui escribes el texto que va en la caja</div>, pero en código HTML, no lo insertes como texto plano 😉 Nombre será el nombre que le hayamos puesto para identificarlo.

<div class=»nombre»>Aqui escribes el texto que va en la caja</div>

Deja un comentario

*

Buscador