is a skin developed for support total freedom in TWiki webs design.
It's based on FlexibleSkin
, and aims to support:
- layout definition by editing topics with TWiki itself;
- use of standard and efficient web design practices;
- easy internationalization;
was created as a natural evolution of FlexibleSkin
, using the concept
web design, CSS and good practices for web design.
Using FreeSkin requires:
- some knowledge about TWiki;
- knowledge about web design - (X?)HTML and CSS;
When using FreeSkin
, we have to define layout on special topics, that will
generate the elements that, besides one topic content, will create the layout
We have two mandatory special topics:
Thus, when using FreeSkin
, each topic is displayed as following:
Topic content (%TEXT%)
To prevent strange behavior when editing the special topics, it's strongly
recommended to delimit the piece of those topics that will be included in the
layout, like this:
---+ Layout definition: FreeSkinPreTopic
This is the layout definition for being put before each topic.
The content goes here ...\\
This will prevent the content of being interpreted when viewing the special
topics, and allow you to document your design outside the delimited area for
As a design decision, the %META% variable are NOT
from the templates. You can add them to FreeSkinPreTopic or FreeSkinPosTopic
(they will not get expanded when viewing those topics, but will do when the
topics are included from FreeSkins's templates), and define exactly where you
These META variables are:
for special attributes and options for these variables.
There is one problem with META variables: they can be used in a special topic,
but they don't get expanded in a web search results, giving us ugly
%META% variable appearing in the layout. We will look for some workaround
for this problem.
defines some predefined elements.
You'll probably want to declare some style definition for them:
- The_"it's a %preview, don't forget to save your changes"_ message is written inside a DIV tag with an id value of "PreviewNote".
- The search results table has the id "SearchResultsTable".
- The lines with the found topics's headers have a "FoundTopicHeader" class.
First of all, create a GraphicDesign topic, to centralize all your layout
issues. From there, link to your FreeSkinPreTopic and FreeSkinPosTopic topics.
It's also a good idea to separate menus and style sheets from the mandatory
special topics and include the former ones from the latter ones, as you can
easily alter this kind of information without the need of search it among
layout structure definition.
Think about some means of saving time:
- when declaring background images from a stylesheet, for example, attach the image on the style sheet topic and use %ATTACHURL%/imagename.ext to reference the image.
We will post some examples here, prepared for direct use. Please be patient.
For now, you can see FreeSkin
running live at:
You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where TWiki is running.
- Download the ZIP file from the Skin Home page (see below)
FreeSkin.zip in your twiki installation directory
- Create a symbolic link in the
templates/ subdirectory, named
messages.free.tmpl, pointing to one of the provided translation files, that are also at the
t Set SKIN = freeemplate/s subdirectory:
- messages.free.tmpl.en_US - English
- messages.free.tmpl.pt_BR - Brazilian Portuguese
- Test if installed: http://twiki.org/cgi-bin/view/Plugins/FreeSkin?skin=foobar
- For skin activation see TWikiSkins
Example of creating the symbolic link for Brazilian Portuguese:
$ ln -s messages.free.tmpl.pt_BR messages.free.tmpl
Related topic: TWikiSkins
- 01 Dec 2003