WordPress: Agregar esquema de colores de theme + Efecto nieve con CSS

Inicio » Tecnología » Diseño Web » WordPress: Agregar esquema de colores de theme + Efecto nieve con CSS

Anteriormente, cuando estudiábamos el desarrollo de una galería de flickr, vimos una forma para elaborar un sistema de administración u opciones para el theme, si ya tenemos nuestro sistema de administración de theme, será relativamente fácil agregar un sistema de cambio de color o, esquema de colores de theme (color scheme), mejor dicho un sistema por el cual podremos elegir una hoja de estilos con un sistema de colores que podremos cambiar cuando queramos sin la necesidad de estar modificando nuestra hoja de estilos principal.

Esto es de gran ayuda si queremos cambiar a un color diferente por ejemplo en hallowen, navidad, u otra fecha en la que queramos destacar nuestra web con un color alternativo; o simplemente si desarrollamos theme, poder ofrecerle a nuestro cliente la opción de poder elegir un color de su preferencia.

Insertando la opción para selección de colores del theme:

Bueno, para empezar tenemos que recordar lo que hablamos al crear nuestro propio sistema de administración de themes.

Un esquema de colores generalmente se realiza una lista de selección, aunque también se podría utilizar botones de radio, en este caso lo haremos con una lista de selección, y para ello debemos ubicar el área en las opciones del theme donde queramos mostrar la lista, por ejemplo luego de la opción para cargar el logotipo de la web, favicon, etc., el cual se encuentra dentro de las opciones generales (tomando en cuenta que hemos hecho lo mismo que en la guía del sistema de administración, lo que no siempre será así), en mi caso será luego del favicon:

Y a continuación colocamos el código de lo que será nuestra selección de theme:

De lo anterior quiero comentar algo:

Deben saber que tenemos que tener una hoja de estilos por cada opción que agreguemos, como verán según nuestro ejemplo tenemos  que tener tres hojas de estilos: default.css, christmas.css y, hallowen.css; y cada una de ellas contendrás todos los formatos que utilizaremos para modificar nuestro theme, en su mayoría serían los colores de fondo y colores de fuente los que se modificarían, pero si hemos colocado capas para efectos y decoraciones los podremos aplicar desde estas hojas de estilo.

Si todo ha ido bien nuestra pantalla de opciones quedará de la siguiente manera:

Esquema de colores - color scheme

Supongamos que tengamos que agregar algunas capas o contenedores para agregar alguno que otro efecto o decoración, como un gorrito de santa, unos arbolitos o una calabaza de hallowen, sin embargo son capas que no serán mostrados en el estado normal de la página, por lo que es necesario contar con una hoja de estilos que oculte estas capas cuando se utilice la plantilla normal, y para ello utilizaremos la hoja de estilos “default.css”.

Cargando nuestros esquemas de color en el theme:

Una vez que hemos implementado nuestra opción en la administración lo siguiente será implementar el código que cargará las hojas de estilo según la selección que hagamos, para ello abrimos el archivo header.php del theme y agregamos el siguiente código:

Plus: Efecto Nieve sólo con CSS

Para tener algo que agregar a nuestra les dejo este efecto nieve que pueden aplicar a su hoja de estilos “christmas.css” se verá interesante en su web para empezar.

Las imágenes las pueden descargar desde:

Copos de nieve

Las imágenes las deben guardar dentro de la carpeta css/images/, dependiendo donde hayan colocado las hojas de estilo.

El efecto lo pueden ver en esta web, lógicamente nuestra hoja de estilos para que el efecto pueda ser más visible en nuestra web, como cambios de opacidad en algunas capas, cambio de color de fuente entre otros.

Fuente: Efecto de copos de nieve con CSS

Probando si se muestra seleccin de Google Adsense

Una respuesta a “WordPress: Agregar esquema de colores de theme + Efecto nieve con CSS”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: Anteriormente, cuando estudiábamos el desarrollo de una galería de flickr, vimos una forma para elaborar un sistema de administración u opciones para el theme, si ya tenemos nuestro sistema de administración de theme, ser…

Deja un comentario