PatternSkinCss < TWiki

---+!! CSS elements in !PatternSkin

This page is a reference for all CSS classes used in PatternSkin.

%TOC{title="Page contents:"}%

!PatternSkin uses 4 stylesheets:
   * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page
   * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]]: margins, paddings, borders, font sizes
   * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/colors.css][colors.css]]: text colors, background colors, border colors
   * [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/print.css][print.css]]: optimalizations for printed page
   
If you want to learn how to create your own look or skin based on !PatternSkin, read further in PatternSkin.

---++ Naming conventions

   * All !PatternSkin specific classes have the prefix =pattern=: patternEditPage, patternTopicAction, etcetera. 
   * TWiki specific classes (emitted by the TWiki engine) have the prefix =twiki=: twikiButton, twikiToc, etcetera. See for a complete list TWikiCss.

---++ Namespaces

!PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag. 

   * The body tag in view.pattern.tmpl for instance has the class name "patternViewPage": =&lt;body class="patternViewPage"&gt;=. All CSS elements specific to the view template thus can be defined as =.patternViewPage .someClassName=.
   * 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 =&lt;body class="patternNoViewPage patternEditPage"&gt;=.

---+++ Page type classes

   * .patternViewPage
   * .patternViewPage .patternPrintPage
   * .patternNoViewPage
   * .patternNoViewPage .patternEditPage
   * .patternNoViewPage .patternAttachPage
   * .patternNoViewPage .patternChangeFormPage
   * .patternNoViewPage .patternDiffPage
   * .patternNoViewPage .patternRenamePage
   * .patternSearchResultsPage
   * .patternPlainPage (view.plain.pattern.tmpl)

---++ Layout classes

   * Main layout elements
      * #patternScreen - holder of patternPageShadow and patternBottomBar
      * #patternPageShadow - shadow border around patternPage; default not used
      * #patternPage - html content container
      * #patternColumnWrapper - holder for patternMain and patternLeftbar
      * #patternMain - holder of patternMainContents
      * #patternTopBar - top bar area
      * .patternTopBarContents - table (for easy vertical alignment) for header art / logo; contains topic %TWIKIWEB%.WebTopBar
      * #patternLeftBar - left bar area
      * .patternLeftBarContents - used for left menu
      * #patternBottomBar - bottom bar area
      * .patternBottomBarContents - copyright

---++ Style classes

   * View
      * .patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
      * .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)
      * .patternTopBarLogo - logo position in patternTopBar (topic %TWIKIWEB%.WebTopBar)
      * .patternTopBarOverlay - striped white image background
      * .patternTopic - TWiki topic text
      * .patternTop - area at top of topic text, with patternHomePath, revision and action buttons
      * .patternTopicAction - container for .patternActionButtons
      * .patternActionButtons - action buttons at bottom of page
      * .patternMoved - topic moved info (only visible when the topic has changed name or web)
      * .patternWebIndicator - not used
      * .patternFormHolder - container around form to manage the size of form elements
      * .patternLeftBarPersonal - block of personal links (included topic %<nop>MAINWEB%.%<nop>USERNAME%LeftBar)
      * .patternVersatileTable - table used in various places (Attach, Rename, Changeform)
         * .patternVersatileTable .patternMainCol - table column that is the most important part of the table
         * .patternVersatileTable .patternOldCol - table column with 'old' appearance, for instance the old attachment or the old topic name
         * .patternVersatileTable .patternHelpCol - table column with help texts
      * .patternHomePath - breadcrumb at top
      * .patternHomePathTitle - "You are here" text
      * .patternRevInfo - revision info and author name
      * .patternToolBar - holder for .patternToolBarButtons
      * .patternToolBarButtons - action buttons at top of page
      * .patternToolBarBottom - seperator
      * .patternSimpleLogo - logo used on 'simple' pages like the login screen
      * .patternFormFieldVerticalForm - input field in vertically formatted form 

   * Edit
      * .patternSig - signature copy box
      * .patternSaveOptions - holder for .patternSaveOptionsContents
      * .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
      * .patternAccessKeyInfo - info block with access key information

   * Preview page
      * .patternPreviewArea - container around preview of .patternTopic

   * Attach page
      * .patternPrevious - attachment table of previous versions
      * .patternMoveAttachment - container for "Move or Delete attachment"

   * Rename (rename, move, delete)
      * patternRenameOptionsList - list of topics that can be updated

   * More
      * patternDiffOptions - row of revision options under "Compare revisions"
      
   * Search results
      * .patternSearchResultsHeader
      * .patternSearchString
      * .patternSearchResults
      * .patternSearchResultCount
      * .patternSearchResultsBegin - for changes template with noheader="on"
      * .patternBookViewList

   * Print
      * .patternTopicFooter - revision and author info at bottom of printed topic

   * %TWIKIWEB%.WebLeftBarSearch
      * .patternFormSpacer - for layout purposes
      * .patternFormField
      * .patternFormButton
      * .patternChangeLanguage - change language button

---++ Layout per template

---+++ View template

<img src="%ATTACHURLPATH%/CSS_element_layout_view.pattern.tmpl.png" alt="CSS layout in View template" style="border:1px solid #ddd;" width="586" height="746"  />

__Related Topics:__ TWikiSkins, AdminDocumentationCategory
This topic: TWiki > PatternSkinCss
Topic revision: r3 - 2005-03-27 - TWikiContributor
Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCss.