firefox web design tools
This is an old revision of the document!
Firefox is the first application that can help you for designing a web page. Firefox is a W3C compliant browser. You will need to install some additional plugin.
Firt of all you needs to download firefox. The new version is avaiable : http://www.mozilla.com/en-US/
Colorzilla is a tool for picking color on all graphics you can have on your browser https://addons.mozilla.org/en-US/firefox/addon/271
Web developer can help you to identify how your page is composed, essentially for tracking your div’s and CSS classes used on your theme and apply some tunes before integrate on the CSS pages.
So first of all, go to CSS button > edit CSS. You have now all CSS stylesheet used on your page.
Now we can modify in line and look in realtime the css modifications, but we need to know what id or class we must modify.
Go to Information > display element information, so now we can choose the element we want to change.
For example, if I want to change the toplink background color, I must click on the toplink zone, I can see the selected zone (red borders) and it tell me that I must modify the .toplinks-bar class.
Go to the “edit CSS” panel, and search for .toplinks-bar, you must select each tab for finding it, and when you find it (here in boxes.css) you can edit the background value (try background:red;), and that’s all.
You can save your change and upload the CSS. But where is the path to my css ?
Click on CSS button (in the webdeveloper bar) > view CSS. A tab will open with all css path with all css, so you must upload your CSS there on your server.