fosiki is in Private Beta. Please email SvenDowideit@fosiki.com

MoveableTypeSkin Contrib Package

The Moveable Type style repository was set up in early 2006 to capture the best designs for blogs built using Moveable Type. Designers were required to implement their designs using a standard set of styles, and their work could be demonstrated using some sample HTML layouts. The competition yielded some delightful designs; for example,

Screenshot

Theme Browser

If the skin is installed, you can use this browser to mix and match layouts with various CSS files that are available from the Six Apart website. Use the navigation buttons to select between options. Click on the theme name to see the CSS.

Choose DESIGNTOPIC:     go_back MoveableTypeSampleDesign (1 of 3) go_forward

Choose CSSFILE:     go_back Sample3Theme (1 of 36) go_forward

Choose COLUMNS:     go_back two-column-left (1 of 4) go_forward

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

IDEA! Unfortunately there is no easy way to preview designs found from the style archive browser. But it's easy to download and install these designs. Download the zip file for your chosen design, and unzip it in the directory on the server that corresponds to this URL: http://fosiki.org/pub/TWiki/MoveableTypeSkin. Then type the full URL into the text box in the browser.

MoveableTypeSkin is a simple TWiki Skin that re-uses these style and HTML definitions, so making designs done for Moveable Type available to TWiki sites.

Aside from the ability to re-use 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 TWiki, so any stylesheet you develop for this skin will work with all versions of TWiki 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 TWiki's base templates for most of the TWiki-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 TWiki, 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 re-use with TWiki, 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.

MoveableTypeSkin is a WikiRing partner production.

Settings

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 TWiki requires, but aren't defined by the Moveable Type standard.

Once you have chosen your CSS and layout, you must tell TWiki 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 TWikiPreferences 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

Customisation of this skin to create your own look and feel is very straightforward. You only have to develop (or re-use) a CSS file. You can also customise the text section definitions (MOVEABLETYPESKIN_DESIGNTOPIC) and the TWiki css MOVEABLETYPESKIN_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 Stylesheet Reference and other related pages.

Once you have a CSS that you want to use, simply upload it to a TWiki topic and point the MOVEABLETYPESKIN_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 MoveableTypeSampleDesign topic and paste it to YourMoveableTypeDesign (or another name of your choosing).
  2. Copy the MoveableTypeSampleDesign attachments TWiki.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 TWiki CSS and imagefiles to your new topic.
  4. Edit your new topic and modify the MOVEABLETYPESKIN_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 TWiki.css attached to your design topic. This file contains most TWiki 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 two sample design topics, MoveableTypeSampleDesign and MoveableTypeSample2Design.

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.

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 (usually directly linked to the moveabletypetopic)
  • 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)

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 where TWiki is running.

Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.

  • If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
  • If you have any problems, then you can still install manually from the command-line:
    1. Download one of the .zip or .tgz archives
    2. Unpack the archive in the root directory of your TWiki installation.
    3. Run the installer script ( perl <module>_installer )
    4. Run configure and enable the module, if it is a plugin.
    5. Repeat for any missing dependencies.
  • If you are still having problems, then instead of running the installer script:
    1. Make sure that the file permissions allow the webserver user to access all files.
    2. Check in any installed files that have existing ,v files in your existing install (take care not to lock the files when you check in)
    3. Manually edit LocalSite.cfg to set any configuration variables.

Interesting URLS

Contrib Info

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.

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: 16520 (14 Mar 2008)
Change History:  
7 Dec 2007: stop the demo images from overflowing the design, other Skin fixes
15 Oct 2007: Doc rewrite - TWiki:Main.CrawfordCurrie
30 Mar 2007: initial release of Skin
Home: MoveableTypeSkin
Feedback: MoveableTypeSkinDev
Appraisal: MoveableTypeSkinAppraisal

Related Topics: TWikiPreferences

-- TWiki:Main/SvenDowideit - 22 May 2012


Edit • Attach • Print version • History: r2 < r1 • Backlinks • Raw View • Raw edit • More topic actions