You are here: FS > TWiki Web > NatSkin r1 - 08 Feb 2006 - 08:51 - TWikiContributor


Start of topic | Skip to actions

The Natural Skin

Description

NatSkin is a skin driven by cascading stylesheets which is shipped with 12 predefined styles and 10 style variations that can be applied to each. Most of these are inspired by the MovableType and WordPress among others a port of the Kubrick style by Michael Heilemann and thus can provide a blog-like layout. This includes a PatternSkin style that emulates the look&feel of the PatternSkin as it is known from the TWiki/Cairo release.

Features

  • Skin state: an internal representation of different ways to render the NatSkin concerning
    • the skin style,
    • style variants,
    • the sidebar location,
    • the page border decoration,
    • the web buttons in the topbar and
    • the positioning of the search box
  • Conditional content:
    • USERACTIONS, NATLOGON: display topic actions depending on the user being logged in or not
    • IFSKINSTATE: render skin differently depending on the current skin state
    • IFACCESS: render different content or include topics depending on access rights
  • skin style control: infrastructure to get, set and display the skin style that is currently active using the NatSkinStyleBrowser
  • WebSideBar: a configurable navigation bar
  • MySideBar?: every user can extend the sidebar with a personalized navigation
  • NatSearch: a search+go box that combines advanced search with the GO feature of twiki
  • Login page: independent implementation of a login page for maximal compatibility with old TWiki releases; this is similar to the TemplateLogin authentication mechanism in Dakar but only provides htpasswd based authentication
  • email address obfuscation: all email addresses in topic texts are obfuscated by the use of dynamic html; so mailto links are still clickable while the pure html text does not allow to extract the addresses by respective web crawlers.
  • marking external links: add a nice icon to offsite links

NatSearch

This is a cgi-script that is heavily based on the PhotonSearch of the TWiki:Plugins/PhotonSkin. So natsearch is basically a fork of that including fixes to similar security flaws that hit the WebSearch those days also.

NatSearch can be further reduced to certain webs and topics by setting WebPreferences. Besides the NOSEARCHALL feature of every web that excludes a web from search the following variables restrict the hit set:

Name Description
NATSEARCHINCLUDEWEB a regular expression that must match webs to be considered
NATSEARCHEXCLUDEWEB a regular expression that must not match a web
NATSEARCHINCLUDETOPIC a regular expression that must match a topic in the hit set
NATSEARCHEXCLUDETOPIC a regular expression that excludes a topic from the hit set

Furthermore, the variable NATSEARCHTEMPLATE can be set to a template topic that is used instead of the skin's search template. This can be used in TWikiApplications to define a customized look of search results.

Please see the TWiki:Plugins/PhotonSkin for an explanation of the possible search parameters (TODO: maby move that stuff in here).

About the WebSideBar?

The WebSideBar? is used to generate a navigation appearing next to the main topic area. Each web in your FS might optionaly have a separate WebSideBar?. The default TWiki.WebSideBar? can be used to add a default section common to all WebSideBars?. If the WebSideBar? isn't defined the default TWiki.WebSideBar? is used. Each user might define a personalized WebSideBar? called %WIKINAME%SideBar that is appended to the WebSideBar?. The TWiki:Plugins/RedDotPlugin is used to make customizing the WebSideBar? easier appended to the different parts that make up the complete sidebar. These are hidden if you don't have write access to the respective topic fragments.

About the WebButtons?

The WebButtons? are used to render the button toolbar at the top of the page when the STYLEBUTTONS setting is set to "on". The WebButtons? are an unordered list of those links that should be visible there. There exists one WebButtons? topic by default in the TWiki web. You can define a WebButtons? topic per web overwriting the settings in the TWiki.WebButtons topic. If you do not define a WebButtons? topic in a web then the default one will be used displaying a set of links to all public webs in your FS installation.

About Logon & Logout

LOGONTOPIC

The layout of the NatSkin can be configured online using the NatSkinStyleBrowser

  • by selecting one of the predefined styles;
  • by selectiong one of the predefined variations;
  • the sidebar can be displayed on the left or right;
  • the page border can be toggled on and off;
  • there are so-called WebButtons? that can be switched on and off displaying webs as tabs;
  • the position of the search box can be set to one of four predefined positions.

The result can be configured per session, user, web or for the complete site. The screenshots below only display a limitted set of all possible combinations.

