Customizing Blogger templates easily with Firebug
Customize a template is one of the first challenges for those who start a blog. To do this, nothing can save us of learning the basics of HTML and CSS, but there are some tools that can make this easier, as Firebug, a extension for Firefox and Chrome.
One of the simplest tools, but also more useful, in Firebug is Inspected, as its name implies, lets you navigate through each element of a website and know how it is configured and related to other elements.
This little guide will focus mainly on modifying the CSS code to adapt a design to our needs. CSS in Blogger is within the same template, between the codes
Customizing the CSS of a web element with Firebug.
To customize any feature of a web element from a Blogger template you simply:
2. Click the button for Firebug in the toolbar , then click the button to Inspect and place the cursor right over the element to customize, it can be text, image, video, flash or anything, and click on it.
3. In the right Firebug panel, with the tab “style” active, shows all the styles that affect the element.
Styles are shown as a CSS style sheet, however, Firebug, sort and standardized the properties alphabetically.
It’s easy to recognize the following information: selectors, properties and the CSS rule location (code line and file that contains it).
4. Live tests.
Something very interesting of Firebug is that you can modify any CSS property and see the results directly applied on the page. You only need to click on the property or value to change it and see what happens directly on the page.
For properties that can only take certain values, Firebug lets explore them just clicking on the value and use the up and down keys of the keyboard.
And in the same way for numeric values:
Another really useful option is to disable the properties to see how an element behaves without them, simply click on the red circle to the left of each property.
Find the background image of an element is also useful when you are customizing a template, for it is only necessary to be placed on the element, clicking, and the panel of “Style” will appear the selector that contains the image, usually in property
Once you know you’ve come to the desired result in the tests, you need to apply those same changes to the styles in your template. Firebug saves never the changes, you should make this part of your hand.
In other words, if you’ve added a property in Firebug, you should add that same property to your CSS code, if you’ve made a modification, it must be done in the styles of your template.
With this introduction, you can see Firebug in action in the official screencast.
Firebug is a very intuitively tool, so some recommendations: Try and try, you will learn a lot about CSS and the tool itself, but without the risk of affecting your design. Read the official guide, where you can learn to take better advantage of the extension. And finally, learn at least basic CSS and HTML, it will make any design task less frustrating.