History: CssStylesDev
Preview of version: 2
(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
Table of contents
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
- MoreNeatLayoutSchema
- ReleaseProcess19
- StyleCreation
- ColorSchemeGenerator
- RecipeRestoreCss - tool to list CSS entities
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) |
Menus
| 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.''