CSS elements in PatternSkin
This page is a reference for all CSS classes used in
PatternSkin.
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.
- Positional containers are referred by id, for instance
#patternLeftBar.
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 (smaller or wider margins for instance) in one sweep. 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 (
viewplain.pattern.tmpl)
Layout classes
- Main layout elements (in order of appearance in
body.pattern.tmpl)
- #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
- #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
- #patternPage - html content container
- Left bar:
- #patternWrapper
- #patternLeftBar - left bar area
- #patternLeftBarContents - used for left menu
- #patternOuter - wrapper container
- #patternFloatWrap - wrapper container
- #patternMain - center area
- #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
- #patternTopBar - top bar area
- #patternTopBarContents - header art / logo; contains topic WebTopBar
- #patternBottomBar - bottom bar area
- #patternBottomBarContents - copyright
Style classes
- View
- .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
- .patternTopicActions - container for multiple .patternTopicAction rows
- .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 - colored block at the top of the left bar to indicate the current web
- .patternFormHolder - container around form to manage the size of form elements
- .patternLeftBarPersonal - block of personal links (included topic %USERSWEB%.%USERNAME%LeftBar)
- .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
- .patternButton - tab button Edit, Attach, Printable at top of topic
- .patternMetaMenu - search box, jump box, language selector
- Edit
- .patternSig - signature copy box
- .patternSaveOptions - holder for .patternSaveOptionsContents
- .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
- .patternSaveHelp - info block with help on save options (access keys and potentially other info)
- Preview page
- .patternPreviewArea - container around preview of .patternTopic
- Attach page
- .patternPrevious - attachment table of previous versions
- .patternMoveAttachment - container for "Move or Delete attachment"
- .patternAttachForm
- Rename (rename, move, delete)
- patternRenameOptionsList - list of topics that can be updated
- More
- patternDiffOptions - row of revision options under "Compare revisions"
- Search results
- .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
- .patternSearchResultsHeader - horizontal bar with the web color
- .patternSearchResults - block of one result
- .patternSearchResultCount - the number of results
- .patternSearched - feedback on the string used to search
Related Topics: TWikiSkins,
AdminDocumentationCategory
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding The Caboteria?
Send feedback Note: Please contribute updates to this topic on TWiki.org at
TWiki:TWiki.PatternSkinCss.