Tienes un blog o página web y quieres mejorar su aspecto. Quieres poner un interlineado mayor, o quieres cambiar un color o cualquier propiedad.
Pero claro, si no tu tema no te da la opción, y no sabes nada de CSS, buscar entre los diferentes ficheros de estilos que trae WordPress puede ser una locura, y trasteando nunca sabes como acabara tu Web.
Te cuento un secreto: tienes una forma de hacer cambios de estilos, y tocar el código CSS sin que afecte en verdad a tu web, para hacer pruebas.
Cuando todo este bien, convierte los cambios en definitivos.
Usa una extensión de navegador llamada Firebug. Originalmente para Firefox, pero disponible en los demás navegadores.
Firebug para Firefox. El original
Tienes que saber que hay otras extensiones que funcionan igual. Por ejemplo Web Developer para Firefox. E incluso los desarrolladores las suelen usar conjuntamente.
Además no existe solo para Firefox, lo puedes encontrar en otros navegadores.
Yo lo uso y recomiendo porque es de los primeros que permitían esas funciones, y es muy fácil e intuitivo para quien no tiene conocimientos de programación web.
Recomiendo Firebug para editar tu sitio WordPress por dos motivos:
- Puedes probar cambios en el diseño antes de realizarlos. Ya vimos otras formas de hacer pruebas, pero esta es sencilla y segura.
- Puedes localizar fácilmente la ruta del fichero y linea donde tienes que realizar los cambios.
Firebug para WordPress. Domina tu CSS
El primer paso es instalar Firebug. Para ello ve a los siguientes enlaces según el navegador que uses.
Usando Firebug para modificar el CSS de tu sitio Web
Para activar Firebug haz clic en el icono con forma de insecto en tu barra de herramientas. Cuando esta desactivado sale en blanco y negro, y activado sale en color.
También puedes hacer clic derecho encima del elemento que quieres «investigar» y hacer clic en «Inspeccionar elemento con Firebug«.
Se abrirá una ventana anclada a la parte inferior donde por defecto se muestra el código html de la web, y a la derecha el estilo CSS que se esta aplicando.
Según nos vayamos moviendo por distintos elementos, podemos ver como cambia la ventana de Estilo.
Ahora puedes ir desplegando y viendo los distintos elementos html que componen tu web y que estilo se aplica a cada uno.
Otra forma rápida una vez activo Firebug es hacer clic en el botón inspeccionar elemento.
En la pestaña de Estilo no solo veremos el estilo que se aplica, si no la ruta del fichero y en que linea, y podremos modificarlo.
- Para modificar haz doble clic en el estilo.
- Tambien podemos desactivarlo totalmente haciendo clic en el prohibido rojo.
- O añadir nuevos estilos. pulsando Intro o Tabular.
Y todos estos cambios los iremos viendo en tiempo real en nuestra web, y así veremos como «queda», o si los cambios que hacemos afectan a más de un elemento (suele pasar).
Pero recuerda: estos cambios no serán guardados. Actualiza la página y se perderán.
Los que queramos realizar los vamos apuntando, y cuando estemos seguros podremos modificar el fichero correspondiente.
También podemos usar otros métodos para realizar estos cambios, incluso más aconsejables, pero… ¿no os lo voy a contar todo ahora, no?
Mejor os lo enseño en vídeo.
Para saber más
Si quieres saber más, puedes ver este curso de CSS de Desarrollo Web.
Además tienes información sobre Firebug en su Wiki
O este vídeo de introducción (¿que tal se te da el ingles?).
Mi experiencia personal
Yo lo he usado mucho para eliminar huecos que no me gustaban, espacios, interlineados, o averiguar que código de color usa por ejemplo una web.
Por ejemplo si te gusta como alguien ha diseñado sus menús de categorías, o su formulario de suscripción puedes ver que código CSS ha usado y aplicarlo tu dándole tu toque personal.
¿Te ha parecido útil? ¿Que usos le darías?
