Welcome to the second part of the quest for beautiful add-ons for the Mozilla Firefox browser!
Before you read this post, please be so kind to read the post I wrote on Sunday, about Professor X and the Pleasure of Firefox Add-ons and about the basics of Mozilla Firefox and my discovery of add-ons.
You might remember that I found this beautiful list of the ‘25 Time Saving Mozilla Firefox Addons for Web Designers and Developers’ from the CrazyLeaf web design blog.
I already presented Professor X to you, a lovely tool to have a glance behind the source code of a website without confusing you with too much details and too foreign HTML commands.
Now, I want to show you other gorgeous add-ons which will help you to understand webdesign and even enable you to change the settings.
And here comes the infamous ‘Firebug’ into existence.
It is said to be able to modify images via CSS and one can change the HTML and therefore, also the design of the website.
Whe you have started Firefox again, you will have Firebug and the little Firebug icon in the menu section ‘Tools’.
Also, you have different options to use your Firebug.
You now have the posibility to display the add-on bar as small line underneath your browers window. That way you can open the Firebug display whenever you want it.
I played a little bit with the different menue bars in Firefox, and decided to remove the bookmark bar and employ the add-on bar. To change these settings, you need to go to ‘View’ and then to ‘Symbol bars’.
Only with changing the little ticks in front of the different bars, you can turn your Firefox window into something completly different!
Now what can you do with Firebug?
Well… I might be geeking out a little bit and I have to admit that while writing this post I was talking with my friends via Facebook and they can defininitly tell you that I went crazy like mad, because I loved using Firebug.
I was literally squeeing so hard and clapping my hands together that my mother asked me what was wrong.
Now, before I could go crazy and knew how to use Firebug, I had to search for tutorials that would explain, how this application was working.
Her post gave me the most important things to know, after which followed my own research.
She is telling her pupils, that the best thing when trying out Firebug, is searching for a website with few pictures and few videos.
I decided to use Wikipedia.
Now, you can search for any article you like. Because I am a movie geek I searched for the X-Men movies , in order to keep my topic from my first post. 😀
When you have your favourite Wikipedia article in front of you, you can either click on the little Firebug icon on the right hand side corner of your add-on bar or you can go to ‘tools’ and put your cursor over the term Firebug; then you can click ‘open Firebug’.
I found that out by playing around a little bit, so don’t be afraid to play with the settings as well.
After opening Firebug, you will have the Firebug interface in the lower part of your window:
On the right hand side, you have different options to get information about the programming code of the website. I tried to find out the meaning of them by myself to understand them better. Feel free to search for tutorials, if you feel that my following explanations are not accurate enough.
You will find the headers for ‘Style’, where things like the background colour and the font type are shown, the header ‘Computed’ where you will find a table with the most important parts of the website, like text, background or layout and the corresponding values. The other two headers are ‘Layout’ and ‘DOM’. Layout is quite self explicatory and DOM is a thing which I already encoundered in computer science at school. It is a programming language- independent convention that can be used in different platforms, to change elements within the used programming language.
The left hand side, however, is where the fun begins.
Like on the right hand side, there are different sections, the two most important ones being HTML and CSS, so we can have the basic building blog in the form of HTML and a formating and layout tool in the form of CSS.
Let the show begin!
The only thing that I learnt from Martha Burtis’ blog was that I had to right-click on any element on the page and clock ‘Inspect Element’ (or in German ‘Element untersuchen’.)
And then my own personal research began and I have to tell you, it was soo much fun!
Click on the text and chose ‘Inspect Element’. After some trying, I found out that ones has to put the cursor over the left side of the Firebug interface. When doing this very slowly, you will see that the real text on the webside is changing its colour.
Look at this example:
When you have your cursor on the space, which highlights the part of the text you want to change, click right and chose ‘edit HTML’ or in German ‘ HTML bearbeiten…’.
The window will open to reveal the HTML structure of the text. Now, you can clearly see what HTML command matches which element in the text and you can of course also edit words.
After I discovered that, I sent my friends on Facebook pictures of Wikipedia pages from their favourite actors or singers, where I included them as spouses of the respective persons.
And THIS is where the geekiness starts….
I wanted to be the wife of Chris Pine (yummy) , my favourite actor, so I searched for his wikipedia article and went to work.
As before, click on the little box, which is always in the right center of an wikipedia article about famous people and which shows a picture and describes the date of birth and the current occupation.
Do as I explained earlier and add the little section of Spouse underneath the section Years Active.
Take some time and play with it.
Look at the HTML code to see what commands you have to add.
See the difference?
Awesome, right? Professor X would be proud!
Sadly, Firebug does not save the settings (:D). When refreshing the page, they are gone.
But wasn’t that fun??
You might want to check out more thing you can do with Firebug, like changing images and editing content. This way, you will not only have tremendous fun, but also learn how to programme with HTML and create a beautiful website!
Hopefully you have learnt as much as I did. Excuse me, for not including as many links as normal, but I did most of the research on my own!
Now, I’m off, playing with Firebug!