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 stylesheets 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 we want to change the toplink background color, we must click on the toplink zone, we can see the selected zone (red borders) and it tell us that we must modify the .toplinks-bar class.
Go to the “edit CSS” panel, and search for .toplinks-bar in the search field, we must select each tab for finding it, and when we found it (here in boxes.css) we can edit the background value (try background:red;), and that’s all.
We can save our changes and upload the CSS (there’s a save option). But where is the path to our css we just modify ?
Click on CSS button (in the webdeveloper bar) > view CSS. A tab will open with all css path with all css, so we must upload our CSS there on our server.
We can also activate ruler for knowing what dimension we mui