This skin includes an enhanced navigation mechanism named WebSideBar?. This combines the best of the old WebMenu idea from the GnuSkin and the WebLeftBar known from the TWiki:Plugins/PatternSkin by providing all the flexibility of the WebLeftBar including the MySideBar? feature and an enhanced navigation scheme.

This is a rework of the TWiki:Plugins/CopyCatSkin by TWiki:Main/MattWilkie. It is used at the Natural Language Systems Division (NATS) of the University of Hamburg, Germany.

Selecting Styles

You can try alternative styles

  1. per request: by appending style=<skin-name> to the end of the url; alternatively, use the NatSkinStyleBrowser
  2. per user by setting a variable SKINSYLE on your TWikiGuest homepage
  3. per web by setting the variable SKINSTYLE in the WebPreferences
  4. site-wide by setting the skinstyle in the TWikiPreferences

See the NatSkinPlugin? for more information on how to predefine the variants of NatSkin. The default style is hardcoded into the NatSkinPlugin?.

Documentation

(TODO: "refine" me)

Installation

  • Get the TWiki:Plugins/NatSkinPlugin supplementary package and install it.
  • If you are installing on TWiki/Cairo then consider applying this patch: Cairo_UI_pm.diff
  • Download the ZIP file from the Skin Home page (see below)
  • Unzip NatSkin.zip in your twiki installation directory
  • Test if installed: click here

Skin Info

