The Utility consists of 2 modules, the first for generating a vanilla link list widget, and the other for rich-tailoring the widget according to your needs.

Let's suppose that you have not generated your widget previously using the Utility, and that you have not produced the widget normally in webProg3.

To begin creating your widget, you need to type up the raw data it needs in the Generator (Module 1), which consists of a text list, a corresponding list of links (URLs) for external web páges, and a third list of "new" or "same" browser tab options for the navigation pages.

Look at this example:

These lists are known as the "raw data".

The text list is typed into a textarea, so you cannot have underlined words. Instead, you need to indicate where the underlining should begin and end using HTML tags. (You can copy and paste these tags from those shown above the box, on the left and right.)

The underlined words will become linked to a URL that you specify in the box on the right of this one. In the current version of the Generator, you are only allowed to have ONE underlined stretch and consequently only ONE link for it. But of course you can include BLANK (EMPTY) lines in your list, as well as lines of text with NO UNDERLINES AT ALL (and consequently NO URLs associated with them).

The URLs to be associated to the underlined text in the list on the left can be ABSOLUTE, as shown above, or RELATIVE, with indication of sub-folders. You can even supply a simple FILE NAME, if the HTML file is in the same folder as the link list.

I assume you are already familiar with the rules of URL format. I believe I have expanded a bit on this subject elsewhere in the WP3 HELP.

In the examle above, all the linked web pages will be opened in the "same" browser TAB.

Type "new" here if you want a page to be opened in a separate TAB.

If you click on the "Show Preview" button, your vanilla link list widget will be compiled, and the coding for it will be displayed.

However, you do NOT NEED to click on this button in order to compile the widget: If you click on "Tailor & Save Widget", the app itself will click on the "Show Preview" button to do the compilation!

THE Show Preview BUTTON

THE Tailor & Save Widget BUTTON

Module 2 opens with a display of your vanilla widget plus a dialogue for adjusting the widget's dimensions and line-height.

You can always return to this dialogue by clicking on the "W H" button on the top-left side of the menu bar.

Note though, that adjustment of the widget dimensions (particularly the width) is only for display purposes here in the Module.

When you finally SAVE your widget, you will be given another opportunity to adjust the dimensions exactly as you need them.

This will open Module 2 of the app, and transfer your vanilla link-list widget to it.

Once there, if you are happy with a vanilla widget, you can saive it directly.

Check it carefully though. You may or may not require a border, the padding of the box might need increasing, and so on.

Otherwise, tailor the widget according to your needs, and then save it to file.

Since we are producing a PLAIN text and not a RICH one, whatever tailoring options you choose in the menu will be applied UNIVERSALLY throughout.

This new chooser has one or two things that the WP3 chooser does not have:

- A value for opacity is included in the choice.

- You can make colours using HSL.

Note the following:

- Regardless of how colours are chosen, they are saved to the widget in HEX.

- if you type in a HEX value (6 or 8 digits) as a CUSTOM COLOUR, this choice

will override whatever else is displayed as being chosen.

- The HEX value that will be saved when you click on the OK button is shown

in a box with a spring-green coloured background.

- If TRANSPARENT is required, it's in the first row of named colours on the

right.

You make your HSL colours by moving the 3 sliders of the picker.

If you are not too familiar with HSL, here are a few definitions to help you out:

WHITE = Whatever + 100% luminance

BLACK = Whatever + 0% luminance

To choose among the 98 shades of GREY available:

Set ANY HUE plus 0% SATURATION.

Move the LUMINANCE slider to choose the shade.

Before saving to file, you can finalise some settings if you have already decided what you need to later incorporate the widget in a WP3 Standard script. Otherwise, you can adjust these things manually afterwards:

Your choices for left and top will not be reflected in the display of the widget here, but the values will be included in the output script.

Click on the SAVE button to put the output file on disk.

It's basically a text, but it is given a suffix of ".htm" so that if you double-click on it, the widget will be displayed in your browser.

Here's an example of the content:

If you display the output file as described above, including the Google fonts here ensures that your widget is displayed correctly. It has no other usage.

To recap finally:

- When you need to update your widget in Module 1, you can input the entire previous output file in order to extract the raw data.

- If you have only the raw data in a text file, you can upload that too.

- If you have only the single line of HTML coding for a previously created link-list widget, you can also put that by itself into a text file and

upload it. The raw data required will then be deduced from it.

In this case, the uploaded widget will be displayed on the screen below the raw text editing boxes. You will see it if you scroll downwards.

This is the raw data used to generate your widget in Module 1.

If you upload this file to Module 1 later on, the raw data will be extracted from it automatically, and the rest of the file will be ignored. Thereafter, you can easily -re-edit the raw data and create an updated widget.