¿Te gustaría hacer algunos cambios en el diseño de tu sitio?, tal vez cambiar el tamaño de la letra, cambiar algunos colores, etc. Puedes realizar estos cambios con la ayuda del inspector de código de tu navegador y aplicando CSS.
Generalidades
El inspector de código es una herramienta para desarrolladores que viene integrada en los navegadores modernos como Firefox y Google Chrome. Tienes varias formas de abrir el inspector de código, una de mis favoritas es con el acceso por teclas.
- En Mac y Linux: Cmd + Opción + i
- En Windows : Ctrl + Shift + i
Modificaciones CSS usando el inspector de código
El inspector de código tiene varias opciones, sin embargo como herramienta de ayuda para modificar CSS usarás básicamente las opciones de:
- Inspector y Editor de estilos – Firefox
- Elementos y Fuentes – Google Chrome
– Localizando elemento a modificar
Con el ícono de flecha seleccionado, puedes ubicar el elemento de tu página que quieres modificar, verás que se marcará con un fondo diferente y adicionalmente en la parte inferior se seleccionará el código HTML que genera este elemento.
En la siguiente imagen hemos seleccionado el link «Hola mundo» del menú.
Si seleccionas algún elemento, en la parte derecha aparecen las reglas CSS aplicadas al elemento, puedes ver también las pseudo clases CSS, como :hover, :active y :focus
En la imagen anterior puedes ver las clases CSS y el archivo y línea de código en la que se encuentra esa clase, en algunos casos (líneas verdes) las clases no se encuentran en un archivo CSS específico, sino o bien son estilos aplicados en línea sobre el elemento HTML específico, o bien son elementos en línea como parte del documento HTML.
– Realizando los cambios en el Inspector de Código
El inspector de código te ayudará a localizar las clases aplicadas sobre un elemento y qué atributo debes cambiar o agregar. Sin embargo una buena práctica es no modificar directamente esas clases, sino sobrescribir la clases ya sea al final del archivo, o mejor aún, en el caso de WordPress, en el archivo style.css de un child-theme. Es en este punto en donde el tab de Editor de estilos o fuentes, te puede ayudar.
En Firefox verás directamente los archivos .css que carga tu sitio web, y los estilos en línea que están siendo aplicados. En el caso de los archivos puedes averiguar la ruta de los mismos haciendo click con el botón alterno del mouse y abriéndolos en otra pantalla.
En Google Chrome verás que se organizan los estilos cargados por el dominio de origen, en tu caso te interesa los archivos CSS que carga tu dominio, si navegas en las carpetas podrás ubicar el archivo CSS, para averiguar la ruta tienes la opción de hacer click con el botón alterno, verás que tienes una opción muy útil de copiar enlace.
Guardando los cambios de manera permanente
Sin embargo el código que colocaste en el inspector de código es temporal, para hacer que estos cambios se guarden de manera permanente tienes que agregar estos cambios directamente en tu archivo.
Para editar el archivo tienes varias opciones:
- Desde el propio WordPress en: Apariencia > Editor
- Usando algún cliente FTP, localizar el archivo y editar
- Desde el Administrador de Archivos de tu Cpanel
En la siguiente imagen puedes ver la pantalla que aparece cuando usas la opción de WordPress: Apariencia > Editor.
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.
Artículos Relacionados
(5 votos, promedio: 5,00 de 5)
Cargando…