(Mirror of http://tikiwiki.org/tiki-index.php?page=CssStylesDev - Should probably be relocated to here.)
This page describes all used/defined CSS entities. Theme makers can use this page as the TikiWiki styles reference guide . Of couse all developers must pay attention to update this page if something is changed. And theme makers can subscribe to be notified on page changes...
Btw, when style for link is defined of course other pseudo classes can (and should be used/defined too.
The following is a, probably incomplete, list of changes needed to make earlier themes ready for TikiWiki 1.9
The tiki application is enclosed as a whole in tiki-main
. tiki-main
contains three divs: tiki-top
, tiki-mid
and tiki-bot
that will be used for the header, application and footer.
tiki-mid
contains a 3-column table, the columns are called (ids) leftcolumn
, centercolumn and rightcolumn. Finally centercolumn contains tiki-center
where the main area of the application is displayed.
CSS code | Description |
-+div#tiki-main+- | This div encloses the whole Tiki application |
3 divs inside tiki-main | |
-+div#tiki-top+- | This is the header |
-+div#tiki-mid+- | This is the middle |
-+div#tiki-bot+- | And this is the footer |
The three columns indide tiki-mid | |
-+td#leftcolumn+- | |
-+td#rightcolumn+- | |
-+td#centercolumn+- | |
The central div inside centercolumn | |
-+div#tiki-center+- |
Boxes are used to present a box with a title bar and content, they are used for modules and they are also used in the rankings, admin screen, {-+BOX+-} wiki plugin etc.
The box class is used for modules while the cbox class is used for other boxes. (what other boxes??). Simple box generated by wiki '^'
syntax.
CSS code | Description |
Box used in module | |
div.box | Boxes used for modules: They are divided into title and data. |
div.box-title | Modules boxes title |
div.box-data | Modules boxes data |
td.module | When modules display a numbered list of items each item is enclosed in a cell with the following style (included in div.box-data) |
.linkmodule | Links in modules |
Box not used in module | |
div.cbox | Boxes not used for modules: They are divided into title and data. |
div.cbox-title | Title of boxes not used in modules |
div.cbox-data | Data of boxes not used in modules |
.cboxtlink | Links in the title of boxes not used in modules |
Box in box not used in module | |
div.simplebox | a box with a margin and a border (ex: in user preferences) |
CSS code | Description |
div.separator | Extendable menu line(included in div.box-data) |
.linkmenu | Link in menu line |
.separator | Link in menu line that can expand |
.flip | Link in the box-title if the menu can be flipped |
CSS code | Description |
div.wikitext | box where the wiki page text is displayed |
page-bar | page bar where the actions are displayed ("history", "edit",....) |
div.button2 | button in the page bar |
linkbut | link in button2 |
CSS code | Description |
.normal | table containing the articles list |
td.heading | table heading cell |
td.even, td.odd | cell |
CSS code | Description |
.normal | table containing the articles list |
td.heading | table heading cell |
td.even, td.odd | cell |
CSS code | Description |
.normal | table containing the articles list |
td.heading | table heading cell |
td.even, td.odd | cell |
CSS code | Description |
.bloglist | table containing the blogs list |
td.bloglistheading | table heading cell |
td.bloglistnameeven, td.bloglistnameodd | blog name cell |
td.bloglistdescriptioneven, td.bloglistdescriptionodd | blog description cell |
... | ... |
CSS code | Description |
.normal | table containing the articles list |
td.heading | table heading cell |
td.even, td.odd | cell |
CSS code | Description |
div.articletitle | title |
div.titlea | main title |
div.titleb | sub title |
div.articleheading | |
div.articletrailer |
CSS code | Description |
.forumstable | table containing the forums list |
td.forumheading | table heading cell |
td.forumstableeven, td.forumstableodd | forum name cell |
td.forumstableinfoeven, .forumstableinfoodd | forum information cell |
CSS code | Description |
.normal | table containing the articles list |
td.heading | table heading cell |
td.even | cell |
.Cal0, .Cal1, .Cal2 | Used for status : 0 = unconfirmed, 1 = confirmed, 2 = cancelled / note that the usage of the :before pseudo-class maybe not supported by old browsers |
.caltitle | No idea what it is |
.caltab, a.caltab and a.caltab:hover | Tabs and included link when unactive |
.caltabon, a.caltabon and a.caltabon:hover | Tabs and included links when that tab is active |
div#tab, div#tabcal, div#tabnav, div.tabcal, div.tabnav | Look for the content of tabs zone (beetween buttons and the calendar) |
.calcheckbox | Style for checkbox div. Background-color is required, even if set to 'none'. |
.caltoggle | Style for the 'check / uncheck all' checkbox |
div#opaque | used for the div used around overlib, in case div.box has no background defined (mainly used in boreal and matrix) |
.calfocus, .calfocus a, .calfocuson, .calfocuson a | styles for title of each days, with .calfocuson when the focus is on that day |
.Calwiki, .Calwiki a, .Calwiki:before and same families for .Calblog, .Calgal, .Calart, .Calforum, .Caldir, .Calfgal, .Calfaq, .Calquiz, .Caltrack, .Calsurv, .Calnl, .Caleph, .Calchart | One style and family of pseudo classes for each tiki-item. |
.viewmodeon, .viewmodeoff | Style of the links to change mode (week, month) |
.calweb | The look for the small "w" that appears when there is anurl on the event |
.calprio1 to .calprio9 | Reproduced the 9 levels from sourceforge for priorities |
mose |
Please continue this page...
''tw.o credits: Contributors to this page: mdavey , bapajan , ohertel , sylvie , bpfaffenberger and marclaporte .
Page last modified on Sunday 24 April, 2005 13:19:28 UTC by mdavey.''