¿Su sitio se vería mejor si el logotipo se moviera cinco píxeles hacia la derecha o si tuviera un fondo azul? ¿Agregar un borde o sombras a las imágenes de sus publicaciones destacadas las haría parecer más? Los navegadores modernos, como Firefox, vienen con herramientas de desarrollo web que le permiten inspeccionar el funcionamiento interno de un sitio y realizar cambios sobre la marcha, siguiendo los resultados en tiempo real.

En este tutorial, aprenderá a utilizar las herramientas de desarrollo web de Firefox para editar cualquier sitio activo.

Notar: Este tutorial se aplica a la mayoría de los navegadores, incluidos Chrome, Opera y Safari.

Descubra las herramientas de desarrollo web

Firefox Web Developer Tools es un conjunto completo de herramientas, desde mostrar todos los elementos DOM hasta medir su velocidad. Para este tutorial, solo necesita las herramientas «Inspector» y «Editor de estilos».

Inicie Firefox y visite cualquiera / su sitio. En el menú de Firefox Burger (arriba a la derecha de forma predeterminada), elija «Desarrollador web -> Editor de estilo» o presione Cambiar + F7 combinación de teclado.

El panel de desarrollador web de Firefox aparecerá en un lado de su ventana, generalmente en la parte inferior. Puede cambiar su posición haciendo clic en el botón de tres puntos en la parte superior derecha del panel y eligiendo «Dock derecho / izquierdo» o «Ventana separada».

Notar: Este tutorial no le muestra cómo codificar HTML y CSS. Puede consultar los conceptos básicos aquí.

Control de artículos

Para afectar la apariencia de un artículo, debe poder identificarlo. Haga clic en el primer botón de su barra de herramientas o presione control + Cambiar + VS en el teclado para activar el modo de selección de elementos.

Mueva el mouse sobre el sitio para ver los diferentes elementos de la página web resaltada. Junto a ellos, verá su ID principal flotando en una ventana emergente.

Al hacer clic en un elemento, se seleccionará en la pestaña Inspector de las Herramientas para desarrolladores.

Cuando encuentre el elemento que desea editar, haga clic con el botón derecho en él en el Inspector de herramientas de desarrollo y seleccione en la ventana emergente que aparece: «Copiar -> Selector de CSS».

Iniciar edición en vivo

Con el selector de CSS del elemento copiado en el portapapeles, vuelva a la pestaña Editor de estilos de la ventana Herramientas del desarrollador. Haga clic en el botón «+» en la parte superior izquierda para «Crear y agregar una nueva hoja de estilo al documento».

Inserte el selector de CSS en la nueva hoja de estilo en blanco. Agrega un espacio, seguido de un par de paréntesis abiertos y cerrados.

En CSS, la apariencia de un elemento se define primero «dirigiéndolo» usando un identificador como este selector de CSS, luego agregando algunas reglas que afectan su apariencia, agrupadas entre llaves. Cualquier cosa entre los paréntesis de apertura y cierre afecta al «objetivo».

Por ejemplo, si agrega la siguiente regla:

display: none;

Esto ocultará el elemento en el que se utiliza. Esta es probablemente la forma más fácil de saber que está apuntando al elemento correcto en su página. Si desaparece, este es el que quieres, y puedes eliminar esta regla para probar otras. Si no es así, es hora de volver al Inspector y seleccionar algo diferente.

No le mostraremos cómo codificar CSS aquí, pero puede jugar con algunas de las reglas populares, como:

border: 2px solid rgba(255,0,0,0.5);
color: #333;
font-size:20px;

Notará que el elemento del sitio cambia a medida que agrega reglas a la hoja de estilo CSS.

Por último, tenga en cuenta que no se guarda nada. Si le gusta cómo se ven sus ediciones, copie el código en algún lugar, en un archivo TXT o en su aplicación favorita para tomar notas, para que usted o un diseñador / desarrollador puedan agregarlo a la hoja de estilo de su sitio para realizar cambios permanentes. Si necesita aprender más sobre CSS, consulte algunos juegos en línea que le ayudarán a dominar la habilidad.