The Natural Skin

Description

NatSkin is a skin driven by cascading stylesheets shipping 12 predefined styles (themes) and 11 variations that can be applied to each of it. Most of these are inspired by MovableType and WordPress, among others a port of the Kubrick style by Michael Heilemann. In addition a PatternSkin style is provided that emulates the look&feel of the PatternSkin as it is known from the TWiki/Cairo release. While offering a decent appearance NatSkin offers an increased TWiki usability and customizability in several respects to quickly accomplish a personalized wiki experience.

To get a first impression check out the NatSkinStyleBrowser:

• select one of the predefined styles
• alter the header art by selecting a style variation
• flip the sidebar from the left to the right
• select different page framing by switching on/off page borders or enable a thin blog-like layout
• switch on/off navigations tabs above the main area, the so called WebButtons
• the position of the search box can be set to one of four predefined positions

The screenshots below only display a limited set of all possible combinations.

Acknowledgement

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.

The NatSkinPlugin is inspired by the TWiki:Plugins/GnuSkin by TWiki:Main/JoachimNilsson. The TWiki:Plugins/PhotonSkin by TWiki:Main/EstebanManchado (PhotonSearch) renamed to natsearch .

Feature Overview

Conditional markup and skin states:

The NatSkinPlugin maintaines 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

and provides the infrastructure to get, set and display the skin style that is currently active as well as rendering different content depending on the skin state. This, for example, allows to switch the sidebar navigation from the left to the right with a single click.

Componentized templates:

The underlying templates that generate the TWiki pages are arranged in a flexible and manageable way to facilitate easy "skin mix-in", that is overriding specific parts of the templates by using the NatSkin as a base skin to create template modifications.

Customizing webs using WebComponents:

• WebSideBar: a configurable navigation bar
• WebLinks: component used by the standard navigation scheme to plug in more navigation links
• WebButtons: navigation tabs above the topic area
• MySideBar: every user can extend the sidebar with a personalized navigation
• WebCss: additional css code per web
• WebTopicActions: actions to manipulate TWiki topics

Search & GO

NatSearch: a search+go box that combines advanced search with the GO feature of TWiki. Compared to the standard WebSearch NatSearch is trying to maximize usability and minimizing workflow disruption. In addition, NatSearch can be customized on an application level to specify the scope of search (using include/exclude rules) as well as the appearance of listed search hits.

Wikiwyg editor:

NatEdit: optional javascript enabled wikiwyg editor

Email Obfuscation:

Optionally, all email addresses can be obfuscated by use of javascript. Email links are still clickable while automatic email extraction is hampert.

Application based authentication:

NatLogon: An independent implementation of an html login page is provided for maximal compatibility with old TWiki releases. This is similar to the TemplateLogin authentication mechanism available since TWiki-4. There are usability differences between TemplateLogin and NatLogon trying to ease the authorization-authentication workflow.

External link detection:

All offsite links are marked and a nice icon is added. Clicking on them will allways open an extra window.

Documentation

• NatSkinTemplates
• NatSkinCss
• NatSearch
• NatSkinConfiguration
• NatSkinFAQ
• NatSkinPlugin

Installation Instructions

• Get the TWiki:Plugins/NatSkinPlugin supplementary package and install it.
• Download the NatSkin ZIP file
• Unzip it in your twiki installation directory. Content:

