Þ SeeSkin

Search

SeeSkin

...is a wholly Cascading Style Sheets -based skin for TWiki. It strives to find the right balance between simplicity, a pleasing appearance, and sound structural foundation -- a clean separation of content and display logic. It should look good in modern browsers while remaining completely accessible to older ones.

Quick Install

1. unpack the archive from twiki-root.
   1. if you use the TWiki web for your plugins, move */Plugins/* to */TWiki/*
2. if you don't already have it, add the savemulti script to $twiki/bin/.htaccess
3. Edit TWikiPreferences (or WebPreferences, or your UserName topic) and add the following:

---++ %PLUGINWEB%.SeeSkin preferences
      * Set PLUGINWEB = Plugins
      * Set SKIN = see
      * Set SEESOURCE = %PUBURLPATH%/%PLUGINWEB%/SeeSkin
      * Set EXTSTYLE = ss-default.css
      * Set LOGOCHAR = Þ

Change PLUGINWEB to where you usually install plugins and SeeSkin is installed. There are a few more optional but recommended things to do.

Personalising to your site

Logo Character

LOGOCHAR was designed to be any single character entity, e.g. &, ©, ¶, », etc. but with a little creativity and you could use any letter, or even a word (hint: try "t w i k i"). Use the Simple Character Entity Chart at evolt.org to choose your logo character. Blank is an acceptable value.

Making %Webs% work

Edit WebPreferences in each of your webs and add INLINESTYLE to customise on a per-web basis. The following settings work out of the box for the TWiki, Plugins, and Sandbox webs.

TWiki:

%PLUGINWEB%.SeeSkin per-web preferences
      * Set WEBBGCOLOR = #ffe0b0 
      * Set INLINESTYLE = #logochar{color:%WEBBGCOLOR%} #menu{background-color:%WEBBGCOLOR%} body {background-image:url(%SEESOURCE%/twiki-sepia.gif); background-position: left bottom; background-repeat: no-repeat; background-attachment: fixed;}

Plugins:

%PLUGINWEB%.SeeSkin per-web preferences
      * Set WEBBGCOLOR = #afc3dc
      * Set INLINESTYLE = #logochar{color:#e2e9f2} #menu{background-color:%WEBBGCOLOR%} body{ background-image:url(%SEESOURCE%/plugins.gif); background-position: left bottom; background-repeat: no-repeat; background-attachment: fixed;}

Sandbox:

%PLUGINWEB%.SeeSkin per-web preferences
      * Set WEBBGCOLOR = #eee
      * Set INLINESTYLE = #logochar{color:%WEBBGCOLOR%} #menu{background-color:%WEBBGCOLOR%} body{ background-image:url(%SEESOURCE%/sandbox.gif); background-position: left bottom; background-repeat: no-repeat; background-attachment: fixed;}

The WEBBGCOLOR variable is already set on the WebPreferences page, so you don't really need to set it again here. it's just easier to have these two settings in one place. Remember which ever one comes last wins.

INLINESTYLE can be as long as you want as long as you want providing it is a single unbroken line. It is a very good idea to keep it as short and sweet as possible. If you find your self adding more and more styles, it's time to move them to an external stylesheet.

The easiest way to add background images for your webs is to attach them to this topic.

Going beyond

EXTernal STYLEsheet is where 90% of magic happens. It is advisable to make a copy and use that for tweaking. This way future upgrades won't clobber your hard work inadvertantly. TopStyle is an excellent CSS editor for Windows. See TWiki:Codev/CssResources for tools on other platforms, along with many other good learning resources.

For inspiration and a solid demonstration of how dramatically you can change a site "simply" by editing the stylesheet there is no better place to visit than the CSS Zen Garden.

TODO

• finish off the templates so far only twiki, view, edit and preview are done (why on earth are there so many oops templates??)
• work on some radically different appearances, a la zen garden.

As always, feedback is welcome and contributions cheered.

-- MattWilkie? xx Jul 2003

Þ