create new tag
, view all tags
ALERT! NOTE: This is a DistributionDocument. Please help maintain high quality documentation: This is a wiki, please fix the documentation if you find errors or incomplete content. Put questions and suggestions concerning the documentation of this topic in the comments section below. Use the Support web for problems you are having using TWiki.

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.


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

Comments & Questions about this Distribution Document Topic


CSS_element_layout_view.pattern.tmpl.png was incredibly handy. do you use some sort of tool to generate it, or was it done by hand? having equivalent images for the other templates would be nice... smile

  • By hand. The other templates will come later. Time... -- ArthurClemens - 28 Aug 2004

-- WillNorris - 28 Aug 2004

It occurs to me that while the "print" skin is actually done with a template, it could equally well have been done with another CSS, one that supressed .twikiTopBar, .twikiLeftbar, .twikiToolBar, .twikiBottomBar, .twikiPagenav, .twikiTopicAction.

It also occurs to me that there is something not shown on this diagram because it is already supressed: .twikiRightBar and .twikiRightBarContents.

-- AntonAylward - 05 Nov 2004

Please use the Support forum if you have questions about TWiki features. This comment section is about the documentation of this topic.
Edit | Attach | Watch | Print version | History: r16 < r15 < r14 < r13 < r12 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r16 - 2009-05-13 - PeterThoeny
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.