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:

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.