TWiki/PatternSkinCss.mdwn

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