Foto 0 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.
Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.
Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En 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.
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 completa y rápida, pero a ambas aplica el contenido de este tutorial.
2. Dar 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).
Foto 3 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.
4. Pruebas en vivo.
Algo muy interesante de Firebug es que 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.
Foto 4 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
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.
Foto 5 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
Y muy similar para los valores numéricos:
Foto 6 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
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.
Foto 7 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
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.
Foto 8 en Modificar plantillas Blogger y WordPress facilmente con Firebug: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
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.
Screencast
Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.
Conclusión
Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.
Leído 1 veces
| 
Hola, Invitado
En línea: 137 visitantes
Por Francisco
+ fotos
Esta es una pregunta muy frecuente entre los que inician a personalizar el diseño de su blog en Blogger:
¿Hay un programa para modificar plantillas Blogger?
Desafortunadamente la respuesta es no. Al menos no, un programa enfocado a modificar plantillas Blogger, la razón es que las plantillas de Blogger usan XML, un lenguaje flexible, pero dependiente [...] [..] 
