¿CÓMO HACER CAJAS DE COLORES CON CSS PARA DESTACAR UNA INFORMACIÓN IMPORTANTE?
Nuevo episodio del “El minuto de diseño DIY”. Hoy vas a aprender cómo crear cajas de colores con CSS, para poder destacar textos en tus entradas o páginas.
Episodio nº3: ¿Cómo hacer cajas de colores con CSS?
¿De qué estamos hablando?
He aquí un par de ejemplos:
Paso 0 – Créditos y el por qué de esta técnica
Yo no soy diseñador ni pretendo serlo nunca. Sólo te pongo a disposición, a mi salsa, una técnica que he podido encontrar en:
- Los tutoriales de StudioPress
- En este caso el autor es Brian Gardner, el diseñador en jefe del equipo
Esta técnica permite destacar ciertos párrafos en un artículo y tratar así de llamar la atención de tus lectores. Por ejemplo, sería un buen recurso para usar en el pie de tus entradas, cuando cierras el post con un Call-to-Action.
Paso 1 – El código XHTML
[xhtml]<div class="content-box-blue">Introduce tu contenido aquí.</div>[/xhtml]
¿Cómo implementar este código HTML en tu propio tema?
- Copia el código arriba (pasa tu ratón arriba a la derecha, en la caja del código y haz clic en el primer botón, View Source)
- Pega el código en Notepad (o similar) e introduce tu texto
- Desde tu panel de control, en la entrada que estás escribiendo, haz clic en la pestaña “Texto” y pegas el código empezando con <div class=”…> y terminando con </div>
- Elige uno de los 6 colores disponibles en la clase del elemento div: “content-box-blue”, “content-box-gray”, “content-box-green”, “content-box-purple”, “content-box-red”, “content-box-yellow”
- Guarda las modificaciones y pasa a la etapa siguiente
Paso 2 – Las etiquetas de estilo CSS
[css]
/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
[/css]
background-color: #fef5c4;
border: 1px solid #fadf98;
}
[/css]
¿Cómo implementar este código CSS en tu propio tema?
- Copia el código arriba (pasa tu ratón arriba a la derecha, en la caja del código y haz clic en el primer botón, View Source)
- Desde el panel de administración de tu blog, ve a Aparencia/Editar CSS (si no ves Editar CSS, tendrás que instalarte el plugin Jetpack y activar este módulo de Editar CSS)
- Pega el código (CRTL + V) tal cual está en esta página, al final del todo si ya tienes otros elementos de personalización
- Guarda las modificaciones
Esta técnica es nativa de WordPress.org y debería funcionar con todos los temas disponibles.
¿No hay una forma más fácil de implementar esta técnica?
Sí, ¡la hay!
Puedes instalar este plugin y usar los códigos cortos que encontrarás en esta página. Aunque pueda parecerte más cómodo, a mí no me gusta esta opción por 2 razones:
- Instalas un plugin que no hace gran cosa sino potencialmente hacer tu blog más lento
- El uso de códigos cortos es pan para hoy, hambre para mañana. Si algún día cambias de tema, tendrás que limpiar todos tus artículos y páginas (eliminando los códigos cortos) cosa que no ocurrirá si trabajas con XHTML y CSS, como te he enseñado en este mini tutorial
No hay comentarios :
Publicar un comentario