Skin Author: TWiki:Main/MichaelDaum
Copyright ©: 2003-2006, Michael Daum
License: GPL (GNU General Public License)
Skin Version: v2.994
Dependencies: TWiki:Plugins/NatSkinPlugin
Description: Driven by cascading stylesheets, Comes with 12 alternative styles, MoveableType and Wordpress Look-n-Feel
Base Name: nat
Screenshot:
More Screenshots:
Change History:  
2006-03-11: reworked sidebar using the new WEBCOMPONET logic; docu restructuring - more needed; using messages.tmpl as far as possible
2006-03-01: fixed TWikiForm not showing certain row values (uuh); added more css for the most recent stuff added to the BlogPlugin; removed html from mailnotification; replaced SCRIPTURL{} with SCRIPTURL+SCRIPTSUFFIX again for legacy platforms; minor css fixes
2006-02-20: removed empty lines in templates; css fixes for lists in the sidebar; unified font size in attachment tables; using percentage instead of em size for the thin page layout
2006-02-14: added variable %WEBSYNDICATION%; removed TablePlugin patch; made BaseStyle usable; added syndiation feeds; don't use dotted lines on IE; don't use transparent borders on IE; added gif version for cite background for IE; fixed content area of PatterStyle on IE; don't use Lucida Grande in KubrickStyle; added rss feed icons; added plain view template
2006-02-03: compute even/odd search hits for WebSearch using CALC so that css-2.1 expressions aren't needed anymore; lots of css font and size fixes, i.e. blog related
2006-01-27: fixed blog css for all styles
2006-01-26: lots of css fixes
2006-01-23: added forgotten IE decorations; fixed layout problems in the WebButtons?; replaced ICONPATH with ICONURL; added email_changed oopsattention message
2006-01-09: more IE fixes; fixed search template: every hit must be a table of its own :(; fontsize fixes
2005-12-20: fixed collapsing tables in firefox < 1.5
2005-12-05: componentized template system adding javascript and styles components; removed inline-styles and -javascript and moved it to the respective components being inserted into the html header properly now; surpressing final skin state switches in the NatSkinStyleBrowser; removed absolute urls; removed EDITURL; fixed sidebar help for cairo and beijing; fixed squeezed main page; added the concept of WebComponents, that is the WebSideBar? and the WebButtons?; the WebButtons are customizable the way the WebSideBar already is
2005-12-01: added transparent borders and corners to the Kubrick style; improved PlasticLoveVariation; added a custom "cite" style inside blog texts; some minor IE fixes; w3c validation fixes to the style browser; more form fixes in the preview and editform pages; replaced every launchWindow() javascript with a proper a href using a _blank target; added tooltips to topicactions
2005-11-23: added nops in expensive IFSKINSTATETHEN, i.e. to prevent the sidebar to be computed multiple times
2005-11-22: moved basic blogging css to the BlogPlugin
2005-11-16: added PatternStyle emulating cairo's PatternSkin
2005-11-10: improved NatSkinStyleBrowser
2005-11-08: firefox layout fixes
2005-11-07: more safari fixes
2005-11-02: fixed javascript problems combined with the TWiki:Plugins.TwistyPlugin; trigger printing when clicking on "Print"
2005-10-31: safari fixes where content leaps out of the main area
2005-10-24: added UserView templates; standardised favicon handling
2005-10-18: workaround crash due to recursive accessdenied-exceptions
2005-10-13: preliminary css support for header art; added some default headers
2005-10-10: added skin style cycling to the NatSkinStyleBrowser; fixed way how the oops dialogues switch off the sidebar
2005-10-09: new release NatSkin-2.51: reinvention of the NatSkinStyleBrowser; reworked the standard WebSideBar?; extensive usage of the new conditional content tags interfacing the skin state machine, i.e. switch the sidebar from the left to the right etc.; removed hard-coded links to a Support web; lots of fixes to catch up with the evolving dakar engine; support for the TWiki:Plugins.TwistyPlugin; support for the TWiki:Plugins.AliasPlugin; skin state support for the TWiki:Plugins.TablePlugin; new webbuttons in the topbar; componentized style sheets for different skin states; improved css of forms and tables; better support for the upcomming BlogPlugin in every skin style; plus the usual small css fixes
2005-08-30: lots of css fixes for IE and Opera; fixed topicactions for IE; different cancel actions per engine
2005-08-26: final NatSkin-2.0
2005-07-12: first round of pre-releases numbered 1.91 upwards
2005-06-24: rewritten the templates, renamed the CSS classes
2003-07-25: Initial version
Skin Home: TWiki:Plugins/NatSkin
Feedback: TWiki:Plugins/NatSkinDev
Appraisal: TWiki:Plugins/NatSkinAppraisal

Note: The Description, Screenshot and Base Name rows are needed by the TWiki:TWiki/TWikiSkinBrowser

Related topic: TWiki:TWiki/TWikiSkins, TWiki:TWiki/TWikiSkinBrowser, TWiki:Plugins/NatSkinDev, NatSkinPlugin?

-- TWiki:Main/MichaelDaum - 11 Mar 2006

toggleopenShow attachmentstogglecloseHide attachments
Topic attachments
I Attachment Action Size Date Whodown Comment
Cairo_UI_pm.diffdiff Cairo_UI_pm.diff manage 0.4 K 20 Mar 2006 - 11:19 TWikiContributor  
previewbg.pngpng previewbg.png manage 18.9 K 20 Mar 2006 - 11:20 TWikiContributor  
favicon.icoico favicon.ico manage 3.6 K 20 Mar 2006 - 11:19 TWikiContributor  
KubrickStyle.csscss KubrickStyle.css manage 12.2 K 20 Mar 2006 - 11:19 UnknownUser  
GettysburgStyle.csscss GettysburgStyle.css manage 6.3 K 20 Mar 2006 - 11:19 UnknownUser  
Box.pngpng Box.png manage 1.7 K 20 Mar 2006 - 11:19 UnknownUser  
StormyRight.csscss StormyRight.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
OrangeTunnelVariation.csscss OrangeTunnelVariation.css manage 1.5 K 20 Mar 2006 - 11:19 UnknownUser  
Border.gifgif Border.gif manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
BaseRight.csscss BaseRight.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
PinkPantherVariation.csscss PinkPantherVariation.css manage 1.5 K 20 Mar 2006 - 11:19 UnknownUser  
feed-icon-12x12-gray.gifgif feed-icon-12x12-gray.gif manage 0.9 K 20 Mar 2006 - 11:19 UnknownUser  
SubwayBar.jpgjpg SubwayBar.jpg manage 13.1 K 20 Mar 2006 - 11:20 UnknownUser  
BlueTechCherryVariation.csscss BlueTechCherryVariation.css manage 0.4 K 20 Mar 2006 - 11:19 UnknownUser  
BaseThin.csscss BaseThin.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
BaseBorder.csscss BaseBorder.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
SeaGreenStyle.csscss SeaGreenStyle.css manage 7.3 K 20 Mar 2006 - 11:20 UnknownUser  
SeaGreenBorder.csscss SeaGreenBorder.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
PlainJaneStyle.csscss PlainJaneStyle.css manage 6.1 K 20 Mar 2006 - 11:19 UnknownUser  
BaseButtons.csscss BaseButtons.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
RustyBorder.csscss RustyBorder.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
RedWomanVariation.csscss RedWomanVariation.css manage 0.4 K 20 Mar 2006 - 11:20 UnknownUser  
RustyRight.csscss RustyRight.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
IndependenceBorder.csscss IndependenceBorder.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
PlainJaneThin.csscss PlainJaneThin.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
PatternThin.csscss PatternThin.css manage 0.4 K 20 Mar 2006 - 11:19 UnknownUser  
GettysburgThin.csscss GettysburgThin.css manage 0.3 K 20 Mar 2006 - 11:19 UnknownUser  
BaseStyle.csscss BaseStyle.css manage 11.8 K 20 Mar 2006 - 11:19 UnknownUser  
PinkPantherBar.jpgjpg PinkPantherBar.jpg manage 20.2 K 20 Mar 2006 - 11:19 UnknownUser  
KubrickButtons.csscss KubrickButtons.css manage 0.7 K 20 Mar 2006 - 11:19 UnknownUser  
StormyStyle.csscss StormyStyle.css manage 6.2 K 20 Mar 2006 - 11:20 UnknownUser  
CleanBorder.csscss CleanBorder.css manage 0.5 K 20 Mar 2006 - 11:19 UnknownUser  
StormyBorder.csscss StormyBorder.css manage 0.2 K 20 Mar 2006 - 11:20 UnknownUser  
SquashThin.csscss SquashThin.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
BaseShadow.csscss BaseShadow.css manage 1.5 K 20 Mar 2006 - 11:19 UnknownUser  
NoSideBar.csscss NoSideBar.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
RedWomanBar.jpgjpg RedWomanBar.jpg manage 19.0 K 20 Mar 2006 - 11:20 UnknownUser  
CleanRight.csscss CleanRight.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
PlasticLoveBar.jpgjpg PlasticLoveBar.jpg manage 20.1 K 20 Mar 2006 - 11:20 UnknownUser  
GeorgiaBlueButtons.csscss GeorgiaBlueButtons.css manage 0.6 K 20 Mar 2006 - 11:19 UnknownUser  
IndependenceRight.csscss IndependenceRight.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
BlueFieldBar.jpgjpg BlueFieldBar.jpg manage 16.0 K 20 Mar 2006 - 11:19 UnknownUser  
SquashBorder.csscss SquashBorder.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
GeorgiaBlueStyle.csscss GeorgiaBlueStyle.css manage 7.6 K 20 Mar 2006 - 11:19 UnknownUser  
PatternButtons.csscss PatternButtons.css manage 0.9 K 20 Mar 2006 - 11:19 UnknownUser  
GeorgiaBlueRight.csscss GeorgiaBlueRight.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
NuozekVariation.csscss NuozekVariation.css manage 0.4 K 20 Mar 2006 - 11:19 UnknownUser  
SeaGreenButtons.csscss SeaGreenButtons.css manage 0.8 K 20 Mar 2006 - 11:20 UnknownUser  
SeaGreenThin.csscss SeaGreenThin.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
PlainJaneBorder.csscss PlainJaneBorder.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
PatternStyle.csscss PatternStyle.css manage 12.2 K 20 Mar 2006 - 11:19 UnknownUser  
RustyStyle.csscss RustyStyle.css manage 6.9 K 20 Mar 2006 - 11:20 UnknownUser  
IndependenceButtons.csscss IndependenceButtons.css manage 0.7 K 20 Mar 2006 - 11:19 UnknownUser  
CleanButtons.csscss CleanButtons.css manage 0.7 K 20 Mar 2006 - 11:19 UnknownUser  
quote.pngpng quote.png manage 0.3 K 20 Mar 2006 - 11:20 UnknownUser  
BorderLine.pngpng BorderLine.png manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
PlainJaneRight.csscss PlainJaneRight.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
PatternBorder.csscss PatternBorder.css manage 0.5 K 20 Mar 2006 - 11:19 UnknownUser  
NuozekBar.jpgjpg NuozekBar.jpg manage 22.0 K 20 Mar 2006 - 11:19 UnknownUser  
BlueFieldVariation.csscss BlueFieldVariation.css manage 0.3 K 20 Mar 2006 - 11:19 UnknownUser  
RustyThin.csscss RustyThin.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
Box.gifgif Box.gif manage 0.9 K 20 Mar 2006 - 11:19 UnknownUser  
WaterBar.jpgjpg WaterBar.jpg manage 23.6 K 20 Mar 2006 - 11:20 UnknownUser  
SubwayVariation.csscss SubwayVariation.css manage 1.4 K 20 Mar 2006 - 11:20 UnknownUser  
BlueTechCherryBar.jpgjpg BlueTechCherryBar.jpg manage 14.9 K 20 Mar 2006 - 11:19 UnknownUser  
GettysburgBorder.csscss GettysburgBorder.css manage 0.3 K 20 Mar 2006 - 11:19 UnknownUser  
GeorgiaBlueThin.csscss GeorgiaBlueThin.css manage 0.3 K 20 Mar 2006 - 11:19 UnknownUser  
CleanThin.csscss CleanThin.css manage 0.3 K 20 Mar 2006 - 11:19 UnknownUser  
SepiaFieldBar.jpgjpg SepiaFieldBar.jpg manage 17.2 K 20 Mar 2006 - 11:20 UnknownUser  
KubrickRight.csscss KubrickRight.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
feed-icon-12x12.gifgif feed-icon-12x12.gif manage 0.5 K 20 Mar 2006 - 11:19 UnknownUser  
SeaGreenRight.csscss SeaGreenRight.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
BoxLine.pngpng BoxLine.png manage 3.2 K 20 Mar 2006 - 11:19 UnknownUser  
StormyThin.csscss StormyThin.css manage 0.2 K 20 Mar 2006 - 11:20 UnknownUser  
RustyButtons.csscss RustyButtons.css manage 0.8 K 20 Mar 2006 - 11:20 UnknownUser  
SquashButtons.csscss SquashButtons.css manage 0.9 K 20 Mar 2006 - 11:20 UnknownUser  
KubrickThin.csscss KubrickThin.css manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
IndependenceStyle.csscss IndependenceStyle.css manage 7.0 K 20 Mar 2006 - 11:19 UnknownUser  
WaterVariation.csscss WaterVariation.css manage 1.7 K 20 Mar 2006 - 11:20 UnknownUser  
Border.pngpng Border.png manage 0.2 K 20 Mar 2006 - 11:19 UnknownUser  
GettysburgRight.csscss GettysburgRight.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
SquashStyle.csscss SquashStyle.css manage 6.7 K 20 Mar 2006 - 11:20 UnknownUser  
SepiaTWiki.pngpng SepiaTWiki.png manage 27.3 K 20 Mar 2006 - 11:20 UnknownUser  
SepiaFieldVariation.csscss SepiaFieldVariation.css manage 0.5 K 20 Mar 2006 - 11:20 UnknownUser  
PlainJaneButtons.csscss PlainJaneButtons.css manage 0.6 K 20 Mar 2006 - 11:19 UnknownUser  
StormyButtons.csscss StormyButtons.css manage 0.7 K 20 Mar 2006 - 11:20 UnknownUser  
SquashRight.csscss SquashRight.css manage 0.1 K 20 Mar 2006 - 11:20 UnknownUser  
CleanStyle.csscss CleanStyle.css manage 6.4 K 20 Mar 2006 - 11:19 UnknownUser  
GeorgiaBlueBorder.csscss GeorgiaBlueBorder.css manage 0.3 K 20 Mar 2006 - 11:19 UnknownUser  
PlasticLoveVariation.csscss PlasticLoveVariation.css manage 2.4 K 20 Mar 2006 - 11:20 UnknownUser  
GettysburgButtons.csscss GettysburgButtons.css manage 0.7 K 20 Mar 2006 - 11:19 UnknownUser  
OrangeTunnelBar.jpgjpg OrangeTunnelBar.jpg manage 17.6 K 20 Mar 2006 - 11:19 UnknownUser  
IndependenceThin.csscss IndependenceThin.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
quote.gifgif quote.gif manage 0.2 K 20 Mar 2006 - 11:20 UnknownUser  
KubrickBorder.csscss KubrickBorder.css manage 0.1 K 20 Mar 2006 - 11:19 UnknownUser  
Edit | Attach | Printable | Raw view | Backlinks: Web, All webs | History: r1 | More topic actions
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding FS? Send feedback