Customize the gas-price widget by setting values that control, speed, size, color, and content. You can see how this is done by looking at the indented code lines for any widget.

For good luck, remember these rules:

1. Every value setting, e.g.  title = 2;  must end with a semicolon ( ; ).
2. Don’t add units such as px for pixels.
3. Optional comments should start with   //   and must end with a semicolon.
4. Don’t ever use a double quote ( ” ).
   1. E.g. Do NOT write  debtColor = “#990“

Here’s a complete list of parameters, an example setting them to their default value, and their allowed value ranges.

• tickRate = 40;                   // states per minute [ 0 — 80 ] ;
• width = 120;                     // width of widget box in pixels [ 80 — 500 ] ;
• height = 220;                    // height of widget box in pixels [ 50 — 700 ] ;
• fontPix = 11;                     // font size of most text in pixels [ 8 — 24 ] ;
• title = 1;                            // 1=> Gas Prices, 2=> Today’s Gas Prices ;
• titleBgClr = #135;             // title background color ;
• titleColor = #FFF;              // title color ;
• space = 1.3;                      // vertical spacing between lines [ 1 — 2 ] ;
• mainBgClr = #FFFDF0;      // background color of main box ;
• textColor = black;             // Color of all text but title, and today’s prices ;
• hideDate = 0;                    // don’t show the date [ 0, 1 ];
• hideWeek = 0;                  // don’t show week-ago data [ 0, 1 ];
• hideYear = 0;                    //  don’t show year-ago data [ 0, 1 ];
• hideEnter = 0;                  // don’t show the enter-state box [ 0, 1 ];
• todayColor = #C00;          // color of today’s prices;
• borderColor = #9AB;        // color of outer border;
• lineColor = #CCC;            // color of two separator hair-line; 

The best way to find exactly what parameter values do, is just to try them out.

There are very slight differences in line height between browsers, so heightmay need to be set 4 or 5 pixels higher for some widgets to show properly in FoxFire or Internet Explorer, than is needed in Chrome. If height is too small, the bottom border will not show.

In case you don’t know HTML colors, here’s a short lesson. Common color names usually work — black, white, yellow, red … But to get real control you need to use the red (R) – green (G) – Blue (B) color numbers. The short version works like this: 0 = black, 1,2,3,…9,A,B,C,D,E,F are increasingly bright. So #F00 is bright red, #0F0 is bright green, and #00F is bright blue.  #FFF is white and, #FF0 is Red-Green, which makes yellow.

The long version uses 2-digit color numbers, 00 is black, and FF is brightest. So #FF 00 00 is bright red, but write it as #FF0000. 

If you want two Gas Widgets on one page:

Change the two ID numbers in the second one to both be  2.  Like so:   id=”zf10_2″   and   ?id=2