You are here: Foswiki>System Web>NatSkin (14 Apr 2017, IvicaPetrinic)Edit Attach

The Natural Skin

NatSkin improves your Foswiki experience by bringing together some of the most useful features from different plugins in a consistent way. NatSkin comes with a modern web design that improves readability of your wiki content as well as easing the way you interact with it as a wiki author and consumer.

NatSkin also serves as a foundation for additional web designs. So you won't need to reinvent the wheel on every project over and over again.

NatSkin allows you to choose between several kinds of page layouts. All of the predefined themes come with support for a 1, 2 and 3 columns designs in both a fluid and a fixed page layout.

NatSkin provides a much improved usability when navigating among webs as well as when interacting with wiki content.

Screenshots

Theme switcher

You can change design and layout aspects of every page as you like with just a few clicks.

Configure the skin by changing:

  • the theme installed on your system,
  • the style part of a theme,
  • the variation added to the theme's style,
  • the sidebar location,
  • the page layout being either a fixed-width, or a fluid design or
  • the navigation elements as displayed at the top of the page.

The underlying templates that generate the 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 parent skin to create template modifications.

WebComponents

Name Description Default
Menu navigation tabs above the topic area System.SiteMenu
SideBar a configurable navigation bar System.SiteSideBar
RightBar when using two sidebars, this component holds the right sidebar, while the SideBar component is displayed on the left. System.SiteRightBar
Links this is a sub-component of the SideBar component to plug in navigation links within System.SiteLinks, Main.WebLinks, System.WebLinks
BottmBar customize the content at the bottom area of a page System.SiteBottomBar
HtmlHead additional stuff to be put into the html head, like javascript and/or css System.SiteHtmlHead
HtmlBottom similar to WebHtmlHead but putting additional stuff just before the closing </body> tag of a page; this is useful when adding third party javascript code to a website, like tracking code  
TopicActions configure the actions used to manipulate topics System.SiteTopicActions

Documentation

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Test if installed: click here

Set this in your Main.SitePreferences:

   * Set SKIN = nat

to make the setting permanent.

Dependencies

NameVersionDescription
Foswiki::Contrib::CopyContrib>=2.0Required
Foswiki::Contrib::FamFamFamContrib>=2075Required
Foswiki::Plugins::AutoTemplatePlugin>=2.01Required
Foswiki::Plugins::BreadCrumbsPlugin>=4318Required
Foswiki::Plugins::CaptchaPlugin>=2.0.0Optional
Foswiki::Plugins::DBCachePlugin>=1Required
Foswiki::Plugins::FilterPlugin>=3491Required
Foswiki::Plugins::FlexWebListPlugin>=3493Required
Foswiki::Plugins::GridLayoutPlugin>=1.00Required
Foswiki::Plugins::ImagePlugin>=2.40Required
Foswiki::Plugins::JQueryPlugin>=5.00Required
Foswiki::Plugins::ListyPlugin>=1Required
Foswiki::Plugins::MetaCommentPlugin>=2.80Optional
Foswiki::Plugins::MimeIconPlugin>=1Required
Foswiki::Plugins::MultiLingualPlugin>=2.00Optional
Foswiki::Plugins::NatEditPlugin>=8.00Required
Foswiki::Plugins::NatSkinPlugin>=3.99_004Required
Foswiki::Plugins::PageOptimizerPlugin>=0.10Optional
Foswiki::Plugins::RedDotPlugin>=1Required
Foswiki::Plugins::RenderPlugin>=3644Required
Foswiki::Plugins::TopicInteractionPlugin>=1340Required
Foswiki::Plugins::WebLinkPlugin>=1Required
Foswiki::Plugins::ZonePlugin>=3.1Required. required for Foswiki < 1.1

Skin Info

Skin Author: Michael Daum
Copyright ©: 2003-2015, Michael Daum http://michaeldaumconsulting.com
Description: Userfriendly Foswiki skin providing a flexible theming engine for professional webdesigns
Base Name: nat
Screenshot:
Change History:  
17 Jul 2015: added compatibility with Foswiki-2.0; added new topic creator supporting Foswiki:Extensions/WikiWorkbenchContrib TopicTypes; faster implementation of WebTopicList based on Foswiki:Extensions/DBCachePlugin; now depending on Foswiki:Extensions/ListyPlugin for the my-sidebar feature; now depending on Foswiki:Extensions/WebFontsContrib for better typography; dynamic menu for mobile devices; added support for mega menus using the natMegaMenu css class; better seo by supporting Open Graph meta data; nicer change-form dialog supporting WikiWorkbenchContrib 3.00; improved child-topics dialog displaying topic titles properly; added natedit settings to eaily switch on/off wysiwyg mode per topic; rationalized templates for topic actions to ease configuration of icons
27 Feb 2015: final 4.00 which comes with the new customato theme
29 Aug 2013: third beta
12 Dec 2013: second beta
14 Mar 2013: first beta of new release
25 Jun 2003: Initial version

