(Mirror of http://tikiwiki.org/tiki-index.php?page=CssStylesDev - Should probably be relocated to here.)
Overview
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.
Table Of Contents
{maketoc}
TikiWiki 1.9 Readiness
The following is a, probably incomplete, list of changes needed to make earlier themes ready for TikiWiki 1.9
-
ReleaseProcess19 lists the new CSS classes added during the Tiki 1.9 development cycle.
- Themes that have a local copy of module.tpl or mod-*.tpl: designers should perform a merge with parent to pick up changes to module parameters. See ShowHideModulesAndColumns and cvs commits to BRANCH-1-9 by mdavey starting 2005-02-23.
- Themes that have a local copy of tiki.tpl: designers should perform a merge with parent to pick up changes to feature_left_modules and feature_right_modules tests. See ShowHideModulesAndColumns and cvs commits to BRANCH-1-9 by mdavey starting 2005-02-25.
- Themes that have a local copy of tiki-show_page.tpl: designers should perform a merge with parent to pick up chages to the editdate (authors and date line) section.
- Finally, add the line "@version: 1.9" into the comments at the top of the stylesheet (within the first 30 lines) once every new CSS class introduced in 1.9 has been added to the stylesheet.
See also
General Layout Styles
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
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 |
Tables
Wiki Page
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 |
Wiki list
CSS code |
Description |
.normal |
table containing the articles list |
td.heading |
table heading cell |
td.even, td.odd |
cell |
File gals
CSS code |
Description |
.normal |
table containing the articles list |
td.heading |
table heading cell |
td.even, td.odd |
cell |
Image gals
CSS code |
Description |
.normal |
table containing the articles list |
td.heading |
table heading cell |
td.even, td.odd |
cell |
List blogs
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 |
... |
... |
List articles
CSS code |
Description |
.normal |
table containing the articles list |
td.heading |
table heading cell |
td.even, td.odd |
cell |
Articles Home
CSS code |
Description |
div.articletitle |
title |
div.titlea |
main title |
div.titleb |
sub title |
div.articleheading |
|
div.articletrailer |
|
|
|
|
List forums
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 |
FAQs
CSS code |
Description |
.normal |
table containing the articles list |
td.heading |
table heading cell |
td.even |
cell |
Calendar
.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 |
|
...
P.S.
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.''