Who and what is it for?

The skin Design tab is frequently used by almost all Favorez users to set colors, fonts etc. for the pages they create. The Design tab can be found in the skin Properties dialog box, it is the third tab at the top. However, this help topic is targeted at skin developers only. It is suggested that you read through the Skin Developer Tutorial first before reading about the Design tab.

How does it work?

The Favorez Design tab resource file named skintab.rc lets you as a skin developer define your own Favorez tags. Any tag you define in the skintab.rc file will appear to a Favorez end user as a setting in the Design tab. The skintab.rc file may contain plain text only, it can be created and edited with Windows Notepad. The Design tab in the skin Properties dialog box will be visible if there is a skintab.rc file in your skin folder (even if the skintab.rc file is still empty).

Skintab format

A line in the skintab.rc file represents one Favorez tag except for empty lines and lines that start with the word SPACE. Each line may contain several statements seperated by vertical bars: |. The first word on a line denotes the type of value concerned, the second word is the name of your tag (without the enclosing braces).

Tag types

You can have any of the following types of tags in your skintab.rc file:

COLOR

This type of tag is used to let end users customize a specific color of your skin.

In the example above the first word denotes the type of a tag: COLOR. The second word COLOR_BG is a custom tag, it could have had any name. The tag can be used in your index.tpl file but with the enclosing braces: {COLOR_BG}. The third statement contains a description used by the Design tab.

Note

All statements must end with a vertical bar, including the last statement on the line.

TEXT

This type of tag is used to let end users enter an arbitrary line of text that should be inserted into the web page produced by your skin.

Again the second word is your custom tag, here it is named MENU_TITLE. Insert the {MENU_TITLE} tag anywhere in your index.tpl file and it will be replaced with the text an end user enters in the corresponding edit box that will appear on the Design tab after "Title".

NUMBER

This type of tag is used to let end users specify a number to be used in your skin. Such a number could be inserted in a JavaScript embedded in your index.tpl file. Or you can use it to let the user specify the panel width in a frames page. These are just examples of course, use numbers as you see fit.

Above you see two examples for the NUMBER type. The first example enables the user to enter any number between zero and 400. In the second example both numbers for minimum and maximum values allowed are prefixed with a "-" and "+" sign. If you prefix the second number (for maximum value) Favorez will also prefix the number that will be inserted into your index.tpl file. Using signs for numbers you can specify relative font size in HTML e.g.: <font size="{FONT_SIZE}"> is replaced with <font size="+3">.

LIST

This type of tag is used to let end users select an option from a drop down list, where each option is associated with a fixed value.

In this example we define a tag named FONT_FACE. The third argument indicates the number of items in the resulting drop down list. The fourth and fifth argument define the first item in the list. "Arial" is the name of the item and "Arial, sans-serif" is the value that will be inserted. The sixth and seventh argument define the second item in the list. You can define any number of items.

Note

The values defined in your drop down list must be unique. You may specify an "empty value" by typing vertical bars only for the value that should be inserted. This can be used to give the end user the option to either include some HTML code or remove it entirely. Look up the tag named EXPAND_COLLAPSE in the skintab.rc file of the My Favorites standard skin to see how this is used.

COMBO

This type of tag is a combination of LIST and TEXT. The COMBO type is used to create a simple list of values. The list also allows the user to enter yet other new values.

Just as for the LIST type the third argument indicates the number of values in the list. "op_blue.png" is the first value in the list.

Note

In the example for COMBO each value in the list starts with "op_". This prefix indicates that these are optional files which should only be copied to the skin output folder when they are actually selected by the end user.

SPACE

The type SPACE does not really define a tag at all, it is a special word that may help to improve the layout of your Design tab. Favorez automatically layouts your items in the Design tab. SPACE gives you some control over the layout.

In this example an empty line is inserted after "Background color" in the Design tab. As you can see the third line includes a second argument named Font. This optional argument can be used to simply print text in the Design tab.

Note

There is no limit to the number of tags you define, but be reasonable!