Magento

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/

The “web developer bar” is what I use the most of time. It integrates most of tools you need to know about a webpage (css, images, javascript, W3C validator, outline elements). https://addons.mozilla.org/en-US/firefox/addon/60

Firebug is an other tool to help you to debug, it can be useful when you want to edit html online or javascript https://addons.mozilla.org/en-US/firefox/addon/1843

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.