TWiki > TWiki > WebHome? > FlexibleSkin	TWiki webs: Main | TWiki | Plugins | Sandbox | Patterns
	TWiki . { Home | Welcome | Register | Changes | Topics | Index | Search | Go }

FlexibleSkin: A flexible skin to TWiki.

Goals

This project aims to build a flexible Skin to TWiki ...

• making possible to change the look of a web simply by adding/removing/editing some special topics in the web, or changing the value of some special web-level variables;
• making easier the task of translating the TWiki layout to other languages;

Comments about design, bugs and other implementation stuff about FlexibleSkin must be put in FlexibleSkinDev?.

Variables

FlexibleSkin uses some variables (at global level -- -- for using FlexibleSkin globally, or at web level for using it on some web) to get some information for displaying. They are:

• 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 top and bottom bars in the default FlexibleSkin global layout. You can use it in your own layouts, to make possible to change the overall color for yout layout only changing this variable.

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 FlexibleSkin ...

FlexibleSkinStyleSheet

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 FlexibleSkinStyleSheet .

Example of the desired content of the FlexibleSkinStyleSheet topic:

<verbatim>
%STARTINCLUDE%

/* CSS classes definition ... */

%STOPINCLUDE%
</verbatim>

FlexibleSkinLeftBar?

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 FlexibleSkinStyleSheet topic named TD.WebLeftBar .

FlexibleSkinRightBar?

This topic will be included at the right side of the layout, as a right-menu. To change font, colors and other stuff you must set a CSS class at the FlexibleSkinStyleSheet topic named TD.WebRightBar .

FlexibleSkinTopBar

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 FlexibleSkinStyleSheet topic named TD.WebTopBar .

FlexibleSkinBottomBar

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 FlexibleSkinStyleSheet topic named TD.WebBottomBar .

FlexibleSkinTopicHeader?

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

FlexibleSkinTopicFooter?

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

FlexibleSkinPrintingHeader

This topic will be included at the end of the current topic's content, as a page footer, when it is shown with the FlexibleSkin's 'printable' skin(add a ?skin=globalFlexibleprint to the topic's URL if using FlexibleSkin globally, or ?skin=flexibleprint if using locally on some web). It will use the same CSS style as the content of the topic, i.e., the CSS class TD.WebContent .

FlexibleSkinPrintingFooter

This topic will be included at the end of the current topic's content, as a page footer, when it is shown with the FlexibleSkin's 'printable' skin(add a ?skin=globalFlexibleprint to the topic's URL if using FlexibleSkin globally, or ?skin=flexibleprint if using locally on some web). It will use the same CSS style as the content of the topic, i.e., the CSS class TD.WebContent .

Installing FlexibleSkin

• download and unzip the FlexibleSkin files package at TWiki directory
• if wanted, change the templates/messages.flexible.tmpl file to translate FlexibleSkin to your language (see the avaliable messages files, and contribute with one translated to another languages!).

Using Flexible Skin

Using FlexibleSkin globally with TWiki

If you want a flexible layout for your TWiki installation, and want it to be applied to all your webs, you can use this feature to do that. The instructions to do this setup are below.

Choosing this option will make FlexibleSkin get the layout topics and the variables used by it from the TWiki web. FlexibleSkin provides default layout topics in the TWiki web, trying to mimic the default TWiki skin, but you can change them -- add the other possible layout topics -- if you want. The default topics are:

• TWiki.FlexibleSkinTopBar
• TWiki.FlexibleSkinBottomBar
• TWiki.FlexibleSkinStyleSheet
• TWiki.FlexibleSkinPrintingHeader
• TWiki.FlexibleSkinPrintingFooter

Using FlexibleSkin locally on one web

This choice will apply FlexibleSkin to one specific, overriding the global SKIN variable and global layout topics. FlexibleSkin will get the layout topics and variables used by it from the web where you use this option.

Setting FlexibleSkin up

1. First of all, think about the layout you want ;-) ;
2. Set the variables used by FlexibleSkin, except the SKIN variable ...
   • ... in TWiki.TWikiPreferences, for using FlexibleSkin globally, or
   • ... in WebPreferences, for using FlexibleSkin locally on some web.
3. Create/Edit the special topics that compose FlexibleSkin ...
   • ... in the TWiki web, for using FlexibleSkin globally, or
   • ... in your web, for using FlexibleSkin locally on some web.
4. Test some topic to see if your layout is getting nice (perhaps the WebHome topic), appending to it's URL ...
   • ?skin=globalFlexible for using FlexibleSkin globally, or
   • ?skin=flexible for using FlexibleSkin locally on some web.
5. When it looks pretty, change the SKIN variable ...
   • to globalFlexible in TWiki.TWikiPreferences, for using FlexibleSkin globally, or
   • to flexible in WebPreferences, for using FlexibleSkin locally on some web.

Remarks:

• FlexibleSkin 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.
• When upgrading from version 1 of FlexibleSkin, basically you must only rename yout CSS classes for the special topics, that dropped the "FlexibleSkin" prefix, and got and "Web" prefix.

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 FlexibleSkin, 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.

CSS Example

These examples are for who needs a starting point on how to set CSS with FlexibleSkin. Some classes may appear a little redundant with all those element names, but experience with different browsers show that it's a good practice to do it, because CSS interpreting is not standard across the web browsers.

As a recommended reading, see the CSS 2 recomendation, at http//www.w3c.org/TR/CSS2. Also, there are an enormous ammount of material about CSS in the internet, you can easily find a lot of tutorials on CSS.

If you want to suggest some CSS example, please do it in FlexibleSkinDev?.

Green links, nice font

/* Define the default font: */
BODY, TD, FONT, A, SPAN, P, LI, UL, BR, HR, TD, TH
  {
     font-family: Verdana, Helvetica, sans-serif, Arial;
     font-size:12px;
  }

/* make the hyperlinks appear in green ... */
A:link, A:visited
  {
    color: green;
  }

/* ... and become red when the mouse is over them: */
A:hover[href]
  {
    color: red;
  }

-- AntonioTerceiro? - 14 Feb 2003