MoveableTypeSkin Contrib Package

See Sven's personal Blog for a DEMO

MoveableTypeSkin is a simple TWiki Skin that allows you define a look and feel for TWiki using the css tags defined by by the Moveable Type style contest archive (the default moveable type templates for v3.3).

There are several advantages to this skin

1. Its very lightweight, and only contains the bare minimum html required to implement the Moveable type classes and IDs
2. Its not implemented specifically for TWiki, so any theme you develop for this skin, will work for all versions of TWiki in the future
3. It reuses TWiki's base 'default' skin, so any new functionality will automatically become available for your use.
4. it means you can share your style between your TWiki, and your SixApart? based blog!

Through this reusable design, you can also preview ideas for a design using the themes from The Moveable tpe Style library. (The Style contest guys have changed their site to make this more difficult, so to see or use those styles, you will need to download them to your system as per the Customisation instructions)

To try it out, install the contrib, then use the next and previous design links below

Some css designs are not suitable for generic useage, 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.

Customisation instructions

The fastest way to develop your own css, is to use the Movable Type Style generator, or to adapt one of the existing css's on the web. There is documentation for this set of css classes and tags found at Stylesheet Reference and other related pages.

1. COPY the MoveableTypeSampleDesign topic text to YourSitesMoveableTypeDesign (or something of your choosing) and then attach your css and images (including a copy of base-weblog.css) to that topic. You should now be able to proof your design from that topic.
2. customise TWiki.css (copy from MoveableTypeSampleDesign) and attach it to your design's topic.
   • This file contains most TWiki specific styles, such as tables, forms and diffs. (WORK in progress)
3. to customise the common text sections in your design edit the Moveable Type Common Text sections in your new design's topic (YourSitesMoveableTypeDesign).

Once you are done, you will be able to set the following in your TWikiPreferences to roll the skin out to everyone:

Settings

Skin Settings are stored as preferences variables that must be added to TWikiPreferences. They are:

set TWiki to use the moveabletype skin

• • Set SKIN=moveabletype

set the moveabletype skin to use this topic to get the moveabletype Common Text sections from this topic

• • Set MOVEABLETYPESKIN_DESIGNTOPIC = MoveableTypeSampleDesign

set the moveabletype skin to use this topic to get the css and images from here (must be in the TWiki)

• • Set MOVEABLETYPESKIN_CSSFILE = http://accessoffice.co.uk/pub/TWiki/MoveableTypeSample2Design/theme.css
  • Set MOVEABLETYPESKIN_TWIKICSSFILE = /pub/TWiki/MoveableTypeSampleDesign/TWiki.css
• is the css one-column, two-column-left, two-column-right, three-column (if not set, either as TWikiVariable? or the UrlParameter? moveabletypecolumns, it defaults to one-column)
  • Set MOVEABLETYPESKIN_COLUMNS = two-column-left

There are static text sections in the MoveableType? css that can be customised by editing the named sections on the MoveableTypeSampleDesign topic - each section can be re-defined either inline, or using INCLUDEs.

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's name. This is useful to make userfriendly titles for AUTO topic name TWikiApps? like TWiki:Plugins:BugsContrib.

Skin URL Parameters for testing skin designs

• skin - must be set to moveabletype
• cssfile - the url to the moveabletype css file you want to view
• twikicssfile - the url to the TWiki.css file
• moveabletypetopic - the topic (in the TWiki only) that the moveabletype common sections come from
• moveabletypecolumns - column setting (one-column, two-column-left, two-column-right, three-column)

Technical details

This skin is an example of how to make a TWikiSkin? without duplicating the work of the TWiki Core release. It reuses the default skin, and only adds a twiki.moveabletype.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 TWikiSkin? that matches closely the HTML of your existing web site, and thus re-use the existing site's css styling, thus creating a comon look & feel.

Plugin topic Settings

• One line description:
  • Set SHORTDESCRIPTION = a TWiki skin based on the HTML used by The Style Archive and The Six Apart style library

Installation Instructions

• Download the ZIP file from the Plugin web (see below)
• Unzip MoveableTypeSkin.zip in your twiki installation directory. Content:

  File:	Description:
  data/TWiki/MoveableTypeSkin.txt	Plugin doc page
  data/TWiki/TestUrls.txt
  lib/TWiki/Contrib/MoveableTypeSkin.pm	Plugin Perl module
  templates/twiki.moveabletype.tmpl
  templates/viewprint.moveabletype.tmpl
  templates/view.moveabletypeonecolumn.tmpl
  templates/view.moveabletypethreecolumn.tmpl
  templates/view.moveabletypetwocolumnleft.tmpl
  templates/view.moveabletypetwocolumnright.tmpl
  pub/TWiki/MoveableTypeSkin/skindemo.js
  pub/TWiki/MoveableTypeSkin/wikiringlogo20x20.png
  pub/TWiki/MoveableTypeSkin/screenshot.gif
  pub/TWiki/MoveableTypeSkin/fullscreen.gif
  pub/TWiki/MoveableTypeSkin/iconic.gif
  pub/TWiki/MoveableTypeSkin/iconic_preview.gif
  pub/TWiki/MoveableTypeSkin/preview_splattered_edit.gif
  pub/TWiki/MoveableTypeSkin/splattered_edit.gif
  data/TWiki/MoveableTypeSampleDesign.txt
  pub/TWiki/MoveableTypeSampleDesign/base-weblog.css
  pub/TWiki/MoveableTypeSampleDesign/theme.css
  pub/TWiki/MoveableTypeSampleDesign/TWiki.css
  pub/TWiki/MoveableTypeSampleDesign/userpic.gif
  data/TWiki/MoveableTypeSample2Design.txt
  pub/TWiki/MoveableTypeSample2Design/base-weblog.css
  pub/TWiki/MoveableTypeSample2Design/theme.css
  pub/TWiki/MoveableTypeSample2Design/TWiki.css
  pub/TWiki/MoveableTypeSample2Design/userpic.gif

• Run MoveableTypeSkin_installer.pl to automatically check and install other modules that this module depends on. You can also do this step manually. Dependencies: None

Interesting URLS

• http://www.bkdesign.ca/movable-type/movable-type-styles.php
• http://www.bkdesign.ca/movable-type/simplify-movable-type.php

Contrib Info

Contrib Author:	TWiki:Main.SvenDowideit - SvenDowideit@DistributedINFORMATION.com DistributedINFORMATION - a WikiRing.com partner
Copyright ©:	SixApart? and designs by various, and twiki adaption by TWiki:Main.SvenDowideit - SvenDowideit@DistributedINFORMATION.com
License:	Various Open Source
Description:	a TWiki skin based on the HTML used by The Style Archive and The Six Apart style library
Screenshot:
Screenshot:
Screenshot:
Preview:	Preview with this topic
Base Name:	moveabletype
Skin Version:	03 Apr 2007 (v1.000)
Dependencies:	None
Version:	16934 (08 Dec 2008)
Change History:
2012-05-19:	Initial version
30 Mar 2007:	initial release of Skin
Home:	http://TWiki.org/cgi-bin/view/Plugins/MoveableTypeSkin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/MoveableTypeSkinDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/MoveableTypeSkinAppraisal

Related Topics: TWikiPreferences

-- TWiki:Main/SvenDowideit - 2012-05-19

Form definition 'SkinPackage' not found