firefox web design tools

Last modified by mediacrea on Wed, June 18, 2008 18:23
Source|Old Revisions  |  Back To Group

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.

FIRST STEP : Download firefox and some plugins

Firt of all you needs to download firefox. The new version is avaiable :

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).

Firebug is an other tool to help you to debug, it can be useful when you want to edit html online or javascript

Colorzilla is a tool for picking color on all graphics you can have on your browser

SECOND STEP : Using web developer bar

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.


Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs