Skip to: content, navigation

How to use the program

Program settings

The green column, on the right by default, has controls for the input and output of the generator program. Program settings are split into several groups:

Input configuration

paste generated config

You can paste in List-u-Like configuration data, to re-create and continue with a design you were previously working on.

The data is the form of a javascript object literal, but javascript support is not actually required to import it. Don't try to edit the data by hand - it must be in exactly the same format as the Output configuration (give or take some whitespace).

or select

Alternatively, you can select from a range of preset designs to begin with.

Control panel settings

demo image path

Uploading of images to the program itself is not supported, so if your navbar design includes image backgrounds, you will need to hotlink them from your own server while using the program. Use this setting to define the path.

This only defines the demo path, not the path which is eventually written into the output CSS - that value is defined separately using the code image path setting.

update onchange
This feature is only available in Opera 7+ or recent Mozilla browsers with scripting enabled

If this box is checked then the live demo will update after every change, effectively, clicking the Preview button for you.

But continual updating is very processor intensive - you may find the program unreasonably sluggish if you have this setting checked.

javascript validation
This feature is only available in Opera 7+ or recent Mozilla browsers with scripting enabled

If this box is checked then the design and program settings will be validated with javascript before updating, saving or generating output code.

The first illegal or empty value will give an alert with the details, then send focus to the element in question. The script will stop processing at that point, so it's not possible to generate invalid CSS or configuration data, if you use javascript validation.

PHP validation

If javascript validation is unsupported or unused then validation happens at the server. Errors are compiled and presented in a pink errors strip directly above the control panel form, laid out in a list, with links to the elements in question. The script continues to process, so it is possible to generate invalid CSS or configuration data.

Keep an eye out out for the pink errors strip, and don't use the generated code if it's there.

Color picker

swatch
This feature is only available in Opera 7+ or recent Mozilla browsers with scripting enabled

You can preview a range of color swatches to help you choose colors for your navbar. Thanks to bazz at Coding Forums for this idea :^D

There are swatches for VGA and websafe colors, plus two variants of the websafe palette simulating deuteranopic and tritanopic color blindness. There are also swatches with 120 shades each of: red, green, blue, purple, yellow, cyan, gray, orange/brown, crimson/magenta and aquamarine.

Each swatch is rendered as several rows of small colored squares, which you can mouseover or focus to see each color displayed. The color is displayed in a strip underneath the swatch, and its hex value written into the color field above it.

If you click or press enter on a color in the swatch, it will be saved to one of three slots next to the color field; mouseover or focus a saved color to see it displayed.

color

The color field is a textbox above the swatch, where the hex value of the selected color is shown. You can copy and paste these values into relevant design control fields, such as backgrounds, borders or link colors.

Font picker

font
This feature is only available in Opera 7+ or recent Mozilla browsers with scripting enabled

You can preview a range of fonts to help you choose suitable ones for your navbar.

The list is split into two groups - named and generic. The named list includes only fonts which are installed by default on both Windows (XP Home) and Macintosh (OS 10.3), but obviously there are no guarantees - when specifying fonts for your navbar you should always end with a generic.

The selected font is shown in a character map underneath the font controls. The map includes the letters A-Z, numbers 0-9, and a selection of diacritic and special characters; they might not all be there for everyone, because I can't render them using entities.

bold

Add boldness to the preview font.

italic

Italicise the preview font.

decoration

Add text-decoration to the preview font.

Output settings

code image path

If your navbar design includes image backgrounds you will need to specify a path to the image folder, to be written into the output CSS and configuration data.

Whether to specify an absolute or relative path is up to, and will depend upon how your site is built; remember that relative paths in CSS are from the location of the style sheet, not the page.

The code image path is separate from the demo image path used for previewing images in the program itself.

navbar class name

Specify the class name for your navigation list, to be written into the output CSS. The class name can contain letters, numbers, dashes or underscores, and must begin with a letter.

fonts and colors separately
This feature is only available in Opera 7+ or recent Mozilla browsers with scripting enabled

If you check this box then the output CSS will be split into two groups of styles - one for font and color information, and one for all other rules.

add whitespace for readability

If this box is checked then the the generator will add extra tabs and line-breaks into the output CSS, to make it more readable; this will obviously increase the output file size.

If unchecked then the CSS will be generated with minimal whitespace - a single line-break after each complete rule, to keep the output file size to a practical minimum.

Output CSS

In Opera or Mozilla with scripting enabled, there are two textareas for output CSS. By default, all the style rules are output together into the uppermost area. But if you've checked the fonts and colors separately option, the rules will be split between the two areas - the bottom one containing font and color rules, and the top one all other rules.

Otherwise, there's a single textarea for output CSS (the fonts and colors separately option is not available).

Output configuration

The final area outputs configuration data for your design, in the form of a javascript object-literal. You don't need this data on your page - it's only for pasting back into the program to re-create a previous design and continue working on it.

I recommend keeping configuration data for all your designs together, in something like a text file or XML document. Don't try to edit the data by hand - the Input configuration needs it to be in exactly the same format (give or take some whitespace).