WidgetsSkin Contrib Package

This is a revised version of the WidgetsSkin, updated to match the changes made for MT4. There are some CSS id and class changes, that will need to be applied to any theme from MT3.

I have now included the 38 styles included in the Open source version of Moveable Type, and another 47 from http://www.codemonkeyramblings.com/themes/ .

There is a set of reasonably easy upgrade steps to modify your CSS and *Design topic to work with this upgrade.

Theme Browser

If the skin is installed, you can use the theme browser to mix and match layouts with various CSS files that are available either in this Skin, or by referencing the css url.

Use the navigation buttons to select between options. Click on the theme name to see the CSS source file.
Choose Style: go_back aeros (41 of 87) go_forward
Choose COLUMNS w (1 of 7):
Topic Topic - Thin Thin - Topic Thin - Topic - Thin Topic - Thin - Thin Topic - Medium Medium - Topic
Choose DESIGNTOPIC (advanced): go_back System/WidgetsSample2Design (2 of 3) go_forward

Or type the full URL path to a CSS you have downloaded from the style browser here:

Iterators for Design, CSS file, and column layout
  • Set NEXTDESIGN = 3
  • Set DESIGNPARAM = widgetstopic=System/WidgetsSample2Design;designidx=2

  • Set CURRENTCSS = 90
  • Set NEXTCSS = 91
  • Set PREVIOUSCSS = 89
  • Set CSSPARAM = cssfile=http://malat.biz/foswiki/pub/System/WidgetsSkin/CMR_themes/aeros/screen.css;cssidx=90

  • Set NEXTCOLS = 2
  • Set COLSPARAM = widgetscolumns=w;colsidx=1

  • Set DESIGN1 = System/WidgetsSampleDesign
  • Set DESIGN2 = System/WidgetsSample2Design
  • Set DESIGN3 = System/WidgetsSample3Design
  • Set LASTDESIGN = 3

Column layouts
  • Set FIRSTCOLS = 1
  • Set COLS1 = w
  • Set COLS2 = tw
  • Set COLS3 = wt
  • Set COLS4 = twt
  • Set COLS5 = wtt
  • Set COLS6 = wm
  • Set COLS7 = mw
  • Set LASTCOLS = 7

  • Set DEFAULTCSS = 90
  • Set FIRSTCSS = 50
removed as they are MT3 css

from http://github.com/mikert/Movable-Type-Styles - see http://www.codemonkeyramblings.com/themes/

  • Set LASTCSS = 136


IDEA! It's easy to download and install designs. Download the zip file for your chosen design, and unzip it in the directory on the server that corresponds to this URL: http://malat.biz/foswiki/pub/System/WidgetsSkin. Then type the full URL into the text box in the browser.

WidgetsSkin is a simple Foswiki Skin that reuses these style and HTML definitions, so making designs done for Moveable Type available to Foswiki sites.

Aside from the ability to reuse these designs, there are several other advantages to this skin:
  1. It's very lightweight, only generating the bare minimum HTML required to implement the Moveable type classes and IDs. This means it is fast, portable and easy to upgrade.
  2. The CSS is independent of Foswiki, so any stylesheet you develop for this skin will work with all versions of Foswiki that support the skin,
  3. This also means the same CSS can be shared with other applications (such as Six Apart based blogs).
  4. The skin reuses Foswiki's base templates for most of the Foswiki-specific bits, so when those base templates are extended any new functionality will automatically become available for your use.

You can preview some design ideas at the the Moveable Type style library. To use one of these designs with Foswiki, you will need to install the skin, and then download and install the theme as per the Customisation instructions, below. Some designs are not suitable for reuse with Foswiki, as they make assumptions about the number of pixels that the text is long, but you should be able to get inspiration from these works anyway.

Alternatively, you can visit Sven's personal Blog for a DEMO.

WidgetsSkin is a WikiRing partnership production.


As with all skins, the basic page layout is defined in a set of templates. The Moveable Type classes can support several different column layouts, so the skin gets some of the layout from a "design topic", which defines HTML to use in different sections of the page, for the different column layouts.

The skin uses two CSS files: the reusable CSS that defines the Moveable Type classes, and a mapping CSS that adds additional classes that Foswiki requires, but aren't defined by the Moveable Type standard.

Once you have chosen your CSS and layout, you must tell Foswiki to use those options. If you have used the Theme Browser to select your preferred setup, you can copy and paste the following section to your SitePreferences topic (or WebPreferences, or your personal topic)

Skin variables

If you set PAGETOPIC in your preferences or in your topic, it will be used as the page's HTML title, in preference to the topic name. This is useful for creating user-friendly titles for AUTOINC-named topics


Customisation of this skin to create your own look and feel is very straightforward. You only have to develop (or reuse) a CSS file. You can also customise the text section definitions (WIDGETSSKIN_DESIGNTOPIC) and the Foswiki css WIDGETSSKIN_TWIKICSSFILE) for even greater control over the rendering, but this is not necessary for most applications.

The fastest way to develop your own CSS is to use the Movable Type Style generator. Alternatively you can adapt one an existing CSS from the web (though please be careful to respect author copyright). There is documentation for the required set of CSS classes and tags found at MT4 Default Template Reference and other related pages.

Once you have a CSS that you want to use, simply upload it to a Foswiki topic and point the WIDGETSSKIN_CSSFILE setting at it.

