Otra herramienta de Firebug es Inspeccionar, como su nombre lo indica, esta te permite navegar un sitio web y conocer como esta configurado y como esta relacionado con otros elementos.
Esta herramienta puede ayudar a cualquiera a modificar una plantilla, sea de Blogger o de WordPress, sin mayor dificultad.
Este tutorial mostrara básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades.
En la plantilla de Blogger el CSS esta dentro de la misma plantilla, entre los códigos
<b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.Como Modificar el CSS de un elemento con Firebug.
Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más rapida y completal.
2. Dale clic en el botón de Firebug en la barra de herramientas
, luego en el botón de Inspeccionar 
y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.
Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.
Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).
Aquellas propiedades que aparezcan tachadas, significa que otra reglas de CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.
4. Las Pruebas en vivo.
Firebug puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.
Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.
Y muy similar para los valores numéricos:
Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.
Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad
background o background-image.
Y hay otras varias herramientas que pueden ver directamente en el manual oficial.
5. Usando los datos de las pruebas.
Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.
En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.
0 comentarios:
Publicar un comentario