<
FlexibleSkin
>
FlexibleSkin: A flexible skin to TWiki.
<
Pendências
>
Goals
<
- strings (centralizar tudo em
messages.flexible.tmplpara facilitar tradução)
- rever conteúdo
- tentar manter compatibilidade !!
- sincronizar modos:
flexibleeglobalFlexible
- melhor, buscar um meio de minimizar ao máximo a redundância (provavelmente revendo a ordem e/ou posição dos includes).
- melhor, buscar um meio de minimizar ao máximo a redundância (provavelmente revendo a ordem e/ou posição dos includes).
>
>
- 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;
<
- search
- rdiff
>
<
>
Variables
<
Implementação da imitação da skin default do TWiki:
>
<
>
- 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 theSTARTINCLUDE 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 namedTD.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 namedTD.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 namedTD.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 namedTD.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 classTD.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 classTD.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 classTD.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 classTD.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
- 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 ...
- ... in the TWiki web, for using FlexibleSkin globally, or
- ... in your web, for using FlexibleSkin locally on some web.
- 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.
- When it looks pretty, change the SKIN variable ...
- to
globalFlexiblein TWiki.TWikiPreferences, for using FlexibleSkin globally, or - to
flexiblein WebPreferences, for using FlexibleSkin locally on some web.
- to
- 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.
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 tomessages.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
|
<