create new tag
, view all tags

SeeSkinDev Discussion: Page for developer collaboration, enhancement requests, patches and improved versions on SeeSkin contributed by the TWikiCommunity.
• Please let us know what you think of this extension.
• For support, check the existing questions, or ask a new support question in the Support web!
• Please report bugs below

Feedback for SeeSkin

Complete Overhaul In Progress

I'm completely overhauling SeeSkin. For those of you tracking cvs, the c3 variant has replaced the default SeeSkin and SeeSkinToo is no more.

You can see the new look at Sandbox.SeeSkinDemo locally and live at http://maphew.freeshell.org/ .

this will be the third, and probably last, time I do a complete rewrite. (I'm tired of this and want to move on!) Current SeeSkin users speak up and I'll attempt to create a smooth transition. If there is no noise I'll just assume nobody but me uses this and just drop in the rewrite. -- MattWilkie - 07 Aug 2003


This is my first attempt at building a skin for TWiki. No doubt there are some fundamental flaws in my approach, especially in regards to the template files. Constructive criticism is welcome. I've tried to make it portable.

-- MattWilkie - 13 Nov 2002


%SEP% formatting is inconsistant - fixed

The current style sheets included seem to muck with the %SEP% formatting making for an inconsistent display of the menus in IE5.5. -- TomKagan - 27 Nov 2002

This is a problem I haven't been able to get to the bottom of yet. For some reason on certain pages the %SEP defined in see.tmpl is ignored and twiki.tmpl is used instead. I don't know whether the fault lies with seeskin or twiki; See SepVarNotUsed -- MattWilkie - 27 Nov 2002

It occurs to me that you might have structured your templates differently than what TWiki is expecting internally (maybe it's in the docs, but I couldn't find it - I'm examining code). From what I can tell, TWiki might be happier if you renamed "see.tmpl" to "twiki.see.tmpl" and change the the include usage from "see" to "twiki" and let the template code figure it out. I'm not sure at the moment. I'll have some time this weekend to play with it further. -- TomKagan - 27 Nov 2002

Wrong %WEBBGCOLOR% when viewing TWikiPreferences

Skin seems to forget the Web level %WEBBGCOLOR% when display TWikiPreferences (that page defines a default value - probably related to this). -- TomKagan - 27 Nov 2002

I've tried disabling %WEBBGCOLOR in TWikiPreferences but the problem remains. Viewing source on the rendered TWikiPreferences shows the correct value for BODY. This one perplexes me. -- MattWilkie - 27 Nov 2002

minor display annoyances in IE5.5 when editing - fixed

When editing, the included style sheets don't seem to like the TWikiBetaRelease's %<nop%>EDITBOXWIDTH% and %EDITBOXSTYLE% changes causing minor display annoyances in IE5.5. -- TomKagan - 27 Nov 2002

Ahhh so that's where that blip comes from, thank you. Commenting out textarea { width: 95%;} in ss-layout.css seems to cure it. -- MattWilkie - 27 Nov 2002

UPDATE: Commenting out textarea does not work. The width of the edit box keeps changing as you type. It has something to do with line-wrapping. When typing on a line that wraps, the width of the text area box increases. Move the mouse cursor over a link outside the box, TextFormattingRules for example, causes the text area box to snap back to it's original width.

When using units other than percent (px,pt,em,ex), (e.g, textarea { width: 50em;} ) the textarea box stays one size, however then it doesn't resize according to the browser width which is the whole point. -- MattWilkie - 02 Dec 2002

NEW Fixed by removing the wrapper and content divs from the edit template. They were not doing much for the structure/display of the edit page anyway, being present mostly for consistancy with the view template. An updated edit.see.tmpl is in CVS (see ReadmeFirst). -- MattWilkie - 19 Dec 2002

"oops" pages don't follow the skin template yet - workaround

UPDATED On the TODO list, ( TomKagan supplied a fix which makes SeeSkin use the default TWiki skin where a SS one does not yet exist; thanks!)

Idea Bin

no need to sign contributions. Unless you want to of course.

End users build their own stylesheets.

Given that stylesheets can be layered, with a little bit of javascript or something and some well designed sytlesheets it should be possible to have end users build their own sheets. For example on meyerweb, old.css & basic.css are the foundation, and flipped.css simply changes a few elements. Simply modularize (is that a word?) and extend this same concept. For example load basic, then darkfall, and then flipped (and then..., and then...).

Is it even possible to "stack" alternate sylesheets in the browser? Or would this have to be done server side?

Apparently http://www.waferbaby.com/ does things like this.

Content before structure:

implemented, 05-June

Have the content of the page load before the structure -- navigation, menus, etc. -- even though the structure is displayed at the top of the page.

now a Codev topic: ContentBeforeStructure

Separate link colours by type

Within page links really should look different from standard links, and external-to-site links should look different from within-this-site links.

Pure CSS Popout Menus

It is the solution for having the contents of the Diff and More menus accessible without Yet Another Trip to the Server (YATS), and elegant too.

"you can hover over some of the links and get a popout menu. As you drill down, some of the links in those menus lead to popout submenus. And it's all driven by CSS and some nested lists. Absolutely no Javascript was used in the making of these menus"

- http://www.meyerweb.com/eric/css/edge/menus/demo.html

Deferred because it isn't cross-browser and I'm concentrated on the fundamentals for now. Whiz bang stuff for particular browser comes later.

Don't Use CSS to imitate structure

Don't use CSS style rules as a substitute for proper markup. Use HTML tags for the structure, and CSS to control the presentation. Use H1,2,3 for headings and blockquote for long quotations, not for large bold fonts and indented paragraphs.


Mostly implemented

Proper semantic structure for menu items

Change topicaction to a list (DL), with the buttons as definition terms (DT) and the accesskey cues as definitions (DD). It is my hope to find a way to display the DD above/below the button somehow. CSS is used to reflow the list all in one line and which wraps to browser width.

Done, _using item lists instead, see http://www.alistapart.com/stories/taminglists/ _

Access Keys

See: AccessKeys

Currently solution is to use LABEL and FIELDSET to surround the buttons like this:

AccessKeys: S = Save, Q = Quiet Save, K = Checkpoint, P = Preview, C = Cancel

A drawback to this approach is that the fieldset legend will not wrap to a smaller screen width.

A better implementation would be to use BUTTON instead of INPUT, which allows one to use different text for the button face (what the user sees) from the value attribute (what is passed to the script). This also allows the same akey class to be used for both the buttons and regular links.

This worked perfectly in Mozilla and not at all in IE (it looks right but the submit buttons don't work properly). Maybe someone else will be able to figure this out. Example: .

There is probably a bug in IE. Further testing has revealed that IE passes the text between the button tags, including underline (Preview) for the first item listed in the form to the script rather than the contents of value="Preview" . Yuk.

Done but could use some improvements

InternationalisationEnhancements NEW

Since the forthcoming BeijingRelease has some InternationalisationEnhancements, it would be good if SeeSkin could support these, enabling use of international characters in WikiWords, and more - the changes are very easy, see InternationalisingYourSkin for details.

-- RichardDonkin - 05 Jan 2003

Internationalising done. I would appreciate feedback on it's success or lack of it.

-- MattWilkie - 06 Jan 2003

Very quick! I'll have a go at this, thanks for the updates.

Currently, the changes necessary are in a state of flux, which I realised only after posting my comment, so there will be another round of changes once the final URL-encoding syntax is in... However, this should just be a matter of a single set of global replaces, probably with a shell script - the hard part is identifying all the FORM submission URLs initially.

-- RichardDonkin - 07 Jan 2003

The syntax for skin changes is now finalised, see InternationalisingYourSkin for the links and overview.

-- RichardDonkin - 08 Jan 2003

SeeSkin has been updated to use %INTURLENCODE. Changes are in CVS.

-- MattWilkie - 08 Jan 2003


The skin looks very nice. ( thank you ) Minor problems found (so far):

  1. The current style sheets included seem to muck with the %SEP% formatting making for an inconsistent display of the menus in IE5.5.
  2. Skin seems to forget the Web level %WEBBGCOLOR% when display TWikiPreferences (that page defines a default value - probably related to this).
  3. When editing, the included style sheets don't seem to like the TWikiBetaRelease's %<nop%>EDITBOXWIDTH% and %EDITBOXSTYLE% changes causing minor display annoyances in IE5.5
  4. "oops" pages don't follow the skin template yet.
  5. I corrected a small documentation bug in your "optional" instructions example at SeeSkin.
    1. Thank you. --MW

-- TomKagan - 27 Nov 2002

Regarding the %SEP% problem: it occurs to me that you might have structured your templates differently than what TWiki is expecting internally (maybe it's in the docs, but I couldn't find it - I'm examining code). From what I can tell, TWiki might be happier if you renamed "see.tmpl" to "twiki.see.tmpl" and change the the include usage from "see" to "twiki" and let the template code figure it out. I'm not sure at the moment. I'll have some time this weekend to play with it further.

-- TomKagan - 27 Nov 2002

...edited and rearranged my initial response to TomKagan's bug report so they are easier to follow; added more info on the behaviour of the IE textarea bug.

-- MattWilkie - 02 Dec 2002

I was able to fix the %SEP% problem and also the "oops" problem: I renamed the "see.tmpl" to "twiki.see.tmpl", then edited all the other SeeSkin templates by changing the include from "see" to "twiki". I also moved "htmldoctype" macro usage to where it belonged right after the include line (you had it before the include). This corrected both problems. I leave for you the editing problem, the TWikiPreferences display problem, and uploading a corrected version of the skin. smile -- TomKagan - 04 Dec 2002

%SEP% Thank you for digging into this Tom. I don't know why I would include 'twiki' when the Master Template I want is 'see'. However, like you said, it works.

From TWikiTemplates: "Templates and TWikiSkins work transparently and interchangeably. For example, you can create a skin that overloads only the twiki.tmpl master template, like twiki.print.tmpl, that redefines the header and footer." Since the "see.tmpl" is really overloading functionality of "twiki.tmpl", this is why the file should be called "twiki.see.tmpl". Using this name is required in order to make the %SEP% and "oops" processing in other templates include the correct "twiki.tmpl" file for the SeeSkin redefinition of these macros. Changing the other SeeSkin templates from using "see.tmpl" to using "twiki.tmpl" and letting the TWiki code figure out which file to use just follows the standard used by all other templates the SeeSkin doesn't need to recreate in order to change their look and feel.

-- TomKagan - 06 Dec 2002_

htmldoctype must be the first line in the rendered html page else it is not valid (x)html (http://www.alistapart.com/stories/doctype/). If %TMPL:INCLUDE{"twiki"} comes first in the template then any comments in that file get rendered before the doctype. In any case, the order of TMPL:DEF and TMPL:P doesn't matter because twiki reads the template files twice. Look for "Two-pass processing" of the section 'How Template Variables Work' in TWikiTemplates.

-- MattWilkie - 06 Dec 2002

True, but the problem was not because the skin used a variable before it was defined, so "Two-pass processing" doesn't apply here. The SeeSkin was just generating incorrect html. I had to move the "htmldoctype" to the top of the template to get it to generate the html correctly.

Two more bugs found: a couple of html comments in the "twiki.see.tmpl" were getting pushed out by mistake before anything else because the comments were not contained within any "DEF" sections. Removing the lines fixed this. Also, the "view.see.tmpl" wasn't putting the close of "body" and "html" tags in the correct place.

-- TomKagan - 06 Dec 2002

I rearranged the page so that comments fall at the end. This should make it easier for people who just want to add a couple of words and don't want to have to figure out where it would fit in the document structure.

-- MattWilkie - 08 Jan 2003

I was quite impressed with ss2-menu-left.gif and downloaded the See Too zip file.

I really liked the way information was presented in ss2-menu-left.gif, e.g., Quick Install appearing near the top of the page.

Unfortunatley, my mileage varied. What is most important is that I no longer can edit a page. I get an "Object Not Found" message.

I fail to see a page such as represented in ss2-menu-left.gif. For instance, sections and menu appear at the bottom of my pages using Mozilla 1.0.1 running on RH8 machine.

Another curious thing is that Plugins appears as an uncreated site on my Web Preferences pages.

I hesitate to ask about this, given your previous ridicule about asking for help; nevertheless I would like to be able to edit TWiki again.

Any suggestions?

(A segment of agonized Newbie time passes...)

Ah, as EmilyLaTella would say, "Nevermind." After looking more closely at the error, I came to the conclusion I was lacking a function called savemulti. I downloaded KoalaSkin and Voila' -- everything started to work better, to include the appearance of pages such as represented in ss2-menu-left.gif.

I misread the information about See Too and thought the package complete; I failed to realize that KoalaSkin was necessary.

See Too really does have a nice appearance.

-- JonathanSmith - 21 Feb 2003

Thank you for the feedback. I had assumed that anybody trying See Skin Too would have already installed SeeSkin (which includes KoalaSkin's savemulti script). I've updated the note accordingly.

As for what it looks like on your machine: SSToo is still in the early stages of creation. It has bugs, particularily with the menu-left configuration; I've only been testing on one machine and two browsers so far. I hope to get it looking/working smoothly in any environment but I'm not there yet.

>See Too really does have a nice appearance.


-- MattWilkie - 21 Feb 2003

I wanted to say that the top-mounted functions in SS2-menu-top (see ss2-menu-top.gif in the attachments to SeeSkin) could be a great idea. Putting the edit functions etc up there makes it look more like an application, so people might clue in faster. I'm trying to pick a shortlist of CMSes to run a tech support knowledgebase, and TWiki is one of my top choices so far. I'm going to have us try that arrangement during user testing, if the project flies, and see how it works. I'm stealing that idea. Yoink!

-- BronwynBoltwood - 28 Mar 2003

Use menu-at-top with my blessing if it works for you. The stuff in CVS is more refined and solid than the zipfile attached to the main SeeSkin topic.

-- MattWilkie - 29 Mar 2003

Related Pages: SeeSkin, SeeSkinAccessKeys, CssResources

Don't stop now. This is the best method for skinnning TWiki; i.e., straight CSS and clear separation between content and presentation. Not only am I a user of your seeskintoo skin but I have been following your progress at http://maphew.freeshell.org/

-- BobAdams - 17 Jul 2003

Hi Matt. How is this different from FreeSkin? Can you please comment on ConsolidateIntoFewerSkins??

-- MartinCleaver - 08 May 2004

- Matt - this has
4392 07-16-03 15:22 pub/Plugins/SeeSkin/SeeSkin.txt

Is this supposed to be in Data?

-- MartinCleaver - 08 May 2004 - 20:43

- mv pub/Plugins/SeeSkin pub/TWiki/
cd pub/TWiki/SeeSkin
mv SeeSkin.txt ../../../data/TWiki
-- MartinCleaver - 08 May 2004 - 21:17

It was intended to be INCLUDed (from pub into data ) in the same manner that Colas does with KoalaSkin. However this doesn't work on all hosts, or it didn't before some of the changes of a week or so ago. I "solved" this issue by duplicating them, pub/.../SeeSkin.txt should be a copy of data/.../SeeSkin.txt . They may have gotten out of synch; use the one with the latest date.

As for See/Free differences: SeeSkin predates FreeSkin by a year and a half or so. When I started there were no wholly CSS-based skins for TWiki. SS is nearly complete, being distributed with templates, css and scripts (savemulti - required, and photonsearch - optional). FS is distributed only with a single very lean template and no css. FS uses included topics to define the template, SS is all filesystem. FS only reworks the view template while SS reworks twiki, view, edit, attach, changeform, changes, moveattachement, preview, rdiff, renamebase, search .SS uses the twiki template inheritance model while FS does not.

In theory one could merge the two together by putting *.see.tmpl into the topics included by FreeSkin; some editing would be required. I've thought about it but haven't attempted it.

AurelioAHeckert has mentioned his intentions to upload a complete FreeSkin, rather than just the skeleton which enables it, which is what we have now, at some point. I imagine a lot of the differences which make SS currently "more complete" will disapear at that time.

In development terms, the stylesheet took almost as long as the template work (which is painful, and why I lost enthusiasm for completing the skin; 11 templates converted, only 55 more to go...). In my opnion any css based skin which doesn't include a css file is incomplete. smile

Neither FS or SS use an included css file (both need css files somewhere in $pub) like PatternSkin does. It only makes sense that if the templates are included topics the css should be too. If you are going to take the performance hit of including you might as well go all the way!

I will contribute to ConsolidateIntoFewerSkins but it may not be for awhile. My computer time these days is severely limited.

-- MattWilkie - 10 May 2004

SeeSkin and CairoRelease

To make SeeSkin work with CairoRelease edit templates/edit.see.tmpl and change the single occurence of savemulti to save

There may be other minor changes needed, but this is the only showstopper I'm aware of. At this point in time I'm not planning to bring the whole skin up to date as PatternSkin has largely scratched most of the itches which led me to create it. I may see if I can adapt the SeeSkin css files to work with PatternSkin as I like having my edit bar at the top. wink

-- MattWilkie - 10 Sep 2004

Edit | Attach | Watch | Print version | History: r40 < r39 < r38 < r37 < r36 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r40 - 2004-11-20 - MartinCleaver
  • 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.