Loading...
 
Skip to main content

History: CssStylesDev

Preview of version: 3 (current)

(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.''

History

Advanced
Information Version
Wed 25 of Dec, 2024 05:58 GMT-0000 System Administrator automatic conversion 3
View
Fri 17 of Feb, 2006 07:31 GMT-0000 System Administrator Categorized. 2
View
Fri 17 of Feb, 2006 07:30 GMT-0000 System Administrator Mirror page created. 1
View