• Where are we?
    Current Tikiwiki style templates and CSS files are overcomplicated. Mostly they do use tables for layout and so many unnecessary different classes and IDs. It isn't very easy to maintain, modify or understand, sometimes a theme displays wrong, disallows an user to change font size in his/her browser or the page structure is designed against usability and accessibility.
  • Where do we want to be?
    We want to create simple, easy understandable style with minimum of required IDs and classes in XHTML Strict compliant template layout with simple CSS file. Still we would like to produce pleasant look and feel, which will be compatible with most available modern browsers (Mozilla 1+/Netscape7+, MSIE 5+, Opera 7+, Konqueror 3+, Safari, ...) and still browseable with CSS switched off using some CLI or "stone age" browsers.
  • Who is working on what? (Priorities/goals/majors issues/roles)
    • luci
      • Priorities:
        • one simple CSS file
        • perfect code
      • Goals:
        • pure CSS and valid XHTML 1.0 Strict based layout which can be used as a model for other themes and maybe even replace the default *.tpl files for future Tikiwiki releases
      • Role: developer - project coordinator

  • enhance CSS for forums
  • Identify problematic code in style.css & Simple Style templates
  • Full XHTML compliance
  • and more ...

  • Define width of center column (for lack of a better word)
  • CSS for modules
  • CSS for titlebars in wiki pages
  • CSS for tables and fancy tables
  • CSS for calendar
  • CSS to fix appearance of input fields


Who is interested/participating on working here generally? (Link your UserPage)

link yourself here

  • Bugs
    • some input fields and textareas overflows into right column (fixed)
    • MSIE 6.0 displays bottom scrollbar, but the content fits in viewport well (unconfirmed)
    • MSIE 5.0 displays huge textarea width in Shoutbox module which causes to display it on the right side out of the viewport
    • add more
  • RFEs
    • none yet
  • tech support
    • irc.freenode.net, #tikiwiki

Competition and standards

We (well, actually me, luci wink) decided to use the technique of "source ordered floats" by Big John for the best compatibility and flexibility of Simple style!

Similar purpose and/or pretty well structured and coded styles in Tiki are:

This section is outdated. We need more research here

All other styles than Simple have got their own bugs:

  • Styles not working on MSIE6 - tiki1.7 : StylesAkwa, StylesGeo, StylesMatrix, StylesMatrixlight, StylesMose, StylesNotheme, StylesNotheme.II, StylesNotheme.III
  • tiki All styles except moreneat, neat, olive, and Subsilver ( StylesMoreneat , StylesNeat , StylesOlive , StylesSubsilver ) have obvious display problems on IE 5.2 and Safari (OS X.2). The most prevalent problem is that boxes that should be below text overlap the bottom of lines. This bug shows in screenshots from other OSs as well.
This section is outdated. We need more research here
some reflections and examples are at LayoutDivOrTable
Before you think it's a "mystery bug", read this!


Latest version of the Simple style is on CVS BRANCH-1-9. Please test it here or on your local CVS copy and feel free to comment, suggest or modify it to make Simple style even better than it is wink. Read the file styles/simple.css for "documentation"...

The Simple style files can be found in:

  1. Templates: templates/styles/simple/*
  2. CSS file: styles/simple.css
  3. Graphics: styles/simple/*

Wiki boxing arena (read "Wiki discussion")

For instance, in a wiki page, if I take off all the width="100%" and width="33%" in tiki-editpage.tpl, the page is nice with MSIE6. Is the tiki team ready to clean all the templates? Is the simple theme ready to copy and update all the templates in its local directory?

luci answers:

yes, wiki pages displays pretty nice, but no, we're not ready yet to replace all the styles tpl files until Simple will be final and well tested.

For MSIE5/win (MSIE6?), there is the broken box model - known problem about the Microsoft box interpretation: they consider the width of a box is the width of the content. The standard considers that the width is the entire box except margin (=content+padding+border).
A method to correct it is the Tantek method: do not use padding and size at the same time (see for example box model hack and another one).
In any case, we have to correct the tiki templates and take away the width in the css to apply these hacks.

luci answers:

it's false to take away the width in every css file. did you mean tpl file instead? it depends on the style (fixed/floating layout) and needs to be cared specifically.


To hack or not to hack? That's a question! :wink:
some ideas about cleaning the css files CSSCleaning

Other resources

Pure CSS layout techniques:

Page last modified on Friday 17 September 2004 11:42:59 GMT-0000

Upcoming Events

1)  25 Jun 2024 16:00 GMT-0000
Data umbrella : Build Your First Database Web App with (open source) Tiki Trackers
2)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
Tiki birthday
6)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
8)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting