En este breve tutorial vamos a ver cómo dar un toque de color a tus entradas y páginas con estas 6 cajas de contenido:
CSS para crear las cajas de color
Para crear las cajas de color vamos a añadir un poco de CSS desde Apariencia > Personalizar > CSS adicional:
/* Cajas de color
------------------------------------------------------------ */
.caja-contenido-azul,
.caja-contenido-gris,
.caja-contenido-verde,
.caja-contenido-purpura,
.caja-contenido-rojo,
.caja-contenido-amarillo {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
.caja-contenido-azul {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.caja-contenido-gris {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
.caja-contenido-verde {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.caja-contenido-purpura {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
.caja-contenido-rojo {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
.caja-contenido-amarillo {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
Etiquetado HTML para incluir las cajas de color en tu contenido
Para incluir las cajas de color en tus entradas, o páginas, lo único que tendrás que hacer es envolver tu contenido a destacar con unos DIV utilizando la siguiente sintaxis:
<div class="caja-contenido-azul">Aquí es donde deberás poner tu texto a destacar.</div>
Para los demás colores sólo deberás sustituir la clase CSS ‘caja-contenido-azul’ por ‘caja-contenido-gris’, ‘caja-contenido-verde’, ‘caja-contenido-purpura’, ‘caja-contenido-rojo’ o ‘caja-contenido-amarillo’.
Este truco es compatible con todos nuestros themes presentes y futuros :)
Disclaimer: este tutorial esta 100% inspirado en el publicado por Brian Gardner que podrás encontrar aquí.