create new tag
, view all tags

Pattern Skin Dev Archive 2 of 2

Page Description Type of bug Platform Browser name Comment Status
view Hard-wired backgrounds visual any any The background of #patternLeftBar, #patternMain and others are hardwired instead of being variables.  
view XHTML validation error on TWiki.org visual any Mozilla Firefox Through plugin for the Mozilla Firefox (HTML Validator - https://addons.update.mozilla.org/extensions/moreinfo.php?id=249) I perceive 6 acknowledgments in the icon located in the right inferior bar.  
view Some styles set by USERSTYLEURL do not override those in TWIKISTYLEURL visual Mac (client) Safari, Firefox I set .twikiForm display to none in TWIKISTYLEURL (to hide forms for causual browsers) but left it as set by default in USERSTYLEURL. In other areas, this worked fine but the forms remain hidden.  
view In TWikiPreferences, WIKIWEBLIST is not displayed properly visual Solaris 2.9 FireFox 1.0.3 When using the recommended %WEBLIST{"[[$name.%HOMETOPIC%][$name]]" separator=" %SEP% "}% to populate the WIKIWEBLIST variable, the resulting list is not displayed properly. Referenceing TWikiPreferences on twiki.org it appears that twiki.org suffers from the same issue. This appears to be a cosmetic issue.  
view User settings do not seem to work to enforce a web-specific style visual   IE Followed instructions and set USER... in WebPreferences topic to overwrite css in TWIKI... but change visible only in WebPreferences topic, other topics are unaffected  
view WebChanges should show current GMT time in date column header functional any any Lost functionality from ClassicSkin; useful to see how new latest change is regardless of time zone checked into SVN DEVELOP r4016
view XHTML validation error on TWiki.org functional any any PatternSkin on TWiki.org currently does not validate. Example validation of WikiName topic. The validation is OK with ClassicSkin The given topic contains (invalid) user entered text. To test validation, test an empty topic, like WebLeftBarWebsList and validation DONE
view nested form elements functional any any twiki.pattern.tmpl:71 // remove "form name="top" ...", then in WebTopBar // add "form name="top"..." back in around the "go" aka jump" input-text. Then, the quick search input text form can be added back in next to the "jump" form. This has been solved on twiki.org and in SVN DONE
view WebLeftBarPersonalTemplate should use %WIKIUSERNAME% rather than Main.%USERNAME% functional all   As it doesn't work correctly as is for sites using intranet login names. (or even renamed Main web). checked into SVN DEVELOP r3698
view twikiTopic spills out over twikiMain visual all firefox 1.0, safari When there is a very wide element in the twiki page, such as a huge table, or a very long line (I can see an example down below on this page too), the table or long line spills out past the right edge of the 'twikiTopic' box. The right edge twikiTopic box on the failing browsers always lines up with the right edge of the browser window. On IE, twikiTopic box expands to contain everything (with a few glitches), although, for example, the 'topic end' link does not move. Please see my eg.png attachment for an example screenshot. This cannot be helped.
preview Is there a way to have preview "show" that it is a preview page? The default skin would show a wallpaper behind the text saying "PREVIEW" in big red letters. visual Windows Mozilla Firefox 1.0   The wallpaper is still there, it is only partly hidden by the topic background (white with blue border). The title says "preview"...Perhaps a modified wallpaper that shows the word preview better would fit your needs. BTW, this image can be set in TWikiPreferences. DONE
view body uncoloured but background-color is set visual all all Accessibility problem: people using light foreground & dark background as default in their browser (because they have reading problems) see white text on white background.  
rdiff View raw from diff shows raw of HEAD not of REV functional all all This may be true of TWiki in general  
view WebTopBar is not per-web functional all all Its hardcoded to the %!TWIKIWEB%  
view Would like link to WebHome from web banner functional all all It would be nice if clicking the name of the web (at the top) took you to WebHome in that web.  
view PatternSkinDev bug: this topic is too big. There must be better way. Now that PS is the default twiki skin perhaps we should use the main BugReport system? visual        
view usability bug: the bottom bar should either be predefined or invisible to twiki guest. A guest has created TWikiGuestBottomBar in a way that suggests they were being personal (e.g. the same person appears to be a valid twiki user). He is probably confused, as are many about the idiosyncracies of twiki's authentication. functional       I am removing personal bottom bar: too confusing. DONE
view WebNotify always displays the LeftBar contents and includes a Javascript error ( functional Linux / Windows Browser IE6 WebNotify mail messages always contain the Left bar contents. And when opening the mail in Lotus Notes, a Javascript error is reported --> How do we remove these LeftBar contents and the related Javascript syntax error?  
view Phrasing above Site maps still says "background is this color" visual MacOS X Camino, Safari The background is white behind that sentence  
view In WebSearchAdvanced scope "both" is missing functional     Except this the appended text in WebSearch and WebSearchAdvanced should be deleted for overview reason. Just delete "Jump to topic" "WebChanges" "How to edit text"  
search The search view (WebChanges) in the Beta 24 Oct 2004 $Rev: 1780 looks awful with bad allignment of text. visual Independent IE and Firefox Reverting to the original Cairo search.pattern.tmpl makes it look like before. twiki.org looks OK?? Problem seen on more than one site upreved to the new beta  
edit A form with a text area field ignores the width setting from the form. functional   IE6 See TextAreaFieldInFormDoesNotFollowWidth for fix.  
view The twikiToolBar (Edit, Attach, and Printable at the top-left of all pages) is displayed inline on IE, and Netscape (Mozilla, Firefox), but in Opera they are displayed as blocks. Anything that would otherwise be on the top left of the TWiki page gets pushed slightly over to the right. visual MS Windows XP SP2 Opera 7.54 Check out TwikiToolbarDisplayInOpera which is where I put my fix for the problem, which takes care of both instances of the problems I could find.  
view table width=100% does not work visual Windows XP IE 6.0 I would like to add a table which attaches to the full width of the page. As resize the browser, I would like the table to resize as well. In the past, I have accomplihed this by setting the table "width" attribute to 100%. But this does not seem to work with the PatternSkin layout. Any suggestions? Thank you. -rams Tables cannot use a width of 100% because Explorer 5 and 5.5 renders the table at 100% of the page width, causing a scrollbar to appear. In IE 6 or Mozilla it works fine. To override the pattern skin default setting, use a style for the table: <table style="width:100%;">
view This doesn't work properly in Netscape, it appears as one flat page (with left menu on top of the page) visual Windows Netscape4.7 It's a nice skin, but w/o having it to work in Netscape it becomes unusable Correct. NS 4.7 is not supported.
view "Topic end" and "To Top" links point to latest revision when viewing a previous revision. Actually it removes all url parameters. functional     The link in the template is just <a href="#TopicEnd">. Any idea how to fix this?  
View On my browser the left bar in view is approximately twice as wide as the text contained in it, wasting a huge amount of screen real-estate that would be better used for content. It also doesn't get narrower when the window is narrowed; surely it is less important than the page content? Visual ? Konqueror Please check out the screenshot attachment  
View (WebChanges) When viewing WebChanges the pink table header overlaps the navigation links at the top of the page, making "version" look highlighted visual ? Konqueror    
Preview need AccessKeys for Save and Cancel functional TWiki (haha)   Alt+S and/or Enter for Save  
Update attachment the top-most table (which displays revision history of the file) does not dislpay in IE 6.0 or Safari; it displays fine in Firefox functional   IE 6.0 I just grabbed the latest (8/23) pattern zip file, and unzipped and replaced my old files ... but I am still getting the same problem  
all - twikiToolBar Edit Attach Printable are not horizontally aligned visual Windows NT5 DE Opera 7.54 see comment below  
view In the last zip package, the left bar and the content window does not balance at the top. There's one or two pixels difference, making the top horisontal line look a bit bumpy to the left. visual   IE    
view The "view raw text" link in the bottom menu does not update when displaying old revisions (like the "printable" link does). Is this on purpose or could you be pursuaded to add the currently displayed revision to this link also? functional        
view It would be helpful if the search box in the header pointed to TWiki.WebSearch using the view script so you can easily search again from the results page. functional        
view I sometimes I want to copy a topic name by double clicking the topic name at the top of a view, but when I do it also selects the "r1" of the revision text. Could a space be inserted into the template to fix this. functional Win IE / Moz    
view In IE that when the rev info line is selected it changes the text colour to blue but does not change the background color. visual Win IE    
rdiff Doesn't indicate the web the topic is in. functional        
rdiff The headers for different revision are the same color as headers in the difference text making it hard to tell them apart. functional        
Attach Input field not enough characters       Fix now in SVN DONE
View TOC icon not visible       Fix now in SVN DONE
Edit Order of buttons different from default skin visual     I have updated both pattern skin and classic skin DONE
Edit AccessKeys link should open new window functional     Corrected DONE


I've got two suggestions for improved user friendliness: 1) Bind Alt-E to edit 2) When entering editing mode, put keyboard focus in the edit area.

With these two enhancements, you can go through the edit cycle without using your mouse. To mee, that is really important.

I think the pattern skin is very impressive. Thanks a lot.

-- FinnSchiermerAndersen - 20 Aug 2004

Thanks Finn. I will add more access keys soon, but let me think a bit about a consistent setup. Suggestions are welcome!

-- ArthurClemens - 20 Aug 2004

The bindings used in the ambar skin worked fine for me. I don't think you should worry about overriding the binding for alt-E. In most browsers it is bound to the edit menu, but the important itemst on said menu, such as the search functions, are also bound to acces keys, so most of the time you never use Alt-E anyway.

Also, IMHO, It is most important to bind edit, save and cancel. The other functions have lower usage frequencise.. at least for me wink

-- FinnSchiermerAndersen - 20 Aug 2004

I always used the access keys in IE - they override the system menus so ALT-E is perfect. I don't care what it is bound to but do miss having keyboard access to Edit - it is one action that I perform often.

-- MartinCleaver - 05 Sep 2004

Tables generated from Search appear very wasteful of space. As an example, please look at ThomasWeigert. The search results now take about twice the space they used to take on Classic skin. It seems we are putting way to much space above and below the text of each table row. Is there a way of reducing this waste of screen real estate?

-- ThomasWeigert - 22 Aug 2004

Yes, the space is too wide if you don't have a topic summary. Somehow I always had a summary.

I have decreased the spacing now to 0.2em and 0.25em, so about half the size it was. I wouldn't want to go smaller, to preserve readability.

If you want to play with the spacing, in style.css the settings are at .twikiSearchResults .twikiTopRow and .twikiSearchResults .twikiBottomRow.

-- ArthurClemens - 22 Aug 2004

Now that TWiki.org has moved over to pattern I have a few observations:

  • On the edit page "Release edit lock" and "Minor changes, don't notify" only apply when clicking save, could they be more visually associated with that button?
    • I agree this should be done better. Especially since these checkboxes are within reach of the Cancel link. Go to my test page and click Edit to see a new proposal. -- AC - 23 Aug 2004
  • NEW On the edit page the 4 help links open in the plain skin which is not in pattern style.
  • When looking at a raw view of a topic there is no direct link back to viewing the topic.
    • Will fix later. -- AC - 23 Aug 2004
  • Diffs (especially with large context) aren't as nice as the default skin. Tables seem to lose styling and wrapping is affected. Compare this with this

And a few things that might just be down to personal preference. Does anyone else feel the same way about these or should I just create my own stylesheet?

  • I find the bold links stand out a bit too much, and slow down my reading speed. They also make some tables look bad. i.e. WebChangesForAllWebs
    • Having looked at it for a while now I tend to agree. Again, look around on my test site. I think now too this is better for readability. -- AC - 23 Aug 2004
  • Forms appear differently in view and edit mode. I think I would actually prefer the edit style in both cases.
    • I wanted to make a distinction between editable tables and non-editable tables in view mode. I prefer to have the view form as it is now, non-distractive, also visually the same as the attachment table. -- AC - 23 Aug 2004
  • I find the topic action bar at the bottom a little hard to navigate, being so dark. It would also be helpfull to reinforce the similarity of function if it and the "Edit Attach Printable" links at the top of the topic were visually similar.
    • I want to have a dark "footer" at the bottom. One as an end marker, two for similarity with other pages with action buttons. But I don't want to have a dark block at the top. I had this top-bottom similarity in mind at first, but I couldn't make it work nicely. -- AC - 23 Aug 2004
  • The web.topic name doesn't need to be in bold, it detracts from the first heading. I think it would look better if it merged seamlessly into the revision info.
    • Agreed. -- AC - 23 Aug 2004

And a couple of queries:

  • I'd like to be able to see the revision number at the top. I don't suppose it's possable to swap the top and bottom revision labels with css?
    • No, you can't. But I have put now the revision at the top. A very small speed enhancement smile -- AC - 23 Aug 2004
  • Is there a way to make followed links change colour only in my personal WebLeftBar section?
    • Done. I will post the new style.css shortly. -- AC - 23 Aug 2004

(Don't know if this is off topic or related to pattern skin, but I can't preview this topic, I get an internal server error. Hooray for save on edit smile )

-- SamHasler - 22 Aug 2004

Good feedback, Sam!
This skin does need some refinement. I agree with some of your proposals, with some I don't (I have my reasons). I have inserted my answers above.

-- ArthurClemens - 23 Aug 2004

After using it a while, I tend to become very annoyed at the large block of text below the edit window. On my screen it takes up 1/3 to 1/2 of the screen height. This in turn means that I often have "nested scrollbars" when editing - one for the edit window and an outer one for the entire page. I would very much like to loose the outer one. Have you considered moving all the "help" references into a left bar when editing, instead of having it below the edit window ?

-- FinnSchiermerAndersen - 24 Aug 2004

Problems with font sizes, especially in tables:

  • I have noticed inconsistencies between the font growth of texts in normal paragraphs and those in tables when using the font sizing features of actual Web Browsers. It seems that text in tables grows faster than text in normal body. I think this should be fixed.
  • IMHO text in tables should never ever be larger than text in normal paragraphs. That's a waste of space which leads to many unnecessary line breaks.

    • True. Could you give me your browser so I can check this? -- ArthurClemens - 25 Aug 2004

And I miss the bread crumbs at the top of the topic. IMHO the layout should be somewhat more symmetric, that means Infos and Actions should be available at the top and the bottom of the topic likewise (if possible).

  • About the breadcrumb: I am facing performance problems when duplicating this for bottom and top. -- ArthurClemens - 25 Aug 2004
  • I also miss the breadcrumb on top. We use it a lot at work. It is in our TWiki training material; people are used to navigate that way; our TWiki apps create it by default. I suggest to put it just on top unintrusively, possibly with smaller text in gray color. -- PeterThoeny - 26 Aug 2004

The DragonSkin is much simpler in look and feel although it lacks some enhanced features (like the savemore Buttons). It would make a good candidate for SimplerDefaultTemplates

  • You may have noticed that PatternSkin also has a few interface improvements on the Attach en Rename screen. -- ArthurClemens - 25 Aug 2004

-- FranzJosefSilli - 25 Aug 2004

i created PatternSkinPalette, which provides a template and instructions for creating a personalised set of colours.

-- WillNorris - 26 Aug 2004

PatternSkin is now in Cairo Release version. The things that are mentioned above and are still left to do will be addressed after Cairo.

-- ArthurClemens - 28 Aug 2004

I filed Codev.SendFeedbackDoesNotUseCurrentTopic as a bug for Cairo.

-- SteffenPoulsen - 06 Sep 2004

Thanks for catching. The fix is available.

-- ArthurClemens - 06 Sep 2004

It might be a good idea to leave a version number as comment in the style.css file. My patch is for version 1.8 I guess.

this fixes visual appearance in Opera:

--- style.css   2004-09-09 16:38:38.000000000 +0200
+++ style-new.css       2004-09-09 16:38:16.000000000 +0200
@@ -677,7 +677,6 @@
 .twikiToolBar ul li a:link,
 .twikiToolBar ul li a:visited {
        padding:0 0.55em;
-       float:left;
        color:#8490A1; /* .twikiGrayText value */
@@ -689,6 +688,7 @@
 .twikiToolBar .twikiRevInfo {
+       font-size:90%;
 .twikiToolbarElem {

The font-size is for IE 6 , to improve the look on "normal" monitors after patching for opera ...

-- EduardWulff - 09 Sep 2004

Opera 7.60P4 does not need the Patch! Twiki looks like viewed with other mainstream browsers.

-- EduardWulff - 13 Dec 2004

I noticed these problems in Opera as well. I also noticed that the problems exist when viewing older revisions of pages. Check out TwikiToolbarDisplayInOpera which is where I put my fix for the problem, which takes care of both instances of the problems I could find.

-- DavidMonaghan - 13 Sep 2004

-- WillNorris - 07 Sep 2004

Hi all. I will take up PatternSkin work next week, want to finish some other thing first.

-- ArthurClemens - 09 Sep 2004

Did a little bit of refactoring but this topic has become too large to refactor easily. Could people please help out by removing comments on issues that have been addressed.

To help make bug reporting easier I've added a bug reporting form using CommentPlugin and a template in UserTemplates to the bug table above. This should hopefully help reduce the conversational clutter.

-- SamHasler - 10 Sep 2004

Not sure where in this page you want this:

  • I think jump might be most usefully split into a jump "to an existing page" dropdown plus a button saying "create new page"

Else users type the name of existing pages wrong and end up creating new pages because they can't see the names of existing ones.

  • As I've said already in GoIsSearch:
    I like the way Wikipedia has a go and search button for the same input box. If the user hits the go button (or presses enter) then it trys to find a topic of that name, if none exists it displays the search page instead. The search page, if entered from either button displays a create/edit link for the search term in addition to search options.

    I think it would be better to let the user select what happens rather than trying to second guess them. For instance, if you wanted to search for SVN you would be presented with the page instead and have to find the ref-by link.
    -- SamHasler - 11 Sep 2004

-- MartinCleaver - 11 Sep 2004

One more thing: can the personalised WebLeftBar be placed above the ones provided by the administrator? Thanks. M.

-- MartinCleaver - 11 Sep 2004

Opera needs text-decoration:line-through in .twikiToolBar ul li strike {} section of style.css. See TwikiToolbarDisplayInOpera for a diff.

-- UlfJastrow - 14 Sep 2004

Pattern skin could do with some links to WebRss in the header of footer using the correct url syntax to get the rss format and using the RSS images in TWikiDocGraphics as anchors.

-- SamHasler - 14 Sep 2004

scope/target button
webwide Plugins rss feed
page page PatternSkinDevArchive2 rss feed
page referrers PatternSkinDevArchive2 referrers rss feed

<a href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%INCLUDINGWEB%/WebRss?skin=rss"><img src="%PUBURL%/%TWIKIWEB%/TWikiDocGraphics/rss-small.gif" alt="" border="0" /> <nop>%INCLUDINGWEB% rss feed</a>
<a href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%INCLUDINGWEB%/WebRss?skin=rss&amp;scope=topic&amp;search=^%INCLUDINGTOPIC%$"><img src="%PUBURL%/%TWIKIWEB%/TWikiDocGraphics/rss-small.gif" alt="" border="0" /> page <nop>%INCLUDINGTOPIC% rss feed</a>
<a href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%INCLUDINGWEB%/WebRss?skin=rss&amp;web=all&amp;search=%INCLUDINGTOPIC%"><img src="%PUBURL%/%TWIKIWEB%/TWikiDocGraphics/rss-small.gif" alt="" border="0" /> <nop>%INCLUDINGTOPIC% referrers rss feed</a>
  • I made some changes to make it work in any web and fixed some XHTML issues. -- PeterThoeny - 18 Sep 2004
-- WillNorris - 14 Sep 2004, (from ducky at (eg) http://wiki.osafoundation.org/twiki/bin/view/Chandler/)

Thanks for all the hard work and reviewing that's gone on.

I've a few comments about PatternSkin, these are my personal preferences of course, so I may well go on hack my own version. Hope they don't sound too negative, I do like the change to PatternSkin as a default - it's much more user friendly.

The blank space at the top seems strange to me. At first I thought it was a browser problem, or that the page title was there but in white on white, but I notice it's on the Screenshot too. It seems a pity not to use this space. It looks particularly weird on wide screens. What's the reasoning behind it?

Also, I find the titling of pages confusing. The page name (e.g. PatternSkinDev) is important information and could be bigger and centred or left. Having a small uncolored page name on the right lead to the addition of a page title in the body of the text (e.g. on this page it's "Feedback on PatternSkin"). This has disadvantages:

  • It's confusing when linking to pages (do I write FeedbackOnPatternSkin, which is what I remember from the page top, or PatternSkinDev which is correct)
  • It "uses up" the first ---+ header - subsequent headings have to be at level 2.
  • It violates the DRY (Don't Repeat Yourself) principle by having the same information in two places

If I hack a version, I may well place the both page name and parent pages (BreadCrumbs?) in the white space at the top.

-- AndyPryke - 17 Sep 2004

interjected comment about WebLeftBar (search for _default)

-- MartinCleaver - 17 Sep 2004

Is it worth defining USERLAYOUTURL and USERSTYLEURL variables on the ski topic page and including the empty.css file with the skin? At the moment I get two 400 Bad Request responses from the server when I try to import those two files on every page view. Other than that... nice skin smile

-- GeoffJohnston - 19 Sep 2004

Love the skin.

Ive been customizing the topbar on my site to conform to the corporate standards. This involved adding a new icon etc. I followed the directions to modify the layout.css for the new image height, but it appears to only shift down the main window contents, the left bar is still squished up at the top. It looks like the left bar isnt observing the new height for the top bar.

Help?? Any ideas...

-- JohnCavanaugh - 20 Sep 2004

Did you change the top bar position in layout.css?

.twikiLeftBar {

-- ArthurClemens - 20 Sep 2004

Nope. Ill play with that. I was just modifying the top bar items. Thx for the pointer.

-- JohnCavanaugh - 21 Sep 2004

I have a web that was created with "no" being the answer to "can the web be searched?".

I added the web name to TWiki.Preferences WIKIWEBLIST, but it doesn't appear in the list of webs in the WebLeftBar.

That is different to how the old default used to work: in the old default skin, adding a web name to WIKIWEBLIST caused it to be listed at the top right.

How can I get my web listed in the list of webs in WebLeftBar?


  • The webleftbar uses %WEBLIST{"      * $name" separator=""}%. If you wish you can also use WIKIWEBLIST, but make sure it uses a bullet list format (change this in your TWikiPreferences). -- ArthurClemens - 23 Sep 2004

-- MartinGregory - 23 Sep 2004

I just discovered that if you change WIKILOGOIMG to something a different size than the robot, the top bar of pattern skin doesn't accomodate the new size.

That's really not too good - the old skin handled this well...

  • That is the way the CSS works now. The left bar must be positioned absolute, otherwise IE flips (I would have liked to see this work). The alternative is be to put screen parts in tables, but I have tried to avoid that. The downside is indeed you must change the top bar size in layout.css. But I figured that wouldn't happen too often (once per site more or less). -- ArthurClemens - 23 Sep 2004

-- MartinGregory - 23 Sep 2004

OK - sounds like I have to learn about css at long last!

-- MartinGregory - 23 Sep 2004

I've just popped back to pay homage to this excellent skin. I was always quite happy with the old skin, so I haven't spent any time looking at this one up till now. But now I have it installed I'm delighted with all the little usability problems that its tackled. Never mind the modern look that some people find so appealing: it's really an improvement in usability!

-- MartinGregory - 25 Sep 2004

Conversation moved to WebControlBottomBar

-- MartinCleaver - 21 Nov 2004

Patch for E for edit AccessKey, and makes the edit button more prominent.

+++ view.pattern.tmpl    Wed Sep 29 09:23:40 2004
--- view.pattern.tmpl~ Tue Aug 24 23:36:16 2004
@@ -25,7 +25,7 @@

 %TMPL:DEF{"toolbar"}%<div class="twikiToolBar"><div>
+   * <a href="%EDITURL%" accesskey="e" class="twikiSubmit twikiTertiary">Edit</a>
    * <a href="/cgi-bin/attach/Plugins/PatternSkinDev">Attach</a>
    * <a href="/cgi-bin/view/Plugins/PatternSkinDev?skin=print.pattern%REVARG%">Printable</a>
 </div><div class="twikiRevInfo"><span class="twikiGrayText"><span class="twikiToolbarElem"><nop>Plugins.PatternSkinDev</span><span class="twikiToolbarElem">r1.311 - 28 Sep 2004 - 22:34 - Main.SamHasler</span><span class="twikiToolbarElem"><a href="#TopicEnd">topic&nbsp;end</a></span></span></div></div>%TMPL:END%

-- MartinCleaver - 29 Sep 2004


We really liked the new skin, but decided it would look nicer with the logo centered above the left column instead of aligned with the text far below it. We decided to fix that, but it involved adding another "class" due to the bar at the bottom also using twikiLeft.. so... incase anyone else thinks like we do, here are my customi[sz]ations:

  • layout.css (add the twikiLogoContainer so that we can center the logo in a "box" the same size as the bar below it)
[root@mvws3-1 PatternSkin]# diff -C 1 layout.css layout-tommy.css
Warning: missing newline at end of file layout.css
*** layout.css  Thu Sep 30 16:30:32 2004
--- layout-tommy.css    Thu Sep 30 20:02:43 2004
*** 34,35 ****
--- 34,42 ----
+ .twikiLogoContainer {
+       position:absolute;
+       left:0;
+       top:0;
+       padding:0;
+       width:13em;
+ }
  .twikiMiddleContainer {}
*** 103,104 ****
        /* padding in style.css */
! }
--- 110,111 ----
        /* padding in style.css */
! }

  • style.css (to take off the padding)
[root@mvws3-1 PatternSkin]# diff -C 1 layout.css layout-tommy.css
Warning: missing newline at end of file layout.css
*** layout.css  Thu Sep 30 16:30:32 2004
--- layout-tommy.css    Thu Sep 30 20:02:43 2004
*** 211,213 ****
!       padding:5px 2em 5px 1em; /* right padding same as .twikiViewPage .twikiMain */
--- 218,222 ----
!       //padding:5px 2em 5px 1em; /* right padding same as .twikiViewPage .twikiMain */
!       padding:5px 2em 5px 0;
!       text-align:center;
(Sorry about the line numbers on style we also changed some color stuff around)

  • Change the WebTopBar (to use the new class)
      • class="twikiLogoContainer"

... I am not sure whether we should have chosen a different class name or whatever, but it seems to work for us. We actually think it looks better. Unfortunately our site is Intranet, so I cannot give you a link for example smile

PS: second level indent was invisable? and whats up with the dos format files

-- TommyMcNeely - 01 Oct 2004

This is about the concenpt of where "end" should be.

As it stands, the 'end' tag at the top of the topic takes you to the end of the topic, so the topic body is off-screen. It does say 'topic end' not 'page end'.

As my users have noticed, for most pages this means the grey action bar is the next thing visible ....

Unlesss there are forms and attachments.

While that seems OK to me, after all it is end of topic, they seem to be thinking it means end of page, because it puts the action block, you are here and copyright in view which to them IS the bottom of the page. They see the complete bottom of the page.

Some of them have been using this as a short cut to the action block, and some of those have asked for "to top/to bottom" buttons beside every heading -- presumably so they can get to the 'edit' PDQ.

Is this just a matter of education or do we need to think about what non-techncial users think of as top and bottom?

-- AntonAylward - 02 Oct 2004

Why has You are here: been moved to the bottom? I always liked the way it appeared unobtrusively at the top.

-- SamHasler - 16 Aug 2004

See my remark of 7 Aug. But let me think of a way to make it easy to add it if wished.

-- ArthurClemens - 16 Aug 2004

Moved the previous two comments to the bottom for context.

I've worked out HowToPutYouAreHereOnTheTop. Tested in Mozilla 1.7b and IE6. Maybe this could be added to PatternSkinCustomization if it works for FireFox/Opera/Safari/Konqueror.

-- SamHasler - 14 Oct 2004

Enhancement Request: smart linking, a double underline to links which connect to an external site, and a dotted underline to links which go to other parts of the same page, and a double dotted underline for links which open in a new window. (little icons before/after the link text are too intrusive)

-- MattWilkie - 17 Oct 2004

Thanx for the crisp pattern skin smile

I miss the GnuSkin Go/Search feature, so I hacked it to work under Cairo from within pattern skin.

See: GnuSkinPluginDev#GnusearchAndCairo

-- NielsKoldso - 19 Oct 2004

Thanks a lot for that great skin. The more I use it, the more I discover things that are very well thought-out ! Thanks. Three details:

  • For my company intranet, I wanted to be able to aggregate tons of links (10 x 12) without having a long list on the side. So, I hacked in a quick & dirty way support for multi-level pop-up hierarchical menus to PatternSkin.
  • I have been looking for a " TWikiLeftBar ". I appreciate a lot the user able to set his LeftBar, and webs setting their own LeftBar, but I believe there should also be (in the case of a company intranet, where you want uniform look-n-feel) a site-wide LeftBar.
  • I've replaced the default actions by "New Edit Visual Attach Print HelpMe". New -> sends to the howtocreateanewtopic, Visual -> edits page with Kupu, Print (truncated from printable), HelpMe -> sends email to our helpdesk in case the user is confused about a detail.

-- GillesEricDescamps - 20 Oct 2004

It would be much easier to apply css to specific topics or groups of topics if the body tag was something like:

<body id="%TOPIC%" class="twikiViewPage %WEB% %FORMFIELD{"TopicClassification"}%" ....>

I wouldn't want TopicClassification hard coded though. I'd want a configurable list of fields that should be used. It should be able to add in any number of classes based on form fields and their values.

So you might end up with something like:

<body id="AnotherBugReport" class="twikiViewPage Codev ChangeProposal MergedToCore DakarRelease IsBug Priority1" ....>

You want to see Bug reports with a red background? use something like: .IsBug .twikiMain {background-color:#FF8080;}. Want MergedToCore topics to stand out? use: .MergedToCore .twikiMain { background: fixed top right no-repeat url("merged.png");}.

You'd have to add any topic/classification specific css to the main layout.css and style.css topics; There wouldn't be separate page style css for each style. But this solves the problem of having to explicitly set variables on a topic to have it display in a different style, and that style overriding a users custom style. Currently you can't apply both a page/topic specific stylesheet and a user stylesheet.

By setting id's and classes on the body tag Topic/classification specific styles could be applied by both the site/web and user. So all things considered I think it would be a much more flexable system.

I'm still trying to work out how easy it is to implement with current functionality but I have a feeling that some new functionality would be required to fully implement it as I have envisioned it.

-- SamHasler - 06 Nov 2004

Sounds like a good direction. I haven't had much time lately to update PatternSkin, but hope to do so from next week on. So please continue your investigation!

-- ArthurClemens - 09 Nov 2004

You can add Camino to your list of Mac OS X Browsers. I've been using it happily for a week and have seen no problems with TWiki.

A quick glance says the same is true of Firefox so I'd bet on the Mozilla family.

-- VickiBrown - 11 Nov 2004

I'm having problems with the JSCalendarContrib as described in JSCalendarContribDev. What this comes down to is this: I need to modify the skin template for "view" to include the javascript style sheet. However that means its in every topic that gets viewed. What I'm looking for is some kind of INLINESTYLE similar to those used in the SeeSkin skin by MattWilkie.

Or something else ... What do you suggest?

-- AntonAylward - 20 Nov 2004

When i Add many icons to the topbar, toolbar links move as they linked to the icons right margin. Wheen I adding more icons, tollbar links (Edit, Attach...) are moving right. That happens in FireFox. In IE everything OK.

-- AlexanderSorokin - 26 Nov 2004

I found I could put the < LINK CSS > in the body of the topic, as well as all th avascript.

I didn't need to surround them with a <pre&gt or a <verbatim> either. Simple HTML comment to hide them was enough.

Flexibility or Bug?

-- AntonAylward - 27 Nov 2004

The already-filed-bug "WebNotify always displays the LeftBar" is driving my users to distraction. Maybe this isn't a bug in PatternSkin but something that needs to be fixed in the mailnotify script, though; I'm thinking about hacking the script to send out text/plain emails only and drop the absolutely positioned CSS that renders abysmally in Mozilla Messenger and Thunderbird...

-- GarethEdwards - 07 Dec 2004

Gareth there is a print aspect to pattern skin e.g. http://twiki.org/cgi-bin/view/Plugins/PatternSkin?skin=print.pattern which would be good for email but I don't know how you activate it.

-- MattWilkie - 15 Dec 2004

Index: moveattachment.pattern.tmpl
--- moveattachment.pattern.tmpl (revision 3590)
+++ moveattachment.pattern.tmpl (working copy)
@@ -23,7 +23,7 @@
-%TMPL:DEF{"movewebhelp"}%To delete an attachment move it to web *Trash*, topic *TrashAttachment*.%TMPL:END%
+%TMPL:DEF{"movewebhelp"}%To <a href="void:" title="Move attachment to the Trash" onclick="javascript:document.forms.rename.newweb.value='Trash'; document.forms.rename.newtopic.value='TrashAttachment'; return false;">delete</a> an attachment move it to web *Trash*, topic *TrashAttachment*.%TMPL:END%

would someone who knows javascript please checkout the code above?

-- WillNorris - 04 Feb 2005

I've attached toggle.js to TWiki.PatternSkin.

and inserted the following into _twiki.org_'s (not the pattern skin package) twiki.pattern.tmpl and preview.pattern.tmpl:

<script type="text/javascript" src="%PUBURL%/TWiki/PatternSkin/toggle.js" ></script>

You can use it like this:

<script type="text/javascript">
<div id="someDiv">
Some Text.

Some Text.

I nabbed it from Wikipedias collapseable toc and generalised it so that it can be used on more than one element on a page. It woud be nice if this could be bundled with pattern skin.

It wouldn't take much to use if for our TOC's as well, although if we do it would need to be part of the core distribution.

As a result of all this personal web bars are now collapsable.

-- SamHasler - 11 Feb 2005

Nice! I was thinking also to make some screen items collapsible, for instance the webform and the attachment table. This should be stored in a cookie then, so you get the same appearance (all hidden for instance) on all pages.

-- ArthurClemens - 12 Feb 2005

Note that the above example will only be visible if you are viewing this site using pattern skin (i.e. you haven't * Set SKIN = classic or some other skin in your home topic) since I only added it to patterns templates.

Persistance would be nice, although not in every use, and not every user would need/want it. It should degrade gracefully if the client doesn't support them. I don't know enough about cookies to write it.

I've just realised that I have to lock down TWiki.PatternSkin so that someone can't attach malicious javascript in place of toggle.js. Maybe it should be attached to it's own topic?

-- SamHasler - 12 Feb 2005

Small loss in functionality compared to ClassicSkin: The current GMT time is not shown in the header of the "last change" column in WebChanges. This is useful to assess how old the newest topic is, no matter in what timezone you are.

-- PeterThoeny - 21 Feb 2005

Could the Revision info be wrapped in a style (but not "topic end"!)? That way it could be hidden via css, rather than having to change the template.

-- MeredithLesly - 20 Mar 2005


I put the id twikiSiteMap, twikiSiteMapFooter and twikiSiteMapLegend on the SiteMap table and add an little change to separate de web name and the bottons.

I propose to add this CSS on the style.css:

/* For the Site Map table: */

  border: 2px solid #404040;
  border-collapse: collapse;
#twikiSiteMap th{
  border-bottom: 2px solid #606060;
#twikiSiteMap td{
  border-bottom: 2px dotted #606060;
#twikiSiteMap td b a{
  text-decoration: none;
  border-top: 2px solid #606060;
#twikiSiteMapFooter font{
  color: #707070;
  font-size: 10px;
  line-height: 13px;
#twikiSiteMapLegend td{
  color: #707070;
  font-size: 11px;
You can see de result hire: http://gnosislivre.org/twiki/bin/view/TWiki/SiteMap

It's god? I like... smile

  • I like the result, really. I am only hesitant to put the style in patternskin.css, because it is so content-specific. Ideally the style should only be loaded with the specific topic. Sounds like UsingTopicToDefineCSS. -- ArthurClemens - 21 Mar 2005

-- AurelioAHeckert - 21 Mar 2005

I just needed the fix for bug report "WebChanges should show current GMT time in date column header", so I implemented it on TWiki.org:

--- bu2/search.pattern.tmpl     2004-09-21 22:25:59.000000000 -0700
+++ search.pattern.tmpl 2005-04-10 20:49:31.000000000 -0700
@@ -15,7 +15,7 @@

-%TMPL:DEF{"repeatedsearchblock"}%<div class="twikiSearchResultsHeader" style="background-color:%WEBBGCOLO
R%">Results from <nop>%WEB% web</div>%REPEAT%<div class="twikiSearchResults">
+%TMPL:DEF{"repeatedsearchblock"}%<div class="twikiSearchResultsHeader" style="background-color:%WEBBGCOLO
R%">Results from <nop>%WEB% web &nbsp; &nbsp; (current time %DISPLAYTIME{"$hour:$min"}% GMT)</div>%REPEAT%
<div class="twikiSearchResults">
 <div class="twikiTopRow"><div class="twikiLeft"><a href="%SCRIPTURLPATH%/view%SCRIPTSUFFIX%/%WEB%/%TOPICN
AME%"><b>%TOPICNAME%</b></a> <span class="twikiAlert">%LOCKED%</span></div>
 <div class="twikiRight twikiSRAuthor">

This is a quick hack, the time should be lined up with the date column.

-- PeterThoeny - 11 Apr 2005

I would like to move the bug report to Codev's BugReport or to Support.

-- ArthurClemens - 16 Apr 2005

I thought you might like to see an example of what a minor customization to PatternSkin can look like just by using two very small .png files by a person with no pryor css experience. (me)

Thank you all for the great work you have done here. I look forward to seeing what you guys come up with next smile

-- TravisBarker - 18 Apr 2005

I have added access keys to the view template (SVN 4119); other templates left to do.

-- ArthurClemens - 25 Apr 2005

Bug fix: Need to start a bullet list at a new line. As many WebLeftBars have bulleted lists, need to insert a newline before the INCLUDE of WebLeftBar in templates/twiki.pattern.tmpl. Patch 4120.

-- ThomasWeigert - 25 Apr 2005

Bug fix: Fix 4120 has disappeared from SVN. Reapplied as 4211.

-- ThomasWeigert - 01 May 2005

Styles for orderedlist (<ol>) and itemizedlist (<ul>) should be similar in spacing, shouldn't they? At the moment they differ (compare Sandbox.TestTopic8), which looks pretty odd.

Well, after looking around I've found

.twikiTopic ul {
in style.css, so in order to adjust the top-margin for <ol> too, just add one line, thus getting
.twikiTopic ol,
.twikiTopic ul {
It's this kind of little tweak that makes the maintenance of this skin ... wink

-- FranzJosefSilli - 03 May 2005

I have removed the twikiTopic ul alltogether. Try to make it simpler...

-- ArthurClemens - 04 May 2005

PatternSkin is working fine on Firefox 1.0 on Red Hat Enterprise 3.

-- BrendanGibson - 21 Jun 2005

Posted a proposal for the 'new' layout of the PatternSkin for Dakar (Develop)

-- FranzJosefSilli - 20 Aug 2005

Hint: Pattern Skin engine is extracting links from a bulleted list on WebLeftBar and puts each link at the beginning of its own line

   * *%INCLUDINGWEB% Web* [[%HOMETOPIC%][Home]]
   * *[[%INCLUDINGWEB%.WebSearch][Search]]*
   * [[WebChanges][Changes detailed]]
   * [[WebIndex][Topic list]]
gives you a left menu bar containing a bulleted list with five items. See this screenshot: Screenshot of <span class=LeftBar and it's template." width="849" height="144" />

Ooops Uploading Attachments files with WikiNames in its description break the link to the attachment. See Bugs:Item466

-- DanielKabs - 01 Sep 2005

Pattern Skin styles render !---+ (aka <H1>) without background color!

Other headings have a background color that extends over the full width of the page. These headings are visually easier to spot in the flow of the text and lend themselvers very well for dividing a document into text blocks.


  • At the top of your text, use first level heading !---+ to give the document a descriptive topic title!
  • For structuring the text, only use second level headings !---++ and above!

-- DanielKabs - 23 Sep 2005

Well, in my opinion there should be only 1 H1 on the page. So your hints are indeed helpful.

-- ArthurClemens - 23 Sep 2005

Arthur, as an example, I rearranged DeveloperResponsibilities accordingly (h1 as title, h2 and higher levels for structuring the text). But strangely enough, !---+++ does not have a background color associated. It does on my version of TWiki, though. Both are running the last production version, so where does the difference come from? Pity, I can not access the revision information of attachment style.css of PatternSkin.

Mh, after some diffing I found it:

 h1, h2, h3, h4, h5, h6 {
        font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
        margin:1em 0 0.1em 0;
-       background-color:#F3EDE7;
The line that gives headings a background color is gone. Is this really wanted?

-- DanielKabs - 26 Sep 2005

I find the topic becomes very crowded if all headers have a background color.

-- ArthurClemens - 29 Sep 2005

Hello Arthur, this happens, when you write too little text in between the headings smile I agree, in this case having no background colors makes the text look nicer (e.g. DeveloperResponsibilities)

On the other hand, look at DanielKabsTestPatternSkinOne. That's that current styl. IMHO, the difference between H3 and H4 is not easy to spot.

Now I tried DanielKabsTestPatternSkinTwo, with background colors fading to white with increasing level. This is a "mixture" of current pattern style and the old one from the last production release.

What do you think?

  • Hi Daniel, I've used your suggestion for the new style for Dakar. See http://visiblearea.com/devtwiki/bin/view/Sandbox/HeaderTest. Because the new h2 bg color is very light, with a border, I haven't used background color but a lighter border for h3..h5. H6 doesn't have a border. -- ArthurClemens - 02 Oct 2005
    • Arthur, your design suggestion looks very good to me: The headings divide the text nicely without compromising legibility. To me it looks better than the style PatternSkin currently uses. So, any chances to get this into the PatternSkin style of TWiki.org and the upcoming release?
      • Yes, this is the style for Dakar. The intention is to move twiki.org to Dakar as well. -- ArthurClemens - 04 Oct 2005

-- DanielKabs - 30 Sep 2005

The Dakar enhancements allow for the context to be determined. One such context is if the session is authenticated or not.

Using this I've made a modification to the which hide the toolbar amdn button bar if no user is logged in, and hence disables the edit, attach and 'more' functions.

The first part redefines the toolbar in view.pattern.tmpl:

%TMPL:DEF{"toolbar"}%<div class="patternTop">
<table cellpadding="0" cellspacing="0" border="0">
<td class="patternHomePath">
<strong>%_{"You are here"}%: </strong><a href="%SCRIPTURLPATH%/view%SCRIPTSUFFIX%/%WEB%/%HOMETOPIC%">%WEB%</a> %META{"parent
" nowebhome="on" prefix=" <span class=\"twikiSeparator\">&gt;</span> " suffix=""}% <span class="twikiSeparator">&gt;</span>
<span title="%WEB%.%TOPIC%"><nop>%TOPIC%</span></td>
<td class="patternRevInfo"><span class="patternRevision">%REVINFO%</span></td></tr>
<tr> <td class="patternToolBar" colspan="2"><div class="patternToolBarButtons">
%TMPL:P{context="authenticated" then="toolbar_full"}%<span class="patternButton"><a href="%SCRIPTURLPATH%/view%SCRIPTSUFFIX%/%WEB%/%TOPIC%?skin=print.pattern%REVARG%" accesskey="P" title="%_{"Printable version of this topic"}%" rel="nofollow">%_{"&Printable"}%</a></span></div> </td></tr></table></div><div class="patternToolBarBottom"></div>

%TMPL:DEF{"toolbar_full"}%%TMPL:P{context="inactive" then="inactive_edit" else="active_edit"}%<span class="patternButton">%TMPL:P{context="inactive" then="inactive_attach" else="active_attach"}%%TMPL:END%

The second in twiki.pattern.tmpl disables the toolbar at the bottom of the topic. Its really simple.

%TMPL:DEF{"topicaction"}%%TMPL:P{context="authenticated" then="topicactionbar" }%%TMPL:END%
%TMPL:DEF{"topicactionbar"}%<a name="Actions"> </a><div class="patternTopicAction"><span class="patternActionButtons"> %TMPL:P{"topicactionbuttons"}%</span></div>%TMPL:END%

-- AntonAylward - 30 Sep 2005

excellent choice Anton smile i've wanted similar too (it allows twiki to become even more CMS-sy

-- SvenDowideit - 04 Oct 2005

I'm having trouble getting the personal left bar working. If I don't have "require-auth" on for the view script, I always see TWikiGuest as the Wiki Name. If I have "require-auth" on for the view script, then I have to log on to view pages. That makes it hard for people to register.

What am I doing wrong?

-- WayneDahl - 17 Nov 2005

I cannot tell, actually. The soon-to-be-released Dakar version of TWiki has a much better detection of users. See for instance http://asapframework.org/bin/view/ASAP/WebHome - these pages don't use require-auth.

If you don't plan to upgrade in the near future, have a look in the Support web or post a question there - there are people more familiar with the intricacies of Cairo logging in than me.

-- ArthurClemens - 18 Nov 2005

Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng CSS_element_layout.png r2 r1 manage 46.1 K 2004-04-13 - 22:35 ArthurClemens Naming and layout of CSS elements
PNGpng Selection_Problem.png r1 manage 13.6 K 2004-01-16 - 16:58 SamHasler Example of selection problem
Unknown file formatpatch WikiWord-web-names.patch r1 manage 1.9 K 2004-09-09 - 02:53 WillNorris patch to prevent wiki web names from being linked (as WikiWords are (now) legal web names)
PNGpng diff_prb_firefox_20040808.png r1 manage 3.0 K 2004-08-08 - 19:56 SteffenPoulsen diff content overlapping left bar, firefox
PNGpng diff_prb_ie_20040808.png r1 manage 3.0 K 2004-08-08 - 19:55 SteffenPoulsen diff content overlapping left bar, ie
JPEGjpg dragon.jpg r1 manage 13.8 K 2004-08-03 - 19:40 CrawfordCurrie  
PNGpng dragon_IE6.png r2 r1 manage 1.8 K 2004-08-03 - 21:27 ArthurClemens Dragon skin on IE6
PNGpng eg.png r1 manage 21.4 K 2005-02-01 - 03:09 JRobertRay Example of table spill
JPEGjpg firefoxdragon.jpg r1 manage 18.6 K 2004-08-04 - 07:13 CrawfordCurrie  
JPEGjpg firefoxpattern.jpg r1 manage 17.7 K 2004-08-04 - 07:10 CrawfordCurrie  
PNGpng leftbar_apple.png r1 manage 60.7 K 2004-08-02 - 20:20 ArthurClemens Screenshot of apple.com
PNGpng leftbar_movabletype.png r1 manage 45.3 K 2004-08-02 - 20:31 ArthurClemens Screenshot of weblog.delacour.net
PNGpng leftbar_oreilly.png r1 manage 48.5 K 2004-08-02 - 20:21 ArthurClemens Screenshot of oreilly.net
PNGpng leftbar_patternskin.png r1 manage 20.6 K 2004-08-02 - 20:34 ArthurClemens Screenshot of pattern skin
PNGpng leftbar_slashdot.png r1 manage 55.0 K 2004-08-02 - 20:31 ArthurClemens Screenshot of slashdot.org
PNGpng leftbar_wired.png r1 manage 35.7 K 2004-08-02 - 20:38 ArthurClemens Screenshot of wired.com
GIFgif leftbarimage.gif r1 manage 6.9 K 2005-08-29 - 14:50 DanielKabs Screenshot of LeftBar and it's template.
PNGpng leftbarsize_1024_patternskin.png r1 manage 38.6 K 2004-08-02 - 06:53 SteffenPoulsen Size of left bar in 1024x768, PatternSkin, firefox defaults
PNGpng leftbarsize_1024_slashdot.png r1 manage 122.3 K 2004-08-02 - 06:53 SteffenPoulsen Size of left bar in 1024x768, Slashdot, firefox defaults
PNGpng leftbarsizeonpage.png r1 manage 45.6 K 2004-08-01 - 20:14 ArthurClemens Screenshot of left bar size
JPEGjpg pattern.jpg r1 manage 16.5 K 2004-08-03 - 19:41 CrawfordCurrie  
PNGpng pattern_IE6.png r2 r1 manage 3.7 K 2004-08-03 - 21:28 ArthurClemens Pattern skin on IE6
PNGpng topic_name_alt_arrangement.png r1 manage 2.5 K 2004-08-06 - 20:48 SteffenPoulsen Minor layout suggestion
Edit | Attach | Watch | Print version | History: r400 < r399 < r398 < r397 < r396 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r400 - 2006-02-03 - PeterThoeny
  • 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-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.