Skip to topic | Skip to bottom
Powered by TWiki
You are here: TWiki > TWiki Web > PatternSkinCss r3 - 27 Mar 2005 - 13:14 - TWikiContributor
EditAttachPrintable

Start of topic | Skip to actions

CSS elements in PatternSkin

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

Page contents:

PatternSkin uses 3 stylesheets:

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.
  • ID names are not used, only class names, to allow multipe class names.

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
    • .patternPage - html content container
    • .patternMiddleContainer - holder for patternMain and twikiLeftbar
    • .patternMain - holder of patternTop, patternTopic, twikiAttachments, etc.
    • .patternTopBar - top bar area
    • .patternTopBarContents - logo
    • .patternLeftBar - left bar area
    • .patternLeftBarContents - used for left menu
    • .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
    • .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
    • .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"

  • 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

End of topic
Skip to actions | Back to top
Edit | Attach | Printable | Raw View | Backlinks: Web, All Webs | History: r3 < r2 < r1 | More topic actions
This site is powered by the TWiki collaboration platformCopyright © 1999-2008 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
key Log In or Register