File:	Description:
data/Main/NatSkinUserViewTemplate.txt	skin specific user view
data/Main/TWikiGuestSideBar.txt	empty MySideBar for guests
data/Main/WebLinks.txt	navigation component for the Main web
data/TWiki/MySideBarTemplate.txt	MySideBar template sidebar
data/TWiki/MySideBar.txt	MySidebar creator
data/TWiki/NatSearch.txt	documentation
data/TWiki/NatSkinConfiguration.txt	documentation
data/TWiki/NatSkinCss.txt	documentation
data/TWiki/NatSkinFAQ.txt	documentation
data/TWiki/NatSkinStyleBrowser.txt	style browser
data/TWiki/NatSkinTemplates.txt	documentation
data/TWiki/NatSkin.txt	skin topic
data/TWiki/TWikiWebButtons.txt	default WebButtons component
data/TWiki/TWikiWebCss.txt	default WebCcss component
data/TWiki/TWikiWebLinks.txt	default WebLinks component
data/TWiki/TWikiWebRightBar.txt	default WebRightBar component
data/TWiki/TWikiWebSideBar.txt	default WebSideBar component
data/TWiki/TWikiWebTopicActions.txt	default WebTopicActions component
data/TWiki/WebLinks.txt	navigation component for the TWiki web
lib/TWiki/Contrib/NatSkin.pm	dummy perl module
pub/TWiki/NatSkin/Base(Border,Buttons,Shadow,StylemThin).css	base style files
pub/TWiki/NatSkin/*(Border,Buttons,Shadow,StylemThin).css	style files
pub/TWiki/NatSkin/*Variation.css	style variation files
pub/TWiki/NatSkin/TablePlugin_Core_pm.diff	TablePlugin patch
pub/TWiki/NatSkin/*.png,jpeg,gif	various graphics resources
pub/TWiki/NatSkin/edit.js	natedit javascript code
pub/TWiki/NatSkin/obfuscator.js	email obfuscation code
templates/*.nat.tmpl	NatSkin template files
templates/*.natedit.tmpl	NatEdit template files

• Test if installed: click here

Skin Info

Skin Author:	TWiki:Main/MichaelDaum
Copyright ©:	2003-2006, MichaelDaum@WikiRing.com
License:	GPL (GNU General Public License)
Skin Version:	v3.0-pre10
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:
13 Oct 2006:	improved usability of natedit toolbar; fixed broadcast message for IE; improved subweb-parentweb navigation in sidebar; more separation of admin from non-admin navigation; added help text to edit screens; added support to alter the topic parent during edit and removed it from the oopsmore dialog
02 Oct 2006:	hide links for admins in the sidebar navigation; don't include the WebSideBar twice; added css classes to the <body> to distinguish different cgi actions (view, edit, preview, ...)
18 Sep 2006:	removed private registerconfirm template which whas broken anyway; fixed breadcrumbs on edit page; some minor formtable cleanups
29 Aug 2006:	removed spaghetti template code for beijing and cairo; removed NATSCRIPTURL; fixed MySideBar localization; adjusted usage of IFSKINSTATE due to its new evaluation priority
25 Aug 2006:	first release dropping beijing and cairo support; major documentation rewrite; added a default WebRightBar to exemplify 3 columns layout; added 3 columns layout switch to NatSkinStyleBrowser; fixed template messages used in oopsaccessdenied and oopsattention; normalized some css class naming; added ImagePlugin css support
21 Aug 2006:	complete rework of fonts in all styles not to rely on font preference settings in browsers; enhanced twikiTable appearance; added support for TWiki:Plugins.ImagePlugin in natedit; fixed sidebar in PatternStyle + searchbox in position 1; fixed oopsmore's button style on different locales; more IE hacks; more i18n fixes
15 Aug 2006:	interface internationalization (TWiki:Main.OliverKrueger, TWiki:Main.AndreUlrich); adjusted css to cope waith possibly long strings in i18n; added "Change Language" dialogue to oopsmore; replaced most em based widths with px based ones to cope with different font presets; removed *Right.css files and added nat(SideBar,Main)(Left,Right) classes instead; reworked meta data creation: renamed KEYWORDS to METAKEYWORDS, added METAAUTHOR and METADESCRIPTION; moved blog related stuff to BlogPlugin; added strings.nat.tmpl template defining strings used in NatSkinPlugin; lots of css and template fixes; only load those javascript snippets that are really used
7 Aug 2006:	removed natTWikiInfo from the bottom bar containing the "Powered by" prose; fixed USEWYSIWYG (again)
3 Aug 2006:	first 3 dot O prerelease, 3.0-final will be a TWiki V4 only skin; addded NatEdit templates; restructured edit and preview templates to allow NatEdit to "mix in" its toolbar; make use of the new NATSCRIPTURL variables to support short urls; make use of new FLEXWEBLIST features; added FireVariation
31 Jul 2006:	added renameweb templates; rename topic usability improvements; some css alignment corrections
28 Jul 2006:	improved navigation in hierarchical webs by using the new TWiki:Plugins/FlexWebListPlugin and TWiki:Plugins/BreadCrumbPlugin; dropped usage of the TWiki:Plugins/FilterPlugin as using FORMATLIST{WEBLIST} has been superseeded by FLEXWEBLIST; using the FlexWebListPlugin + GluePlugin to generate a better sidebar navigation showing subwebs in a twisty; dropped the natWebLocation thing in the headerbar (commented out for now) in favour of a real breadcrumbs navigation; added a new template macro "contentheader" to contain the breadcrumbs by default; increased flexibility in default WebTopicActions using NATLOG(IN/OUT)URL instead of NATLOGON,NATLOGOUT tags; removed leading space char in mailnotify.nat.tmpl which may bust mail servers not sending out notifications; added missing feed-icon-12x12-gray.png in package; lots of css fixes to style the new breadcrumbs navigation
15 Jun 2006:	added WEBTOOLNAME to customize the name displayed in the header bar; minor usability improvements in the NatSkinStyleBrowser
25 May 2006:	added advanced diff options available on twiki4; improved diff dialogue; added css classes for ok/cancel buttons on oops dialogues; lots of css improvements, mostly diff related
24 May 2006:	spacing and font improvements; added example TWikiWebCcss; removed focusing the search box on every view; if there's an WEBLOGOIMAGE then use it in the title bar instead of the WIKITOOLNAME; fixed bug in save actions that could have caused data loss ; added missing save parameters in editform.nat.tmpl
9 May 2006:	fixed error in preview template that triggered an internal server error on twiki4
6 May 2006:	provide customised CSS support using WebComponent WebCss (WillNoris@WikiRing.com)
5 May 2006:	minor css cleanup; display default WebLinks and WebButton for a current non-public web
19 Apr 2006:	added support for KEYWORDS per topic
11 Apr 2006:	fixed oops dialogue leaping off the page; be nicer to non-css browers
5 Apr 2006:	added support for dakar's TemplateLogin; preventing an empty line in WebButtons in case there are no public webs; added WebComponent WebTopicActions; simplified topicactions templates; simplified TemplateLogin templates to match natlogon
27 Mar 2006:	moved MySideBar templates from plugin into the skin; fixed page layout of Kubrick style using borders for geckos; added HTTPSLOGON variable to get around install hassle on non-ssl servers; enabled edit and preview upper right topic actions again; added support for three-column layout using STYLESIDEBAR = both; fixed html error in topbar
20 Mar 2006:	several blog css fixes; added bottom topic actions to edit and preview; only display web.topic in the web locator no recursive parents anymore; natsearch docu
13 Mar 2006:	fixed WebLinks components; fixed atom feed link at the page bottom
11 Mar 2006:	reworked sidebar using the new WEBCOMPONET logic; docu restructuring - more needed; using messages.tmpl as far as possible
1 Mar 2006:	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
20 Feb 2006:	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
14 Feb 2006:	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
3 Feb 2006:	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
27 Jan 2006:	fixed blog css for all styles
26 Jan 2006:	lots of css fixes
23 Jan 2006:	added forgotten IE decorations; fixed layout problems in the WebButtons; replaced ICONPATH with ICONURL; added email_changed oopsattention message
9 Jan 2006:	more IE fixes; fixed search template: every hit must be a table of its own :(; fontsize fixes
20 Dec 2005:	fixed collapsing tables in firefox < 1.5
5 Dec 2005:	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
1 Dec 2005::	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
23 Nov 2005:	added nops in expensive IFSKINSTATETHEN, i.e. to prevent the sidebar to be computed multiple times
22 Nov 2005:	moved basic blogging css to the BlogPlugin
16 Nov 2005:	added PatternStyle emulating cairo's PatternSkin
10 Nov 2005:	improved NatSkinStyleBrowser
8 Nov 2005:	firefox layout fixes
7 Nov 2005:	more safari fixes
2 Nov 2005:	fixed javascript problems combined with the TWiki:Plugins.TwistyPlugin; trigger printing when clicking on "Print"
31 Oct 2005:	safari fixes where content leaps out of the main area
24 Oct 2005:	added UserView templates; standardised favicon handling
18 Oct 2005:	workaround crash due to recursive accessdenied-exceptions
13 Oct 2005:	preliminary css support for header art; added some default headers
10 Oct 2005:	added skin style cycling to the NatSkinStyleBrowser; fixed way how the oops dialogues switch off the sidebar
9 Oct 2005:	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
30 Aug 2005:	lots of css fixes for IE and Opera; fixed topicactions for IE; different cancel actions per engine
26 Aug 2005:	final NatSkin-2.0
12 Aug 2005:	first round of pre-releases numbered 1.91 upwards
24 Jul 2005:	rewritten the templates, renamed the CSS classes
25 Jun 2003:	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

-- TWiki:Main/MichaelDaum - 13 Oct 2006