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 ...
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 .
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 .
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 .
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 .
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 .
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:
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.
- First of all, think about the layout you want
;
- 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.
- Create/Edit the special topics that compose FlexibleSkin ...
- Test some topic to see if your layout is getting nice (perhaps the WebHome topic), appending to it's URL ...
- When it looks pretty, change the SKIN variable ...
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;
}
|
Skin Info
Note: The Description, Screenshot and Base Name rows are needed by the
TWikiSkinBrowser
Related topic: TWikiSkins,
TWikiSkinBrowser
--
AntonioTerceiro? - 25 Sep 2004
