How to install and use the extension

Introduction

By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action. Follow the instructions below to get started.

Installing the extension

Pixel Perfect requires Firefox version 3.0.*, and the latest version of Firebug. To install the Pixel Perfect Extension on Firefox:

* You can also download the extension from the Mozilla Add-ons site here.

Using the Pixel Perfect panel

Load up a sample website that you would like to test the plugin on and click on the icon to launch the Pixel Perfect panel.

Add overlay

To load your design compositions into the overlay list click the "Add overlay" button. A standard file browser will appear and you may select any standard graphic format that can be loaded into a regular XHTML page (jpg, png, etc). You can add as many overlay files as you like.

Overlay List

Click on the square box located to the left of your overlay icon to toggle the overlay on. The overlay should now appear in the main browser window. By default, the overlay is positioned to absolute top left. You can delete any overlay by clicking on the trash can located to the right of the overlay icon.

Opacity

You can change the opacity to make your composition either more transparent or less transparent. Making the composition more transparent will allow you to see your changes on the actual developed HTML below the composition. Less transparency is useful for toggling the composition on and off to see pixel shifts. By default the opacity will be set to 0.5.

Position

The move controls are intended to be used for fine tuning. Initially when you toggle the overlay on, you can click and drag the overlay to roughly position it overtop of your developed HTML. Use the move controls to move the overlay those last few pixels.

Options menu

Here you will find various configuration options. Currently there are two:

Hide statusbar info - Selecting this option will hide the Pixel Perfect icon in the status bar. This can be useful if you have many plugins installed and your status bar is getting cluttered. You can then access Pixel Perfect by clicking the Firebug icon.

Hide overlay when inspecting - By default, your overlay will become invisible when you switch to a Firebug tab (ie: HTML view). This allows you to inspect your HTML and make changes without having the overlay block inspection. However, you can keep the overlay on at all times by turning this option off. This can be useful but it may cause problems when inspecting HTML with Firebug. Your overlay could prevent you from mousing over your HTML elements.

Demonstration

Watch the video below for a quick demonstration on how we used Pixel Perfect to correct layout issues when developing www.pixelperfectplugin.com.