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/%SYSTEMWEB%/PatternSkin/layout.css): positioning of block elements on the page
  19 - [style.css](http://www.dementia.org/twiki//view/%SYSTEMWEB%/PatternSkin/style.css): margins, paddings, borders, font sizes
  20 - [colors.css](http://www.dementia.org/twiki//view/%SYSTEMWEB%/PatternSkin/colors.css): text colors, background colors, border colors
  21 - [print.css](http://www.dementia.org/twiki//view/%SYSTEMWEB%/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 (smaller or wider margins for instance) in one sweep. 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 %SYSTEMWEB%.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 %SYSTEMWEB%.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   - .patternTopicActions - container for multiple .patternTopicAction rows
  79   - .patternTopicAction - container for .patternActionButtons
  80   - .patternActionButtons - action buttons at bottom of page
  81   - .patternMoved - topic moved info (only visible when the topic has changed name or web)
  82   - .patternWebIndicator - colored block at the top of the left bar to indicate the current web
  83   - .patternFormHolder - container around form to manage the size of form elements
  84   - .patternLeftBarPersonal - block of personal links (included topic %USERSWEB%.%USERNAME%LeftBar)
  85   - .patternHomePath - breadcrumb at top
  86   - .patternHomePathTitle - "You are here" text
  87   - .patternRevInfo - revision info and author name
  88   - .patternToolBar - holder for .patternToolBarButtons
  89   - .patternToolBarButtons - action buttons at top of page
  90   - .patternToolBarBottom - seperator
  91   - .patternSimpleLogo - logo used on 'simple' pages like the login screen
  92   - .patternButton - tab button Edit, Attach, Printable at top of topic
  93   - .patternMetaMenu - search box, jump box, language selector
  94
  95 - Edit
  96   - .patternSig - signature copy box
  97   - .patternSaveOptions - holder for .patternSaveOptionsContents
  98   - .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
  99   - .patternSaveHelp - info block with help on save options (access keys and potentially other info)
 100
 101 - Preview page
 102   - .patternPreviewArea - container around preview of .patternTopic
 103
 104 - Attach page
 105   - .patternPrevious - attachment table of previous versions
 106   - .patternMoveAttachment - container for "Move or Delete attachment"
 107   - .patternAttachForm
 108
 109 - Rename (rename, move, delete)
 110   - patternRenameOptionsList - list of topics that can be updated
 111
 112 - More
 113   - patternDiffOptions - row of revision options under "Compare revisions"
 114
 115 - Search results
 116   - .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
 117   - .patternSearchResultsHeader - horizontal bar with the web color
 118   - .patternSearchResults - block of one result
 119   - .patternSearchResultCount - the number of results
 120   - .patternSearched - feedback on the string used to search
 121
 122 **_Related Topics:_** [[TWikiSkins]], [[AdminDocumentationCategory]]