A pesar de que cada vez son mayores las facilidades de configuración que nos ofrecen las plantillas, hay modificaciones muy particulares que no es posible realizarlas a través de la configuración y para lograr esto tendremos que hacer uso de CSS.
En las siguientes secciones veremos lo que tenemos que tener en cuenta para realizar modificaciones CSS en un Template o Theme, tanto para WordPress, Joomla y Prestashop. Se tocarán aspectos genéricos de las modificaciones asi como buenas prácticas.
Tabla de contenidos
1- Antes de Empezar
Tener en cuenta que si necesitamos un cambio de diseño en la plantilla, antes debemos revisar si la configuración de la plantilla permite realizar dicho cambio, es común cambios de tipo de color y de posiciones a través de la configuración de la plantilla, sin embargo si es un cambio específico entonces si lo tendríamos que realizar por CSS.
Para ayudarnos en la selección y prueba de nuestros estilos CSS usaremos la herramienta Firebug que es un complemente para distintos navegadores como firefox, otras opciones pueden ser usar Firefox developer edition, Google Chrome Canary
2- Usando Selectores
Los selectores son combinaciones de etiquetas html y atributos : ids y clases, los cuales usaremos para definir, junto con la estructura de nuestro sitio web, la parte que queremos cambiar. En este video vemos cómo se define la prioridad de selectores a través del calculo de prioridad y adicionalmente un ejemplo de cómo trabajar con selectores para cambiar un ítem de menú en el CMS Joomla y prestashop
3- Grabando Modificaciones
Una vez que tenemos el código CSS a agregar, ¿en donde es más conveniente colocarlo?, veremos que algunas plantillas tienen desde la configuración una opción para poner código CSS, además veremos la prioridad de carga de sentencias a través de los archivos, archivos personalizados y el uso de la sentencia CSS !important , finalmente veremos cómo guardar los cambios usando el Administrador de Archivos del cpanel de nuestra cuenta de hosting.
4- CSS Responsive
En algunos casos queremos hacer un cambio específico CSS y que tenga efecto sólo en dispositivos móviles, en este caso será necesario usar la instrucción CSS @media, la cual nos permite definir estilos particulares cuando se cumple una determinada condición, en este video veremos un ejemplo de cambio de color cuando el área disponible varía asi como un ejemplo de ocultar banners para dispositivos móviles.
¿Te ha resultado útil este artículo?
Soporte técnico WordPress en Webempresa y ponente habitual en Meetups y WordCamps de América.
