Inspecting elements using Firebug

Get familiar with the Firebug tool by clicking the mouse pointer icon. Now, take the mouse on any HTML element on the browser. We will see the selected HTML element on the left side and corresponding style and layout on the right side.

For example, let’s open our project on the browser. We will inspect its elements with Firebug.

1.  How to do it…

1. Click the Firebug icon on the
2. And then, click the mouse pointer icon of the Firebug
3. Move the mouse on the logo of our

We will see the corresponding HTML element on the left side of Firebug.

4. On the right side, we can see the corresponding style of the element by clicking the style We can edit the style values there and also examine the new one. We must remember that these editions are not permanent, so, we need to write the appropriate editions into our code.
5. Let’s do some adjustment of our Change the values of height and width of CSS style on the right side.
6. On hovering over any CSS style, you will see an off icon beside each If we select it, the selected style will be turned off. We can make it available by selecting it again.
7. We can change the padding and margin by selecting the layout
8. On the left side, we will select the logo Then, click on the edit button. Here, we can change the HTML properties also.

2.  There’s more…

We have shown only Firefox add-ons in this chapter. But there is Firebug lite, which can be used with many other versions.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.