Changeset 912 for trunk/WidgetsSkin/data/Foswiki/WidgetsSkin.txt
- Timestamp:
- 11/24/08 10:14:44 (4 years ago)
- File:
-
- 1 edited
-
trunk/WidgetsSkin/data/Foswiki/WidgetsSkin.txt (modified) (9 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/WidgetsSkin/data/Foswiki/WidgetsSkin.txt
r908 r912 36 36 Download 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. 37 37 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. 39 39 40 40 Aside from the ability to re-use these designs, there are several other advantages to this skin: 41 41 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, 43 43 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 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 Foswiki, 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 Foswiki, 48 48 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. 49 49 50 Alternatively you can visit [[http://www.home.org.au/cgi-bin/view/ TWiki/WidgetsSkin][Sven's personal Blog]] for a *DEMO*.50 Alternatively you can visit [[http://www.home.org.au/cgi-bin/view/Foswiki/WidgetsSkin][Sven's personal Blog]] for a *DEMO*. 51 51 52 52 <nop>%TOPIC% is a <img src="%ATTACHURLPATH%/wikiringlogo20x20.png" /> [[http://www.wikiring.com][WikiRing]] partnership production. … … 59 59 60 60 The 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,61 classes, and a mapping CSS that adds additional classes that Foswiki requires, 62 62 but aren't defined by the Moveable Type standard. 63 63 64 Once you have chosen your CSS and layout, you must tell TWiki to use those64 Once you have chosen your CSS and layout, you must tell Foswiki to use those 65 65 options. If you have used the Theme Browser to select your preferred setup, 66 66 you can copy and paste the following section to your … … 76 76 Get the Moveable Type compatible CSS and images from this topic (must be in the %SYSTEMWEB%): 77 77 * Set WIDGETSSKIN_CSSFILE = %CSS%CURRENTCSS%% 78 Get the extra CSS required by TWiki from this topic79 * Set WIDGETSSKIN_TWIKICSSFILE = %URLPARAM{"twikicssfile" default="%PUBURLPATH%/%WIDGETSSKIN_DESIGNTOPIC%/ TWiki.css"}%78 Get the extra CSS required by Foswiki from this topic 79 * Set WIDGETSSKIN_TWIKICSSFILE = %URLPARAM{"twikicssfile" default="%PUBURLPATH%/%WIDGETSSKIN_DESIGNTOPIC%/Foswiki.css"}% 80 80 Set the column preference: 81 81 * Set WIDGETSSKIN_COLUMNS = %COLS%CURRENTCOLS%% … … 90 90 ---++ Customisation 91 91 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. 92 You can also customise the _text section definitions_ (WIDGETSSKIN_DESIGNTOPIC) and the _ TWiki css_ WIDGETSSKIN_TWIKICSSFILE)92 You can also customise the _text section definitions_ (WIDGETSSKIN_DESIGNTOPIC) and the _Foswiki css_ WIDGETSSKIN_TWIKICSSFILE) 93 93 for even greater control over the rendering, but this is not necessary for most applications. 94 94 … … 97 97 There 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. 98 98 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.99 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. 100 100 101 101 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: 102 102 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. 105 105 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. 106 106 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.107 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. 108 108 109 109 Finally you can also customise the common text sections in your design by editing the _Moveable Type Common Text sections_. … … 119 119 * skin - must be set to Widget 120 120 * 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) 122 122 * widgetstopic - the topic (in the %SYSTEMWEB% only) that the Widget common sections come from 123 123 * widgetscolumns - column setting (one-column, two-column-left, two-column-right, three-column) … … 133 133 ---++ Contrib Info 134 134 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=135 This 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= 136 136 (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. 137 137 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.138 You 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. 139 139 140 140 %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 ©: | !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 ©: | !SixApart and designs by various, twiki adaption by Foswiki:Main.SvenDowideit - SvenDowideit@fosiki.com | 143 143 | 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]] | 145 145 | Screenshot: | <a href="%ATTACHURL%/fullscreen.gif"><img class="demoImage" src="%ATTACHURL%/screenshot.gif" alt="Click for full screen image" width="600" height="130" /></a> | 146 146 | 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> | … … 153 153 | Change History: | <!-- versions below in reverse order --> | 154 154 | 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 | 156 156 | 30 Mar 2007: | initial release of Skin | 157 157 | Home: | [[http://foswiki.org/Extensions/%TOPIC%][%TOPIC%]] | … … 161 161 __Related Topics:__ %SYSTEMWEB%.DefaultPreferences, %USERSWEB%.SitePreferences 162 162 163 -- TWiki:Main/SvenDowideit - %DATE%163 -- Foswiki:Main/SvenDowideit - %DATE% 164 164 165 165 <!--
Note: See TracChangeset
for help on using the changeset viewer.
