create new tag
, view all tags

Implemented: Skin Browser to test drive skins

The TWiki.TWikiSkinBrowser is useful to easily browse and test drive skins installed on the system. Since Skins are visual, a screenshot of a defined size needs to be added to skins topics.


1. Update Skin home page

Skin authors are encourraged to add the Description, Screenshot, Base Name and the Dependencies rows to the Skin Info section of their Skin topic.

Please attach a 600x130 pixel screenshot and a full screen shot to the Skin topic, then update the href and img src to reflect the image names. The Base Name the name of your skin, e.g. name foo for template file view.foo.tmpl.

IDEA! Hint: You can cheat a little bit to get more content on the 600x130 pixel area. First reduce the font size a bit before you take the screenshot, then in the pixel editor move the content closer together before you clip the image.

The template topic to add new Skins is updated. Here are the rows you can add to your existing skin:

|  Description: |  |
|  Screenshot: | <a href="%ATTACHURL%/fullscreen.gif"><img src="%ATTACHURL%/screenshot.gif" alt="Click for full screen image" width="600" height="130" /></a> |
|  Base Name: |  |
|  Dependencies: |  |

Example for VoidSkin:

Description: A quiet, subdued look using css layout, subtle colors, and a minimum of graphics
Screenshot: screenshot.png
Base Name: classic
Skin Author: TWiki:Main/DaleBrayden
Skin Version: 08 Apr 2003
Change History:  
25 Jul 2004: Initial version
08 Apr 2003: completed the remaining templates, added link-customization settings, new color schemes, and a choice of sizable- or constant-size fonts
Skin Home: http://TWiki.org/cgi-bin/view/Plugins/VoidSkin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/VoidSkinDev

In case missing, we will add the rows to Skins that get bundled with CairoRelease.

2. Create Skin browser topic in TWiki web

The TWiki.TWikiSkinBrowser topic shows a table with all Skins currently installed. This is done with a FormattedSearch. A preview with this topic link allows users to test drive a skin on the current topic.

Static example for illustration:

Screenshot Skin: Description
Classic skin ClassicSkin: The classic TWiki skin, bare bone and functional, minimum of graphics

preview with this topic
screenshot.png VoidSkin: A quiet, subdued look using css layout, subtle colors, and a minimum of graphics

preview with this topic

-- PeterThoeny - 25 Jul 2004

This feature should be done as part of bundling SkinsForCairoRelease.

-- PeterThoeny - 25 Jul 2004

I propose that we also include (attach) screenshots of the whole pages. The cut-out image in the table above can be a link to the full screen image.

-- ArthurClemens - 25 Jul 2004

Good point about the full screen image. Added link accordingly.

I also changed the spec from Skin settings to table rows.

Question on size: All screenshots should share the same size. Not too big, so that not much scrolling is needed; and not too small, so that the visuals can be conveyed. I changed above example from 400x130 to 600x130, which is a good middle ground.

-- PeterThoeny - 25 Jul 2004

Peter, Arthur,

As laudable as this idea is, I foresee a couple of problems:

  1. No skin except Pattern has been tested against/ported to Cairo, and even Pattern is right up to the wire. Do you really want to advertise non-functional skins?
  2. There is a code freeze tomorrow as requested by Sven and apparently agreed in CairoRelease. Trying to rush this in now presumably takes developer time away from fixing those outstanding bugs and incomplete features already listed in CairoRelease.
Given that, I don't believe it is appropriate to assign this to CairoRelease. The spec above can be fulfilled by pages on twiki.org, and there is no reason to bind the creation of those pages to Cairo and thus delay the release yet further.

-- CrawfordCurrie - 25 Jul 2004

There is no risk in adding this page to CairoRelease, no code change needs to be done. The question is what SkinsForCairoRelease to ship. EnhancedSkinHandling was one of the goals for Cairo.

-- PeterThoeny - 25 Jul 2004

I'd like to suggest putting the screenshot column first and then placeing the try link under the description as there appears to be plenty of space. They extra space could also be used to make the link more descriptive. I think this would allow easier scanning of the table as most people will scan the pictures first, then read the description and preview the skin.

-- SamHasler - 27 Jul 2004

Good idea Sam! Feel free to move your example to the top and to change TWiki.TWikiSkinBrowser

-- PeterThoeny - 25 Jul 2004

Ok, done.

-- SamHasler - 28 Jul 2004

Edit | Attach | Watch | Print version | History: r11 < r10 < r9 < r8 < r7 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r11 - 2004-07-28 - SamHasler
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.