So by now you should have Firefox successfully installed, if not, please go back and read part one of this tutorial on how to install Fireofx and Firebug, click here.
Okay Wes, I Have Firebug, What Can I Do Now?
Well you savvy business owner, what you can do now is look at the code in your site, take a peek behind the scenes so to speak and even see what changes you need to make.
For example:
We recently added a new footer section to our Wordpress web site. The site used to only have three footer sections and were now squeezing four into that space. The theme we use has too much padding, I don’t like how it looks now, but I need the extra footer area, so what can we do. Let’s take a look.
image - 03
Above in image -03, you can see our site with Firebug running (bottom half). The window in Firebug on the left is our web site HTML code. The window on the right is our web sites style sheet, or CSS code. Each section of CSS even shows you what CSS file it comes from (blue text on the far right, styles.css for example).
Okay, so see how much padding each footer area has below (red areas we have marked below in image - 04).
image - 04
We need to know what CSS element controls this area, or… padding. To see it in Firebug, what we need to do is use the inspect tool. This is the second tool from the left in your Firebug tool bar, check it out below in image - 05.
Step 01
To the left, we have selected the inspect tool shown in image - 05 and we are going to play with it a little, looking at what it can do. Select the tool then use your cursor and just move it over the web page above the firebug window seeing what turns blue and what gets highlighted. Play with this a little, you can’t hurt anything. Any changes made here are simply visible to you only, again this tool is a testing tool, remember.
Step 02
Below, again marked by the (1.) we turn on the ‘Inspect Tool’, then we use the mouse (not shown) to move OVER the page and highlight the second footer area of our Wordpress web page (marked by the 2. On the image below). Lastly, we look at the style sheet code or CSS code that Firebug shows that controls this part of the page.
image - 06
Step 03
So what we see here is that the code that is controlling the “Yellow” area above is in the CSS code on the right side of the Firebug screen, shown below in image - 07.
image - 07
So let’s play a little with the “margin-left” setting. Why that setting? Well if you look above at image 06, you see the yellow area? That’s Firebug showing you the different elements of that code, one being the margin, the other being the width. I know that’s not obvious, but once you play with Firebug more it will be easier to see these things.
The Great Thing About Firebug
Okay so here is the awesome thing about Firebug, take a look at the image below.
Image - 08
Let’s start with item # 1 in the image above, the cancel or block icon, see it? It is the small round circle with the slash through it in grey. As you mouse over the different elements on the right, you will see this icon appear next to each line. If you click on the cancel icon (it will turn red), it essentially removes that line of code from the CSS string. This can be VERY handy in locating problems, or just figuring out which line of code you need to adjust.
When you do this, you will actually SEE the web page above CHANGE! That’s right, making changes in Firebug actually shows you in real time what your changes will look like or affect on the web site. Don’t worry; these changes are only visible to you. Remember you are not actually editing the file…. yet. If you like the changes, you can commit them to the web site by adjusting the file in which that code resides. This is again, the blue text to the right of the CSS element, in this case above, styles.css.
Note: If you put your mouse over the blue text or file name of the CSS file, Firebug will display the entire location of the CSS file for you, so you can open that file in an external editor if you like and make the changes you have created.
Making Changes - Summary
image - 09
So let’s adjust the margin-left setting from 60px to say, 20px. To do this you double click on the ‘60px’ above and Firebug will allow you to change it. Be sure to keep all the syntax in place, that means the format has to stay the same, see below.
“ELEMENT NAME” then “ : “ “ATTRIBUTE” then “;”
margin-left: 60px;
Okay the change to 20px works well, and I think looks great. The next thing we have to adjust is the width of all the footer sections, all four of them. This is controlled by the width tag above under footer-fourth. Looks like 222 would be the widest we can go without causing some spacing issues.
Once we have made these changes and played a little more with Firebug we get the rest of the issues worked out that also changes with the initial changes we have made. But Firebug saved the day making these changes a breeze to manage and implement.
Can Firebug look at other web sites besides mine?
Sure! Does your competitor have a cool web site feature or function and you want to see how it works or view code behind it? Simply use Firefox to navigate to your competitor’s page, turn on Firebug and mouse over the feature you want to see the code behind, it is that easy.
image - 10
When you are done with Firebug, just like with any window, you have a Minimize button, the dash (left red button), the Maximize button (middle red button) and the Close button (right red button). To close the window, simply click on the red ‘power’ button or the far right red button shown above.
If you have any issues with Firebug, please feel free to contact us here. If you would like a FREE consultation regarding web development, or SEO for your web site, please do contact us here, or feel free to call us at, 214-449-0488.
Hope you enjoyed the tutorial blog post and hope it helped you save some time on your next web site tweak.
.......................................
WB Consulting is a Web Design company servicing the Collin County area specializing in Web Design, Search Engine Optimization, Mobile Web Design, Marketing, Social Marketing and Video Production. Want to know more about WB Consulting, visit our web site at www.webservicesdfw.com or contact us today at 214-449-0488.
Comments(0)