Ignore:
Timestamp:
11/24/08 10:14:44 (4 years ago)
Author:
SvenDowideit
Message:

Item273: move to Foswiki

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/WidgetsSkin/data/Foswiki/WidgetsSkin.txt

    r908 r912  
    3636Download the zip file for your chosen design, and unzip it in the directory on the server that corresponds to this URL: %PUBURL%/%WEB%/%TOPIC%. Then type the full URL into the text box in the browser. 
    3737 
    38 <nop>%TOPIC% is a simple TWiki Skin that re-uses these style and HTML definitions, so making designs done for Moveable Type available to TWiki sites. 
     38<nop>%TOPIC% is a simple Foswiki Skin that re-uses these style and HTML definitions, so making designs done for Moveable Type available to Foswiki sites. 
    3939 
    4040Aside from the ability to re-use these designs, there are several other advantages to this skin: 
    4141   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*. 
    42    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, 
     42   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, 
    4343   3 This also means the same CSS can be *shared with other applications* (such as Six Apart based blogs). 
    44    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. 
    45  
    46 You can preview some design ideas at the [[http://www.sixapart.com/movabletype/styles/library][the Moveable Type style library]]. To use one of these designs with TWiki,  
    47 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,  
     44   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. 
     45 
     46You can preview some design ideas at the [[http://www.sixapart.com/movabletype/styles/library][the Moveable Type style library]]. To use one of these designs with Foswiki,  
     47you 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 Foswiki,  
    4848as 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.  
    4949 
    50 Alternatively you can visit [[http://www.home.org.au/cgi-bin/view/TWiki/WidgetsSkin][Sven's personal Blog]] for a *DEMO*. 
     50Alternatively you can visit [[http://www.home.org.au/cgi-bin/view/Foswiki/WidgetsSkin][Sven's personal Blog]] for a *DEMO*. 
    5151 
    5252<nop>%TOPIC% is a <img src="%ATTACHURLPATH%/wikiringlogo20x20.png" /> [[http://www.wikiring.com][WikiRing]] partnership production. 
     
    5959 
    6060The skin uses two CSS files; the reusable CSS that defines the Moveable Type 
    61 classes, and a mapping CSS that adds additional classes that TWiki requires, 
     61classes, and a mapping CSS that adds additional classes that Foswiki requires, 
    6262but aren't defined by the Moveable Type standard. 
    6363 
    64 Once you have chosen your CSS and layout, you must tell TWiki to use those 
     64Once you have chosen your CSS and layout, you must tell Foswiki to use those 
    6565options. If you have used the Theme Browser to select your preferred setup, 
    6666you can copy and paste the following section to your 
     
    7676Get the Moveable Type compatible CSS and images from this topic (must be in the %SYSTEMWEB%): 
    7777   * Set WIDGETSSKIN_CSSFILE = %CSS%CURRENTCSS%% 
    78 Get the extra CSS required by TWiki from this topic 
    79    * Set WIDGETSSKIN_TWIKICSSFILE = %URLPARAM{"twikicssfile" default="%PUBURLPATH%/%WIDGETSSKIN_DESIGNTOPIC%/TWiki.css"}% 
     78Get the extra CSS required by Foswiki from this topic 
     79   * Set WIDGETSSKIN_TWIKICSSFILE = %URLPARAM{"twikicssfile" default="%PUBURLPATH%/%WIDGETSSKIN_DESIGNTOPIC%/Foswiki.css"}% 
    8080Set the column preference: 
    8181   * Set WIDGETSSKIN_COLUMNS = %COLS%CURRENTCOLS%% 
     
    9090---++ Customisation 
    9191Customisation of this skin to create your own look and feel is very straightforward. You only have to develop (or re-use) a CSS file.  
    92 You can also customise the _text section definitions_ (WIDGETSSKIN_DESIGNTOPIC) and the _TWiki css_ WIDGETSSKIN_TWIKICSSFILE)  
     92You can also customise the _text section definitions_ (WIDGETSSKIN_DESIGNTOPIC) and the _Foswiki css_ WIDGETSSKIN_TWIKICSSFILE)  
    9393for even greater control over the rendering, but this is not necessary for most applications. 
    9494 
     
    9797There is documentation for the required set of CSS classes and tags found at [[http://www.thestylearchive.com/help/stylesheet_reference][Stylesheet Reference]] and other related pages. 
    9898 
    99 Once you have a CSS that you want to use, simply upload it to a TWiki topic and point the WIDGETSSKIN_CSSFILE setting at it. 
     99Once you have a CSS that you want to use, simply upload it to a Foswiki topic and point the WIDGETSSKIN_CSSFILE setting at it. 
    100100 
    101101For 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: 
    102102   1 Copy the text from the [[%SCRIPTURL{view}%/%WEB%/WidgetsSampleDesign?raw=on][WidgetsSampleDesign]] topic and paste it to =YourWidgetDesign= (or another name of your choosing). 
    103    1 Copy the WidgetsSampleDesign attachments =TWiki.css= and =base-weblog.css= to your new topic (save the files locally, and then upload them again to your new topic) 
    104    1 Attach your custom TWiki CSS and imagefiles to your new topic. 
     103   1 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) 
     104   1 Attach your custom Foswiki CSS and imagefiles to your new topic. 
    105105   1 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. 
    106106 
    107 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. 
     107You 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. 
    108108 
    109109Finally you can also customise the common text sections in your design by editing the _Moveable Type Common Text sections_.  
     
    119119   * skin - must be set to Widget 
    120120   * cssfile - the url to the Widget css file you want to view 
    121    * twikicssfile - the url to the TWiki.css file (usually directly linked to the widgetstopic) 
     121   * twikicssfile - the url to the Foswiki.css file (usually directly linked to the widgetstopic) 
    122122   * widgetstopic - the topic (in the %SYSTEMWEB% only) that the Widget common sections come from 
    123123   * widgetscolumns - column setting (one-column, two-column-left, two-column-right, three-column) 
     
    133133---++ Contrib Info 
    134134 
    135 This skin is an example of how to make a [[%SYSTEMWEB%.Skins][Skin]] _without_ duplicating the work of the TWiki Core release. It reuses the default skin, and only adds a =foswiki.Widget.tmpl=  
     135This skin is an example of how to make a [[%SYSTEMWEB%.Skins][Skin]] _without_ duplicating the work of the Foswiki Core release. It reuses the default skin, and only adds a =foswiki.Widget.tmpl=  
    136136(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. 
    137137 
    138 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. 
     138You can use this technique to create a FoswikiSkin 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. 
    139139 
    140140%TABLE{ id="ContribInfoTable"}% 
    141 |  Contrib Author: | TWiki:Main.SvenDowideit - SvenDowideit@fosiki.com [[http://fosiki.com][fosiki]] - a <img src="%ATTACHURLPATH%/wikiringlogo20x20.png" /> [[http://www.wikiring.com][WikiRing.com]] partner | 
    142 |  Copyright &copy;: | !SixApart and designs by various, twiki adaption by TWiki:Main.SvenDowideit - SvenDowideit@fosiki.com | 
     141|  Contrib Author: | Foswiki:Main.SvenDowideit - SvenDowideit@fosiki.com [[http://fosiki.com][fosiki]] - a <img src="%ATTACHURLPATH%/wikiringlogo20x20.png" /> [[http://www.wikiring.com][WikiRing.com]] partner | 
     142|  Copyright &copy;: | !SixApart and designs by various, twiki adaption by Foswiki:Main.SvenDowideit - SvenDowideit@fosiki.com | 
    143143|  License: | Various Open Source | 
    144 |  Description: | a TWiki skin based on the HTML used by [[http://www.thestylecontest.com][The Style Archive]] and [[http://www.sixapart.com/movabletype/styles/library][The Six Apart style library]] | 
     144|  Description: | a Foswiki skin based on the HTML used by [[http://www.thestylecontest.com][The Style Archive]] and [[http://www.sixapart.com/movabletype/styles/library][The Six Apart style library]] | 
    145145|  Screenshot: | <a href="%ATTACHURL%/fullscreen.gif"><img class="demoImage"  src="%ATTACHURL%/screenshot.gif" alt="Click for full screen image" width="600" height="130" /></a> | 
    146146|  Screenshot: | <a href="%ATTACHURL%/splattered_edit.gif"><img class="demoImage"  src="%ATTACHURL%/preview_splattered_edit.gif" alt="Click for full screen image" width="600" height="130" /></a> | 
     
    153153|  Change History: | <!-- versions below in reverse order -->&nbsp; | 
    154154|  7 Dec 2007:  | stop the demo images from overflowing the design, other Skin fixes | 
    155 |  15 Oct 2007: | Doc rewrite - TWiki:Main.CrawfordCurrie | 
     155|  15 Oct 2007: | Doc rewrite - Foswiki:Main.CrawfordCurrie | 
    156156|  30 Mar 2007: | initial release of Skin |  
    157157|  Home: | [[http://foswiki.org/Extensions/%TOPIC%][%TOPIC%]] | 
     
    161161__Related Topics:__ %SYSTEMWEB%.DefaultPreferences, %USERSWEB%.SitePreferences 
    162162 
    163 -- TWiki:Main/SvenDowideit - %DATE% 
     163-- Foswiki:Main/SvenDowideit - %DATE% 
    164164 
    165165<!-- 
Note: See TracChangeset for help on using the changeset viewer.