Colorizer is a tool for fast prototyping HTML pages. It lets you change the color of your html elements in real time, thus saving developing time.
What you can do with Colorizer:
- Change text, background and border of individual html elements.
- Group elements together to change multiple elements' color in real time.
- Use it in any loaded HTML page.
What you cannot do with Colorizer:
- Colorizer is a tool for testing and prototyping; it will not edit your HTML files.
- Colorizer cannot be used with flash or inside iframes.
- At present Colorizer does not save your groups or preferences.
How to use Colorizer:
Note: for Firefox 4+ make sure the add-on bar is visible. View->Toolbars->Add-on bar.
1. Load any HTML page.
2. Start Colorizer by Clicking in its icon on the add-on bar ( status bar for older versions of Firefox).
3. Click any element of the page (the selected element will blink).
4. Use Colorizer's color picker to change the selected element's color.
Note: By default Colorizer selects the text inside the selected elements. To select the element's background click where is written background on Colorizer's interface.
1. To create a new group click + under the Groups menu.
2. Change the default name (new group) to whatever you what.
3. Press down the 'a' key in the keyboard.
4. Whilst 'a' is pressed every element you click will be part of the group.
5. Press down 'r' and click on any element you want to remove from the group.
6. Use the color picker to change the color of every element within the currently selected group.
1. Click on the panel below the color picker to display the color of previously selected elements.
2. Clicking on any of these color panels will transfer its color to the currently selected element.
Note: color history can be used to revert an element to a previous color.
1. 'show selected tag' will display the selected element's HTML tag in a pop up window.