create new tag
, view all tags

Alternatives for tabs display in KoalaSkin

I'm wondering how feasible it would be to have different looks for the tabs in the koala skin. For example:


I guess the problem is that all the images need to be generated dynamically in koalaskin-generate, since each web has its own colours.

-- MartinWatt - 09 Oct 2002

I should be possible, there exists libs to generate gifs dynamically. But you will want to also modify all the templates to get a coherent look, thats some involved work.

Besides, using images is something that I tend to avoid for accessibilty and cross-platform usage: in other words, I will gladly accept code to implement this, but I will not code it myself smile

-- ColasNahaboo - 10 Oct 2002

With the careful use of Fonts, colored tables, and static .gifs or .pngs, this can be done without any need to generate images dynamically. The static images would be the "corners" of the box. Main has beginings of the idea on the righthand sidebar. -- TomKagan - 11 Oct 2002

Also really easy to do using SVG - assuming the browser/browser plugin can display it. Not exactly high on my list of things to do either.

-- DarrylGreen - 15 Oct 2002

You should be able to get both the pretty look and not sacrifice accessibility by using CSS: make the background for the tab an image, but keep the text as text (with according normal behavior by the cursor and browser, and parsability by accessibility tools).

-- JimMoore - 21 Nov 2002

Note that our team is the main force behind the Open source SVG renderer, Batik ( http://xml.apache.org/batik ), so we should be able to do something. And since the KoalaSkin is compiled, I'd rather see SVG used to generate offline - by Batik - an image map of the tabs (one per web), so that it could be used in all browsers (with proper ALT attributes for accessibility).

  • NOTE: This would still violate accessibility guidelines. You'd have to keep the button as text to be correct. For a prettier button, use CSS, Fonts, and/or background & corner pics within an html SPAN block. -- TomKagan - 19 Dec 2002
  • No, client-side image maps are recommended for accessibility. Server-side image maps are the bad ones. BTW we had a student making client-side image map data from SVG active regions, so it could be done automatically . Mixing little bits of images for presentation is worse than a single one + semantics for readers. -- ColasNahaboo - 20 Dec 2002
  • I'm sorry, I don't mean to be adamant, but neither client side nor server side image maps was what I meant in this case. You, currently, have information correctly conveyed in text form that you are proposing to put into a image. While adding an ALT attribute to the image (and, possibly, a NAME attribute) will satisify the bare minimum accessibility priorities, to use this technique here ignores the secondary guidelines. (For further reference, accesibility guidelines are here: http://www.w3.org/WAI/ - checkpoints 3.1 and 3.3 in the checklists apply in this circumstance). Considering the ingenious method your skin uses to create the menus, anyway, it's really just a matter of generating the template in one fashion versas another. In the case of KoalaSkinPrettyTabs, you don't need the text in the image. It should remain just a regular link. To make it prettier while still adhering closer to the accessibility ideal, placing the text in a SPAN block and playing with the CSS styling and will handle this case perfectly. Additionally, if all image insertion is handled via CSS and the menu text is only marked up with SPAN and DIV, you will not have the reader problems of which you speak. pure CSS buttons example This is my personal favorite CSS usage: A deck of playing cards using CSS -- TomKagan - 20 Dec 2002
  • Yup, your pure CSS buttons example is very nice indeed. I guess that the requirements I have that things work also in netscape 4.x is crippling my imagination :-). Thus in my case, a client-side map plus necessary info is the best that can be done. I will surely experiment your solution, though. And since I generate the templates by a script, we could even try to generate the 3 versions: current "NS4 level" one, CSS-only, and SVG-generated client map, and maybe provide the 3 views on the same site via different URLs ? (to avoid needing to register to browse). -- ColasNahaboo - 21 Dec 2002
  • Though I haven't played with the example buttons in NS4, I've managed to tweak some serious CSS stuff to work very closely in both IE 5.0+ and NS4.5+ in the past. I don't see any blaring "gotchas" in my example that would be impossible to rework to make this case cleaner. But, Since I don't mess around with NS4 anymore, I don't particularly have motivation to play with this example any further. However, most of the CSS troubles I've had in the past with NS4 were due to using inline styles. Once I put every style in a linked external style sheet, NS4's quirks seemed to become more consistent for me. Regardless, I don't recommend creating too many ways to generate the menu sets. The beauty of using CSS is its graceful degradation (when you get it right smile ). Still, if you end up going that way, I recomend using the AgentPlugin and the ConditionalPlugin and sticking most of your implementation in one menu set with only slight customizations for each environment. If the few people left still using NS4 get your original and fully functional menus instead of the prettier ones, I've found a tough love approach can work wonders in solving implementation issues. wink (Gotta love the holiday color effect going on here ...) -- TomKagan - 23 Dec 2002

I have a question: how would you give feedback on which web is the current one? ie in the above gif, how would you show the fact that the current web TWiki or Coding ?

-- ColasNahaboo - 18 Dec 2002

IMHO, you have couple options: change color background, or position, of font.

  • Color background: Let's say, color of current (active) web is green, inactive is gray. Then, Coding subweb s/b green, and all other also gray. Or, if you want all subwebs be green as TWiki web, you nedd another color - secondary active web color.
  • Position: You need to reshuffle subwebs, so current subweb (Coding) will be leftmost. And when Glossary is current, Glossary is lefmost in lower bar, and Coding is back. This might be confusing...
  • Font: current web might be rendered in different font (bigger, maybe different color). This might be nice - and you can also use this color, if TWiki (top-level web) is current.

Question: If TWiki is current, should be subwebs (Project....Templates) be displayed, or not?

Suggestion: Can you make lower color bar wider (higher), so dark stripe on top will not interfere with letters? And also, subweb names IMHO should be somehow separated, kind of buttons, not in one stright stripe. At least a little. wink

I like your skin.

-- PeterMasiar - 19 Dec 2002

BTW, I render the current web with a different ink (yellow) in the current KoalaSkin

-- ColasNahaboo - 20 Dec 2002

Topic attachments
I Attachment History Action Size Date Who Comment
HTMLhtml css-example.html r3 r2 r1 manage 2.2 K 2002-12-20 - 19:45 TomKagan Pure CSS buttons example
JPEGjpg prettybar.jpg r1 manage 11.4 K 2002-10-09 - 19:58 MartinWatt  
Edit | Attach | Watch | Print version | History: r12 < r11 < r10 < r9 < r8 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r12 - 2002-12-23 - TomKagan
  • 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.