CTSpedia
TWiki > MoveableTypeSkin
CTSPedia webs: Main | System | Sandbox   Log In or Register

Welcome | Register | Changes | Topics | Index | Search | Go

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.

To browse the designs from The Six Apart style library

<< Previous Next >>

view in: one column, two column left, two column right, three column

currently showing : CSS148

show using HTML one column, two column left, two column right, three column

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 the moveabletype skin to use this topic to get the css and images from here (must be in the System)
  • 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 System 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

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

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: Click for full screen image
Screenshot: Click for full screen image
Screenshot: Click for full screen image
Preview: Preview with this topic
Base Name: moveabletype
Skin Version: 03 Apr 2007 (v1.000)
Dependencies: None
Version: 16934 (08 Dec 2008)
Change History:  
10 Dec 2019: 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 - 10 Dec 2019

Form definition 'SkinPackage' not found
SkinPackage? edit
TopicClassification? IncompletePackage?
TestedOnTWiki? 4.1
TestedOnOS? AnyOS?
ShouldRunOnOS? AnyOS?
InstalledOnTWikiOrg? No
DemoUrl? http://home.org.au
DevelopedInSVN? No
ModificationPolicy? ContactAuthorFirst?
RelatedTopics?
I Attachment Action Size Date Who Comment
gifgif fullscreen.gif manage 121.5 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
gifgif iconic.gif manage 60.8 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
gifgif iconic_preview.gif manage 14.1 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
gifgif preview_splattered_edit.gif manage 20.3 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
gifgif screenshot.gif manage 50.3 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
jsjs skindemo.js manage 2.5 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
gifgif splattered_edit.gif manage 62.4 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script
pngpng wikiringlogo20x20.png manage 1.3 K 08 Dec 2008 - 03:55 AdminUser? Saved by install script

Copyright & by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding CTSPedia? Send feedback