Tags:
create new tag
, view all tags

FreeSkin

A TWiki button to web sites TWiki based


Introduction

FreeSkin 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;

FreeSkin was created as a natural evolution of FlexibleSkin, using the concept of tableless web design, CSS and good practices for web design.

Using FreeSkin requires:

  • some knowledge about TWiki;
  • knowledge about web design - (X?)HTML and CSS;

Special topics

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 for TWiki.

We have two mandatory special topics:

Thus, when using FreeSkin, each topic is displayed as following:

FreeSkinPreTopic content
Topic content (%TEXT%)
FreeSkinPosTopic content

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.

<verbatim>
%STARTINCLUDE%\\
The content goes here ...\\
%STOPINCLUDE%
</verbatim>\

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

Attention: As a design decision, the %META% variable are NOT included 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 want them.

These META variables are:

  • %META{"form"}%
  • %META{"attachments"}%
  • %META{"moved"}%
  • %META{"parent"}%

See TWikiMetaData 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.

IDEA! FreeSkin 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.

Recommendations

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.

Example designs

We will post some examples here, prepared for direct use. Please be patient.

For now, you can see FreeSkin running live at:

Some References

Installation

Note: 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)
  • Unzip 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

Skin Info

Skin Author: TWiki:Main/AurelioAHeckert
Skin Version: 01 Dec 2003 (v1.000)
Change History:  
01 Dec 2003: Initial version (v1.000)
Skin Home: http://TWiki.org/cgi-bin/view/Plugins/FreeSkin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/FreeSkinDev

Related topic: TWikiSkins

-- TWiki:Main/AurelioAHeckert - 01 Dec 2003

Topic attachments
I Attachment History Action Size Date Who Comment
Compressed Zip archivezip FreeSkin.zip r1 manage 8.5 K 2003-12-01 - 01:35 AurelioAHeckert FreeSkin package.
Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r3 - 2006-03-16 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.