PackageForm edit

Author ProjectContributor
Version 4.10
Release 17 Jul 2015
Repository https://github.com/foswiki/NatSkin
Copyright Foswiki Contributors, All Rights Reserved
License GPL (GNU General Public License)
Home Foswiki:Extensions/NatSkin
Support Foswiki:Support/NatSkin
Topic attachments
I Attachment Action Size Date Who Comment
BaseStyle.csscss BaseStyle.css manage 43 K 25 Jan 2017 - 08:36 IvicaPetrinic  
BaseStyle.css.gzgz BaseStyle.css.gz manage 10 K 25 Jan 2017 - 08:36 IvicaPetrinic  
BaseStyle.uncompressed.csscss BaseStyle.uncompressed.css manage 55 K 25 Jan 2017 - 08:36 IvicaPetrinic  
MakefileEXT Makefile manage 407 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
Makefile.includeinclude Makefile.include manage 150 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap1.pngpng NatSkinSnap1.png manage 88 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap10-200.pngpng NatSkinSnap10-200.png manage 9 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap10.pngpng NatSkinSnap10.png manage 71 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap11-200.pngpng NatSkinSnap11-200.png manage 17 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap11.pngpng NatSkinSnap11.png manage 169 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap12-200.pngpng NatSkinSnap12-200.png manage 26 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap12.pngpng NatSkinSnap12.png manage 101 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap13-200.pngpng NatSkinSnap13-200.png manage 14 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap13.pngpng NatSkinSnap13.png manage 26 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap2-200.pngpng NatSkinSnap2-200.png manage 13 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap2.pngpng NatSkinSnap2.png manage 52 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap3-200.pngpng NatSkinSnap3-200.png manage 12 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap3.pngpng NatSkinSnap3.png manage 37 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap4-200.pngpng NatSkinSnap4-200.png manage 23 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap4.pngpng NatSkinSnap4.png manage 63 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap5-200.pngpng NatSkinSnap5-200.png manage 33 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap5.pngpng NatSkinSnap5.png manage 107 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap6-200.pngpng NatSkinSnap6-200.png manage 25 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap6.pngpng NatSkinSnap6.png manage 115 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap7-200.pngpng NatSkinSnap7-200.png manage 25 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap7.pngpng NatSkinSnap7.png manage 114 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap8-200.pngpng NatSkinSnap8-200.png manage 11 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap8.pngpng NatSkinSnap8.png manage 65 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap9-200.pngpng NatSkinSnap9-200.png manage 11 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinSnap9.pngpng NatSkinSnap9.png manage 38 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap2-200.pngpng NatSkinThemeSnap2-200.png manage 43 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap2.pngpng NatSkinThemeSnap2.png manage 412 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap3-200.pngpng NatSkinThemeSnap3-200.png manage 34 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap3.pngpng NatSkinThemeSnap3.png manage 123 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap4-200.pngpng NatSkinThemeSnap4-200.png manage 33 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap4.pngpng NatSkinThemeSnap4.png manage 131 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap5-200.pngpng NatSkinThemeSnap5-200.png manage 44 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap5.pngpng NatSkinThemeSnap5.png manage 411 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap6-200.pngpng NatSkinThemeSnap6-200.png manage 43 K 25 Jan 2017 - 08:36 IvicaPetrinic  
NatSkinThemeSnap6.pngpng NatSkinThemeSnap6.png manage 404 K 25 Jan 2017 - 08:36 IvicaPetrinic  
angular.jsjs angular.js manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
angular.js.gzgz angular.js.gz manage 569 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
angular.uncompressed.jsjs angular.uncompressed.js manage 2 K 25 Jan 2017 - 08:36 IvicaPetrinic  
backlinks.jsjs backlinks.js manage 690 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
backlinks.js.gzgz backlinks.js.gz manage 429 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
backlinks.uncompressed.jsjs backlinks.uncompressed.js manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
blank.gifgif blank.gif manage 49 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
bullet-toc.gifgif bullet-toc.gif manage 54 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
busy.gifgif busy.gif manage 2 K 25 Jan 2017 - 08:36 IvicaPetrinic  
childtopics.jsjs childtopics.js manage 572 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
childtopics.js.gzgz childtopics.js.gz manage 362 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
childtopics.uncompressed.jsjs childtopics.uncompressed.js manage 822 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
edit.jsjs edit.js manage 708 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
edit.js.gzgz edit.js.gz manage 375 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
edit.uncompressed.jsjs edit.uncompressed.js manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
external.pngpng external.png manage 193 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
favicon.icoico favicon.ico manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
foswiki-logo.pngpng foswiki-logo.png manage 4 K 25 Jan 2017 - 08:36 IvicaPetrinic  
grid-40x18.pngpng grid-40x18.png manage 146 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
grid-40x21.pngpng grid-40x21.png manage 138 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
history.jsjs history.js manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
history.js.gzgz history.js.gz manage 595 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
history.uncompressed.jsjs history.uncompressed.js manage 2 K 25 Jan 2017 - 08:36 IvicaPetrinic  
iepngfix.htchtc iepngfix.htc manage 3 K 25 Jan 2017 - 08:36 IvicaPetrinic  
input-bg.pngpng input-bg.png manage 4 K 25 Jan 2017 - 08:36 IvicaPetrinic  
login.jsjs login.js manage 306 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
login.js.gzgz login.js.gz manage 244 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
login.uncompressed.jsjs login.uncompressed.js manage 472 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
login_keys.pngpng login_keys.png manage 14 K 25 Jan 2017 - 08:36 IvicaPetrinic  
menuarrow.gifgif menuarrow.gif manage 832 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
menubg.gifgif menubg.gif manage 5 K 25 Jan 2017 - 08:36 IvicaPetrinic  
minus.pngpng minus.png manage 343 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
natskin.jsjs natskin.js manage 4 K 25 Jan 2017 - 08:36 IvicaPetrinic  
natskin.js.gzgz natskin.js.gz manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
natskin.uncompressed.jsjs natskin.uncompressed.js manage 11 K 25 Jan 2017 - 08:36 IvicaPetrinic  
obfuscator.jsjs obfuscator.js manage 407 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
obfuscator.js.gzgz obfuscator.js.gz manage 279 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
obfuscator.uncompressed.jsjs obfuscator.uncompressed.js manage 709 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
oldrevisionbg.pngpng oldrevisionbg.png manage 7 K 25 Jan 2017 - 08:36 IvicaPetrinic  
oopsmore_diff_debug.gifgif oopsmore_diff_debug.gif manage 3 K 25 Jan 2017 - 08:36 IvicaPetrinic  
oopsmore_diff_sequential.gifgif oopsmore_diff_sequential.gif manage 3 K 25 Jan 2017 - 08:36 IvicaPetrinic  
oopsmore_diff_sidebyside.gifgif oopsmore_diff_sidebyside.gif manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
password.jsjs password.js manage 3 K 25 Jan 2017 - 08:36 IvicaPetrinic  
password.js.gzgz password.js.gz manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
password.uncompressed.jsjs password.uncompressed.js manage 5 K 25 Jan 2017 - 08:36 IvicaPetrinic  
pdf.pngpng pdf.png manage 747 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
plus.pngpng plus.png manage 434 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
previewbg.pngpng previewbg.png manage 18 K 25 Jan 2017 - 08:36 IvicaPetrinic  
print.csscss print.css manage 3 K 25 Jan 2017 - 08:36 IvicaPetrinic  
print.css.gzgz print.css.gz manage 977 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
print.uncompressed.csscss print.uncompressed.css manage 4 K 25 Jan 2017 - 08:36 IvicaPetrinic  
q_black.gifgif q_black.gif manage 37 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
rename.jsjs rename.js manage 693 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
rename.js.gzgz rename.js.gz manage 333 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
rename.uncompressed.jsjs rename.uncompressed.js manage 1010 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
search_button.pngpng search_button.png manage 571 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
subscribe.jsjs subscribe.js manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
subscribe.js.gzgz subscribe.js.gz manage 514 bytes 25 Jan 2017 - 08:36 IvicaPetrinic  
subscribe.uncompressed.jsjs subscribe.uncompressed.js manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
topiccreator.csscss topiccreator.css manage 2 K 25 Jan 2017 - 08:36 IvicaPetrinic  
topiccreator.css.gzgz topiccreator.css.gz manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
topiccreator.jsjs topiccreator.js manage 4 K 25 Jan 2017 - 08:36 IvicaPetrinic  
topiccreator.js.gzgz topiccreator.js.gz manage 1 K 25 Jan 2017 - 08:36 IvicaPetrinic  
topiccreator.uncompressed.csscss topiccreator.uncompressed.css manage 2 K 25 Jan 2017 - 08:36 IvicaPetrinic  
topiccreator.uncompressed.jsjs topiccreator.uncompressed.js manage 9 K 25 Jan 2017 - 08:36 IvicaPetrinic  
Topic revision: r6 - 14 Apr 2017, IvicaPetrinic
This site is powered by FoswikiCopyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback