CSS elements in PatternSkin

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

Page contents:

Naming conventions
Namespaces
- Page type classes
Layout classes
Style classes
Layout per template
- View template

PatternSkin uses 4 stylesheets:

layout.css: positioning of block elements on the page
style.css: margins, paddings, borders, font sizes
colors.css: text colors, background colors, border colors
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": <body class="patternViewPage">. 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 <body class="patternNoViewPage patternEditPage">.

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 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 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 %MAINWEB%.%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

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

Layout per template

View template

CSS layout in View template

Related Topics: TWikiSkins, AdminDocumentationCategory

Topic PatternSkinCss . { Edit | Attach | Backlinks: Web All webs | Printable | History: r3 < r2 < r1 More }

Copyright © 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

	TWiki > TWiki > PatternSkinCss	TWiki webs: Main \| TWiki \| Sandbox
	TWiki . { Welcome \| Register \| Changes \| Topics \| Index \| Search \| Go }