Creating a custom theme for Net Usage

This article will provide a walkthrough on how to modify the netusage.svg file to create a custom theme for Net Usage.

In order to modify an SVG file we will first need a program to open the file, the program I use and recommend for this is Inkscape, a free and open source vector graphics editor.

This walkthrough is based upon the theme I created to extend the length of the usage bar as posted on this Whirlpool forum thread: http://forums.whirlpool.net.au/forum-replies.cfm?t=803008&p=37#r737.

1. In the Firefox location bar enter "about:netusage?theme" and press Enter.
   
2. When the Net Usage Theme Building Wizard page is displayed click the New/Open button and select or create a project directory.
3. A new file has now been created in this directory called netusage.svg; we open this file in Inkscape.
4. We can now see each element which makes up the Net Usage bar, to extend the length of the bar we first need to increase the size of the document. Click File > Document Properties on the menu bar of Inkscape, in the dialog box which appears we can increase the width of the document, I chose to increase this to 180 px however you can choose any width you wish, we can close this dialog box.
5. Now that we have increased the documents width we can resize the usage bar. Click on the dark grey border of the outer rectangle and then using the right hand side drag handle increase the width of the bar, now repeat this step for the inner rectangle.
6. Now we need to adjust the clipping of the usage bars themselves, to do this we need to open Inkscape's XML Editor (Shift+Ctrl+X) and take note of the inner rectangles new width (see screenshot), these figures may differ if the rectangles have been resized freehand. This width is what we must adjust our clipping by minus approx 1 px (the stroke width of the inner rectangle).
7. Enter this new clipping width minus approx 1 px and click set (see screenshot).
8. Now we can resize the usage bars themselves, don't forget to resize the green and blue bars to the left initially to expose the orange and yellow bars which represent usage over 100% of peak and off-peak quota respectively.
9. Move the percentage label over and save the file. The next step is to package the file using the wizard.
   
10. Click Load under the Test section of the wizard, if you are happy with your theme move to the next section of the wizard and fill in your theme package information, finally click Make Dist under section 5 of the wizard.
    
11. The final step is to zip the contents of the distribution folder using whatever zip program you wish, I use and recommend 7-Zip another free and open source program. Once zipped the file should be renamed to end with the file extension of .xpi.
    

Congratulations you have just created your own custom theme for Net Usage. Although this walkthrough only covered extending the length of the usage bar, any number of custom themes can be created by making additional modifications to the netusage.svg file, so get creative and see what you can come up with.