Сторінки, які містять частини Flexible Skin:

Для перегляду (skin=flexible):

• Flexible Skin Style Sheet

• Flexible Skin Top Bar

• Flexible Skin Bottom Bar

• Flexible Skin Left Bar

• Flexible Skin Right Bar?

• Flexible Skin Topic Header?

• Flexible Skin Topic Footer?

Для друку (skin=flexibleprint):

• Flexible Skin Printing Header?

• Flexible Skin Printing Footer?

Приклади

Меню: File->Open

Клавіші: Yes No Cancel

Примітки: N Note text  !  Note text  !  Note text  !  Note text Увага Note text

Comments about design, bugs and other implementation stuff about Flexible Skin must be put in Flexible Skin Dev?.

Variables

Flexible Skin uses some variables (at web level) to get some

• WEBTITLE : WEB's title(a name more descriptive that the web's name ...), that will be shown in the browser title bar, among other places ...
• WEBBGCOLOR : TWiki predefined variable, will be used to "paint" the menus, top and bottom bars, etc.

Special topics

These topics will serve as layout containers for the web: the content of each of them will be put at the final layout, each one in some predefined position. If the topic doesn't exist, no content will be put in that location of the layout.

When referencing the current topic being seen at the layout-part topic, remember to use the %INCLUDINGTOPIC% TWiki variable instead of %TOPIC%.

Let's see the defined special topics used by Flexible Skin ...

Flexible Skin Style Sheet

This topic will be printed at the HTML result of a page view, in the place reserved to that page's CSS stylesheet. It must contain a CSS stylesheet specification.

Is must begin and end with the verbatim tag (to prevent TWiki from putting HTML tags inside it), ant must have the STARTINCLUDE and the STOPINCLUDE directives, to prevent TWiki to put the verbatim tag in topics that are including Flexible Skin Style Sheet .

Example of the desired content of the Flexible Skin Style Sheet topic:

<verbatim>
%STARTINCLUDE%

/* CSS classes definition ... */

%STOPINCLUDE%
</verbatim>

Flexible Skin Left Bar

This topic will be included at the left side of the layout, as a left-menu. To change font, colors and other stuff you must set a CSS class at the Flexible Skin Style Sheet topic named TD.FlexibleSkinLeftBar .

Flexible Skin Left Bar

This topic will be included at the righ side of the layout, as a right-menu. To change font, colors and other stuff you must set a CSS class at the Flexible Skin Style Sheet topic named TD.FlexibleSkinLeftBar .

Flexible Skin Top Bar

This topic will be included at the top of the layout, as a top-menu. To change font, colors and other stuff you must set a CSS class at the Flexible Skin Style Sheet topic named TD.FlexibleSkinTopBar .

Flexible Skin Bottom Bar

This topic will be included at the bottom of the layout, as a bottom-menu. To change font, colors and other stuff you must set a CSS class at the Flexible Skin Style Sheet topic named TD.FlexibleSkinBottomBar .

Flexible Skin Topic Header?

This topic will be included at the begin of the current topic's content, as a page header. Is will use the same CSS style as the content of the topic, i.e., the CSS class TD.FlexibleSkinContent .

Flexible Skin Topic Footer?

This topic will be included at the end of the current topic's content, as a page footer. Is will use the same CSS style as the content of the topic, i.e., the CSS class TD.FlexibleSkinContent .

Flexible Skin Printing Header?

This topic will be included at the end of the current topic's content, as a page footer, when it is shown with the Flexible Skin's? 'printable' skin(add a ?skin=flexibleprint to the topic's URL). Is will use the same CSS style as the content of the topic, i.e., the CSS class TD.FlexibleSkinContent .

Flexible Skin Printing Footer?

This topic will be included at the end of the current topic's content, as a page footer, when it is shown with the Flexible Skin's? 'printable' skin(add a ?skin=flexibleprint to the topic's URL). Is will use the same CSS style as the content of the topic, i.e., the CSS class TD.FlexibleSkinContent .

Installing Flexible Skin

• download and unzip the Flexible Skin files package at TWiki directory
• if wanted, change the templates/messages.flexible.tmpl file to translate Flexible Skin to your language (see the avaliable messages files).

Setting up a web to use Flexible Skin

1. First of all, think about the layout you want ;
2. Set the variables used by Flexible Skin, except the SKIN variable;
3. Create/Edit the special topics that compose Flexible Skin, and test some topic (perhaps the WebHome topic), appending ?skin=flexible to it's URL, to see if your layout is getting nice.
4. When it looks pretty, change the SKIN web variable to flexible, and voil?.

Remarks:

• Flexible Skin doesn't include the topic controls(Edit, Attach, etc.) by default. Then, you must add the controls by yourself(or not, if you don't want them) to one of your special topics.

Avaliable Translated Messages

There will be avaliable translated messages file versions, look for them at the attchments list at the end of this topic.

To translate Flexible Skin, download the translated messages file, rename it to messages.flexible.tmpl, and put it in the place of that one in templates/ subdirectory of your TWiki installation directory.

Useful links

• Cascading Style Sheets, level 1 (CSS1) Specification - http://www.w3.org/TR/REC-CSS1
• Cascading Style Sheets, level 2 (CSS2) Specification - http://www.w3.org/TR/REC-CSS2

-- Antonio Terceiro? - 19 Sep 2002