geekymedia_web/twiki/data/TWiki/PatternSkinCss.txt - annotate

Return to PatternSkinCss.txt CVS log
Up to [RizwankCVS] / geekymedia_web / twiki / data / TWiki
  1 rizwank 1.1 %META:TOPICINFO{author="PeterThoeny" date="1092718032" format="1.0" version="1.2"}%
  2             ---+!! Css elements in !PatternSkin
  3             
  4             This page is a reference for all CSS classes used in PatternSkin.
  5             
  6             %TOC{title="Page contents:"}%
  7             
  8             The !PatternSkin stylesheet is divided in two files:
  9             	* [[%PUBURL%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page
 10             	* [[%PUBURL%/%TWIKIWEB%/PatternSkin/style.css][style.css]]: appearance of blocks and all other page elements
 11             
 12             If you want to learn how to create your own look or skin based on !PatternSkin, read further in PatternSkin.
 13             
 14             ---++ Naming conventions
 15             
 16             !PatternSkin follows the naming conventions used in TWiki core code: all TWiki class names have the prefix =twiki=: twikiEditPage, twikiTopicAction, etcetera. ID names are not used, only class names, to allow multipe class names. See also: TWikiCss.
 17             
 18             ---++ Namespaces
 19             
 20             !PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag. 
 21             
 22 rizwank 1.1 	* The body tag in view.pattern.tmpl for instance has the class name "twikiViewPage": =&lt;body class="twikiViewPage"&gt;=. All CSS elements specific to the view template thus can be defined as =.twikiViewPage .someClassName=.
 23             	* All templates that are _not_ the view template have the body class name "twikiNoViewPage". That makes it easy to give all of these pages a different layout in one sweep (smaller or wider margins for instance). Template edit.pattern.tmpl uses =&lt;body class="twikiNoViewPage twikiEditPage"&gt;=.
 24             
 25             ---+++ body class names
 26             
 27             	* .twikiViewPage
 28             	* .twikiViewPage .twikiPrintPage
 29             	* .twikiNoViewPage
 30             	* .twikiNoViewPage .twikiEditPage
 31             	* .twikiNoViewPage .twikiAttachPage
 32             	* .twikiNoViewPage .twikiChangeFormPage
 33             	* .twikiNoViewPage .twikiDiffPage
 34             	* .twikiNoViewPage .twikiRenamePage
 35             	* .twikiSearchResultsPage
 36             
 37             ---++ Layout classes
 38             
 39             	* General
 40             		* .twikiLeft - a left floating element
 41             		* .twikiRight - a right floating element
 42             		* .twikiClear - to clean up either of these floats: put immediately after the containing block
 43 rizwank 1.1 		* .twikiHidden - hidden element
 44             
 45             	* TWiki block elements
 46             		* .twikiMiddleContainer - holder for twikiMain and twikiLeftbar
 47             		* .twikiLeftBar - left bar area
 48             		* .twikiLeftBarContents - used for left menu
 49             		* .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc.
 50             		* .twikiTopBar - top bar area
 51             		* .twikiBottomBar - bottom bar area
 52             
 53             	* Layout adjustments on specific pages
 54             		* .twikiNoViewPage .twikiMain
 55             		* .twikiPrintPage .twikiMain
 56             		* .twikiPrintPage .twikiBottomBar
 57             
 58             ---++ Style classes
 59             	
 60             	* .twikiMiddleContainer - holder for twikiMain and twikiLeftbar
 61             	* .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc)
 62             	* .twikiTopBar - top bar area
 63             	* .twikiTopBarContents - logo, go box
 64 rizwank 1.1 	* .twikiLeftBar - left bar area
 65             	* .twikiWebIndicator - shows current Web name; background of color %<nop>WEBBGCOLOR%
 66             	* .twikiLeftBarContents - used for left menu (a bullet list) 
 67             	* .twikiLeftBarPersonal - block of personal links (included topic %<nop>MAINWEB%.%<nop>USERNAME%LeftBar)
 68             	* .twikiBottomBar - bottom bar area
 69             	* .twikiBottomBarContents - copyright
 70             	* .twikiTopic
 71             	* .twikiAttachments - attachment table; used in template attachtables.tmpl
 72             	* .twikiForm - !WebForm table; used in template attachtables.tmpl
 73             	* .twikiTopicAction - actions buttons at bottom of page; holder of table with buttons
 74             	* .twikiTopicActionSecondary - second layer above twikiTopicAction (for instance in Preview)
 75             	* .twikiTopicActionHelp - help text row
 76             	* .twikiCancelCol - table columns (td) for cancel button
 77             	* .twikiSubmitCol - table columns (td) for submit button
 78             	* .twikiAddCol - table columns (td) for additional button/link (for instance: "Move attachment")
 79             	* .twikiSeparator - separator character
 80             	* .twikiToc - topic contents (%<nop>TOC%)
 81             	* .twikiTocTitle - title of TOC (%<nop>TOC{title="Contents:"}%)
 82             	* .twikiTopicInfo - revision (%<nop>REVINFO%) and moved (%<nop>META{"moved"}%) info
 83             	* .twikiRevInfo - revision info (top and bottom of page)
 84             	* .twikiTopicFooter - used for breadcrumb (twikiHomePath)
 85 rizwank 1.1 	* .twikiHomePath - breadcrumb
 86             	* .twikiToolBar - action buttons at top of topic (a bullet list), revision info
 87             	* .twikiPageNav - links "end of topic" and "to top"
 88             	* .twikiSearchBox - go box and current page in top bar
 89             	* .twikiHelp - help text
 90             	* .twikiBroadcastMessage - BROADCASTMESSAGE
 91             	* .twikiAlert - red
 92             	* .twikiGrayText - grayed out text, literally gray
 93             	* .twikiSmall - styled "small"
 94             	* .twikiNewLink - style of links to yet non-existent pages (not used)
 95             
 96             	* Table class names (emitted from TWiki.TablePlugin)
 97             		* .twikiSortedAscendingCol - sortable table column header that is sorted ascending (uses TWiki.TablePlugin)
 98             		* .twikiSortedDescendingCol - ditto sorted descending
 99             		* .twikiFirstCol
100             	* Other table class names
101             		* .twikiVersatileTable - table used in various places (Attach, Rename, Changeform)
102             		* .twikiVersatileTable .twikiMainCol - table column that is the most important part of the table
103             		* .twikiVersatileTable .twikiOldCol - table column with 'old' appearance, for instance the old attachment or the old topic name
104             		* .twikiVersatileTable .twikiHelpCol - table column with help texts
105             		
106 rizwank 1.1 	* Search
107             		* .twikiNew - emitted from Search.pm and Changes.pm with the text NEW
108             		* .twikiSummary - summary text with search results
109             		* .twikiSearchResults - the big block of all results
110             		* .twikiSearchResultsHeader - top of block, styled with %<nop>WEBBGCOLOR%
111             		* .twikiSearchResults .twikiTopRow  - top of one result, with link, author, revision
112             		* .twikiSearchResults .twikiBottomRow - result summary
113             		* .twikiSearchResults .twikiAlert - used with "locked" text 
114             		* .twikiSearchResultCount - result count
115             		* .twikiBookViewList - the big block of all results with book view option
116             
117             	* Form elements
118             		* .twikiCheckbox - styled checkbox
119             		* .twikiRadioButton
120             		* .twikiSubmit - submit button (in twikiTopicAction this is the darkest button; in twikiTopic it has a lighter color)
121             		* .twikiButton - general button (in Rename/Delete: clear/select all checkboxes)
122             		* .twikiSecondary - button next to submit button (same appearance as twikiButton)
123             		* .twikiTertiary - button at far right (blue color)
124             		* .twikiCancel - cancel button
125             		* .twikiEditPage .twikiFormHolder - constrains the width of the textarea
126             		* .twikiChangeFormButton - emitted from Form.pm, button to change the !WebForm - styled as link
127 rizwank 1.1 		* .twikiEditForm - emitted from Form.pm, editable !WebForm table
128             		* .twikiEditFormTextField - emitted from Form.pm, input textfield in twikiEditForm
129             		* .twikiSig - signature copy field
130             
131             	* Preview
132             		* .twikiPreviewPage .twikiPreviewArea - holder of previewed topic text
133             	
134             	* Attach
135             		* .twikiAttachPage .twikiNotes - holder of help text
136             		* .twikiAttachPage .twikiPrevious - attachment table of previous versions
137             
138             	* Diff
139             		* .twikiDiffPage .twikiDiffTable - block of revisions; emitted from RDiff.pm (also all diff classes below)
140             		* .twikiDiffPage .twikiDiffDeletedHeader
141             		* .twikiDiffPage .twikiDiffDeletedMarker
142             		* .twikiDiffPage .twikiDiffDeletedText
143             		* .twikiDiffPage .twikiDiffAddedHeader
144             		* .twikiDiffPage .twikiDiffAddedMarker
145             		* .twikiDiffPage .twikiDiffAddedText
146             		* .twikiDiffPage th.twikiDiffChangedHeader
147             		* .twikiDiffPage .twikiDiffChangedText
148 rizwank 1.1 		* .twikiDiffPage .twikiDiffUnchangedText
149             		* .twikiDiffPage .twikiDiffLineNumberHeader
150             
151             ---++ CSS tags emitted from TWiki core code
152             
153             See: TWikiCss
154             
155             ---++ Layout per template
156             
157             ---+++ View template
158             
159             <img src="%ATTACHURLPATH%/CSS_element_layout_view.pattern.tmpl.png" alt="CSS layout in View template" style="border:1px solid #ddd;" width="576" height="735"  />
160             
161             -- TWiki:Main.ArthurClemens - 08 Aug 2004
162             
163             %META:FILEATTACHMENT{name="CSS_element_layout_view.pattern.tmpl.png" attr="h" comment="" date="1092634624" path="CSS_element_layout_view.pattern.tmpl.png" size="48981" user="ArthurClemens" version="1.1"}%
Rizwan Kassim