For more radical customisations (or to distribute your theme as a Contrib) you will want to create your own design topic. To create a design topic:
  1. Copy the text from the WidgetsSampleDesign topic and paste it to YourWidgetDesign (or another name of your choosing).
  2. Copy the WidgetsSampleDesign attachments Foswiki.css and base-weblog.css to your new topic (save the files locally, and then upload them again to your new topic)
  3. Attach your custom Foswiki CSS and imagefiles to your new topic.
  4. Edit your new topic and modify the WIDGETSSKIN_CSSFILE setting to reflect the name of your CSS file. You should now be able to proof your design by viewing that topic.

You can also optionally customise the Foswiki.css attached to your design topic. This file contains most Foswiki specific styles, such as tables, forms, and diffs.

Finally, you can also customise the common text sections in your design by editing the Moveable Type Common Text sections. There are four sample design topics: WidgetsSampleDesign, WidgetsSample2Design, WidgetsSample3Design, and WidgetsMantisDesign.

Once you are done, you will be able to follow the instructions under 'Enable this design' in your design topic to roll out your design.

Upgrading from MT3 based WidgetsSkin

Skin URL Parameters for testing skin designs

  • skin - must be set to Widget
  • cssfile - the url to the Widget css file you want to view
  • twikicssfile - the url to the Foswiki.css file (usually directly linked to the widgetstopic)
  • widgetstopic - the topic (in the System only) that the Widget common sections come from
  • widgetscolumns - column setting (one-column, two-column-left, two-column-right, three-column)

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.

Interesting URLS

Contrib Info

This skin is an example of how to make a Skin without duplicating the work of the Foswiki Core release. It reuses the default skin, and only adds a foswiki.Widget.tmpl (and a viewprint that I hope to remove later), and only defines the bare essentials to create HTML that is similar to an existing system.

You can use this technique to create a skin that matches closely the HTML of your existing web site, and thus reuse the existing site's CSS styling, thus creating a common look & feel.

Contrib Author: Foswiki:Main.SvenDowideit - SvenDowideit@fosiki.com fosiki - a WikiRing.com partner
Copyright ©: SixApart and designs by various, foswiki adaption by Foswiki:Main.SvenDowideit - SvenDowideit@fosiki.com
License: Various Open Source and Creative Commons
Description: a Foswiki skin based on the HTML used by The Style Archive and The Six Apart style library
Screenshot: Click for full screen image
Preview: Preview with this topic
Base Name: Widget
Version: 11457 (2011-04-14)
Change History:  
14 Apr 2011: restyle login button -- Foswiki:Main.WillNorris
29 Mar 2011: restyle and change layout of widget-login-form, fix integration with FastInstaller -- Foswiki:Main.WillNorris
8 Dec 2010: improve the ability to hide/show actions based on permissions / authentication
9 Jul 2010: prepare for uploading
7 Apr 2010: update iblog2 and poetry CMR themes - add jarrah
27 Feb 2010: fix REVINFO bug in the widget-history - so that it shows the requested topic's history
13 Feb 2010: bring in styles from http://www.codemonkeyramblings.com/themes/ and fix bugs
18 Jan 2010: documentation cleanup
22 Jul 2009: general fixes and cleanups of HTML output
11 May 2009: removed bonus BANANANA in WidgetsSampleDesign -- Foswiki:Main.WillNorris
27 Jan 2009: added header and footer widgets, and some more sectional include magic
30 Dec 2008: update to Foswiki
7 Dec 2007: stop the demo images from overflowing the design, other Skin fixes
15 Oct 2007: Doc rewrite - Foswiki:Main.CrawfordCurrie
30 Mar 2007: initial release of Skin
Home: http://foswiki.org/Extensions/WidgetsSkin
Support: http://foswiki.org/Support/WidgetsSkin

Related Topics: DefaultPreferences, SitePreferences

-- Foswiki:Main/SvenDowideit - 14 Jul 2024

I Attachment Action Size Date Who Comment
aeros.gifgif aeros.gif manage 9.3 K 14 Apr 2011 - 14:59 AdminUser  
bloggers-cafe.gifgif bloggers-cafe.gif manage 6.5 K 14 Apr 2011 - 14:59 AdminUser  
cityscape-sydney.gifgif cityscape-sydney.gif manage 7.2 K 14 Apr 2011 - 14:59 AdminUser  
disciple.gifgif disciple.gif manage 5.4 K 14 Apr 2011 - 14:59 AdminUser  
gray-gets-green.gifgif gray-gets-green.gif manage 4.7 K 14 Apr 2011 - 14:59 AdminUser  
hightech.gifgif hightech.gif manage 7.0 K 14 Apr 2011 - 14:59 AdminUser  
hills-dusk.gifgif hills-dusk.gif manage 7.8 K 14 Apr 2011 - 14:59 AdminUser  
imokay.gifgif imokay.gif manage 5.2 K 14 Apr 2011 - 14:59 AdminUser  
painted-desert.gifgif painted-desert.gif manage 7.1 K 14 Apr 2011 - 14:59 AdminUser  
poetry.gifgif poetry.gif manage 4.8 K 14 Apr 2011 - 14:59 AdminUser  
screenshot.gifgif screenshot.gif manage 50.3 K 14 Apr 2011 - 14:59 AdminUser  
shadedgrey.gifgif shadedgrey.gif manage 5.4 K 14 Apr 2011 - 14:59 AdminUser  
skindemo.jsjs skindemo.js manage 2.5 K 14 Apr 2011 - 14:59 AdminUser  
talian.gifgif talian.gif manage 6.6 K 14 Apr 2011 - 14:59 AdminUser  
wikiringlogo20x20.pngpng wikiringlogo20x20.png manage 1.3 K 14 Apr 2011 - 14:59 AdminUser