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="#Page type classes"> Page type classes</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   </ul>
  14 </div>
  15
  16 PatternSkin uses 4 stylesheets:
  17
  18 - [layout.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/layout.css): positioning of block elements on the page
  19 - [style.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/style.css): margins, paddings, borders, font sizes
  20 - [colors.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/colors.css): text colors, background colors, border colors
  21 - [print.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/print.css): optimalizations for printed page
  22
  23 If you want to learn how to create your own look or skin based on PatternSkin, read further in [[PatternSkin]].
  24
  25 ## <a name="Naming conventions"></a> Naming conventions
  26
  27 - All PatternSkin specific classes have the prefix `pattern`: patternEditPage, patternTopicAction, etcetera.
  28 - TWiki specific classes (emitted by the TWiki engine) have the prefix `twiki`: twikiButton, twikiToc, etcetera. See for a complete list [[TWikiCss]].
  29 - Positional containers are referred by id, for instance `#patternLeftBar`.
  30
  31 ## <a name="Namespaces"></a> Namespaces
  32
  33 PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag.
  34
  35 - The body tag in view.pattern.tmpl for instance has the class name "patternViewPage": `<body >`. All CSS elements specific to the view template thus can be defined as `.patternViewPage .someClassName`.
  36 - All templates that are _not_ the view template have the body class name "patternNoViewPage". 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 >`.
  37
  38 ### <a name="Page type classes"></a> Page type classes
  39
  40 - .patternViewPage
  41 - .patternViewPage .patternPrintPage
  42 - .patternNoViewPage
  43 - .patternNoViewPage .patternEditPage
  44 - .patternNoViewPage .patternAttachPage
  45 - .patternNoViewPage .patternChangeFormPage
  46 - .patternNoViewPage .patternDiffPage
  47 - .patternNoViewPage .patternRenamePage
  48 - .patternSearchResultsPage
  49 - .patternPlainPage (`viewplain.pattern.tmpl`)
  50
  51 ## <a name="Layout classes"></a> Layout classes
  52
  53 - Main layout elements (in order of appearance in `body.pattern.tmpl`)
  54   - #patternScreen - outer container, used when centering the page (see [[PatternSkinCssCookbookCenterPage]])
  55   - #patternPageShadow - shadow border around patternPage; default not used (see [[PatternSkinCssCookbookCenterPageBorder]])
  56   - #patternPage - html content container
  57   - Left bar:
  58     - #patternWrapper
  59     - #patternLeftBar - left bar area
  60     - #patternLeftBarContents - used for left menu
  61   - #patternOuter - wrapper container
  62   - #patternFloatWrap - wrapper container
  63   - #patternMain - center area
  64   - #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
  65   - #patternTopBar - top bar area
  66   - #patternTopBarContents - header art / logo; contains topic [[WebTopBar]]
  67   - #patternBottomBar - bottom bar area
  68   - #patternBottomBarContents - copyright
  69
  70 ## <a name="Style classes"></a> Style classes
  71
  72 - View
  73   - .patternContent - container around .patternTopic in `view.pattern.tmpl` only; to be able to give .twikiAttachments and .twikiForm a different appearance when they are not enclosed by it, for example the personal data form on the user pages (where the user form is positioned outside, above the topic text)
  74   - .patternTopBarLogo - logo position in patternTopBar (topic [[WebTopBar]])
  75   - .patternTopBarOverlay - striped white image background
  76   - .patternTopic - TWiki topic text
  77   - .patternTop - area at top of topic text, with patternHomePath, revision and action buttons
  78   - .patternTopicAction - container for .patternActionButtons
  79   - .patternActionButtons - action buttons at bottom of page
  80   - .patternMoved - topic moved info (only visible when the topic has changed name or web)
  81   - .patternWebIndicator - colored block at the top of the left bar to indicate the current web
  82   - .patternFormHolder - container around form to manage the size of form elements
  83   - .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar)
  84   - .patternHomePath - breadcrumb at top
  85   - .patternHomePathTitle - "You are here" text
  86   - .patternRevInfo - revision info and author name
  87   - .patternToolBar - holder for .patternToolBarButtons
  88   - .patternToolBarButtons - action buttons at top of page
  89   - .patternToolBarBottom - seperator
  90   - .patternSimpleLogo - logo used on 'simple' pages like the login screen
  91   - .patternButton - tab button Edit, Attach, Printable at top of topic
  92   - .patternMetaMenu - search box, jump box, language selector
  93
  94 - Edit
  95   - .patternSig - signature copy box
  96   - .patternSaveOptions - holder for .patternSaveOptionsContents
  97   - .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
  98   - .patternAccessKeyInfo - info block with access key information
  99
 100 - Preview page
 101   - .patternPreviewArea - container around preview of .patternTopic
 102
 103 - Attach page
 104   - .patternPrevious - attachment table of previous versions
 105   - .patternMoveAttachment - container for "Move or Delete attachment"
 106   - .patternAttachForm
 107
 108 - Rename (rename, move, delete)
 109   - patternRenameOptionsList - list of topics that can be updated
 110
 111 - More
 112   - patternDiffOptions - row of revision options under "Compare revisions"
 113
 114 - Search results
 115   - .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
 116   - .patternSearchResultsHeader - horizontal bar with the web color
 117   - .patternSearchResults - block of one result
 118   - .patternSearchResultCount - the number of results
 119   - .patternSearched - feedback on the string used to search
 120
 121 - [[WebLeftBarSearch]]
 122   - .patternFormButton
 123   - .patternChangeLanguage - change language button (deprecated)
 124
 125 **_Related Topics:_** [[TWikiSkins]], [[AdminDocumentationCategory]]