Css elements in PatternSkin

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

Page contents:

The PatternSkin stylesheet is divided in two files:

  • layout.css: positioning of block elements on the page
  • style.css: appearance of blocks and all other page elements

If you want to learn how to create your own look or skin based on PatternSkin, read further in PatternSkin.

Naming conventions

PatternSkin follows the naming conventions used in TWiki core code: all TWiki class names have the prefix twiki: twikiEditPage, twikiTopicAction, etcetera. ID names are not used, only class names, to allow multipe class names. See also: 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 "twikiViewPage": <body class="twikiViewPage">. All CSS elements specific to the view template thus can be defined as .twikiViewPage .someClassName.
  • All templates that are not the view template have the body class name "twikiNoViewPage". 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="twikiNoViewPage twikiEditPage">.

body class names

  • .twikiViewPage
  • .twikiViewPage .twikiPrintPage
  • .twikiNoViewPage
  • .twikiNoViewPage .twikiEditPage
  • .twikiNoViewPage .twikiAttachPage
  • .twikiNoViewPage .twikiChangeFormPage
  • .twikiNoViewPage .twikiDiffPage
  • .twikiNoViewPage .twikiRenamePage
  • .twikiSearchResultsPage

Layout classes

  • General
    • .twikiLeft - a left floating element
    • .twikiRight - a right floating element
    • .twikiClear - to clean up either of these floats: put immediately after the containing block
    • .twikiHidden - hidden element

  • TWiki block elements
    • .twikiMiddleContainer - holder for twikiMain and twikiLeftbar
    • .twikiLeftBar - left bar area
    • .twikiLeftBarContents - used for left menu
    • .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc.
    • .twikiTopBar - top bar area
    • .twikiBottomBar - bottom bar area

  • Layout adjustments on specific pages
    • .twikiNoViewPage .twikiMain
    • .twikiPrintPage .twikiMain
    • .twikiPrintPage .twikiBottomBar

Style classes

  • .twikiMiddleContainer - holder for twikiMain and twikiLeftbar
  • .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc)
  • .twikiTopBar - top bar area
  • .twikiTopBarContents - logo, go box
  • .twikiLeftBar - left bar area
  • .twikiWebIndicator - shows current Web name; background of color %WEBBGCOLOR%
  • .twikiLeftBarContents - used for left menu (a bullet list)
  • .twikiLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar)
  • .twikiBottomBar - bottom bar area
  • .twikiBottomBarContents - copyright
  • .twikiTopic
  • .twikiAttachments - attachment table; used in template attachtables.tmpl
  • .twikiForm - WebForm table; used in template attachtables.tmpl
  • .twikiTopicAction - actions buttons at bottom of page; holder of table with buttons
  • .twikiTopicActionSecondary - second layer above twikiTopicAction (for instance in Preview)
  • .twikiTopicActionHelp - help text row
  • .twikiCancelCol - table columns (td) for cancel button
  • .twikiSubmitCol - table columns (td) for submit button
  • .twikiAddCol - table columns (td) for additional button/link (for instance: "Move attachment")
  • .twikiSeparator - separator character
  • .twikiToc - topic contents (%TOC%)
  • .twikiTocTitle - title of TOC (%TOC{title="Contents:"}%)
  • .twikiTopicInfo - revision (%REVINFO%) and moved (%META{"moved"}%) info
  • .twikiRevInfo - revision info (top and bottom of page)
  • .twikiTopicFooter - used for breadcrumb (twikiHomePath)
  • .twikiHomePath - breadcrumb
  • .twikiToolBar - action buttons at top of topic (a bullet list), revision info
  • .twikiPageNav - links "end of topic" and "to top"
  • .twikiSearchBox - go box and current page in top bar
  • .twikiHelp - help text
  • .twikiBroadcastMessage - BROADCASTMESSAGE
  • .twikiAlert - red
  • .twikiGrayText - grayed out text, literally gray
  • .twikiSmall - styled "small"
  • .twikiNewLink - style of links to yet non-existent pages (not used)

  • Table class names (emitted from TablePlugin)
    • .twikiSortedAscendingCol - sortable table column header that is sorted ascending (uses TablePlugin)
    • .twikiSortedDescendingCol - ditto sorted descending
    • .twikiFirstCol
  • Other table class names
    • .twikiVersatileTable - table used in various places (Attach, Rename, Changeform)
    • .twikiVersatileTable .twikiMainCol - table column that is the most important part of the table
    • .twikiVersatileTable .twikiOldCol - table column with 'old' appearance, for instance the old attachment or the old topic name
    • .twikiVersatileTable .twikiHelpCol - table column with help texts

  • Search
    • .twikiNew - emitted from Search.pm and Changes.pm with the text NEW
    • .twikiSummary - summary text with search results
    • .twikiSearchResults - the big block of all results
    • .twikiSearchResultsHeader - top of block, styled with %WEBBGCOLOR%
    • .twikiSearchResults .twikiTopRow - top of one result, with link, author, revision
    • .twikiSearchResults .twikiBottomRow - result summary
    • .twikiSearchResults .twikiAlert - used with "locked" text
    • .twikiSearchResultCount - result count
    • .twikiBookViewList - the big block of all results with book view option

  • Form elements
    • .twikiCheckbox - styled checkbox
    • .twikiRadioButton
    • .twikiSubmit - submit button (in twikiTopicAction this is the darkest button; in twikiTopic it has a lighter color)
    • .twikiButton - general button (in Rename/Delete: clear/select all checkboxes)
    • .twikiSecondary - button next to submit button (same appearance as twikiButton)
    • .twikiTertiary - button at far right (blue color)
    • .twikiCancel - cancel button
    • .twikiEditPage .twikiFormHolder - constrains the width of the textarea
    • .twikiChangeFormButton - emitted from Form.pm, button to change the WebForm - styled as link
    • .twikiEditForm - emitted from Form.pm, editable WebForm table
    • .twikiEditFormTextField - emitted from Form.pm, input textfield in twikiEditForm
    • .twikiSig - signature copy field

  • Preview
    • .twikiPreviewPage .twikiPreviewArea - holder of previewed topic text

  • Attach
    • .twikiAttachPage .twikiNotes - holder of help text
    • .twikiAttachPage .twikiPrevious - attachment table of previous versions

  • Diff
    • .twikiDiffPage .twikiDiffTable - block of revisions; emitted from RDiff.pm (also all diff classes below)
    • .twikiDiffPage .twikiDiffDeletedHeader
    • .twikiDiffPage .twikiDiffDeletedMarker
    • .twikiDiffPage .twikiDiffDeletedText
    • .twikiDiffPage .twikiDiffAddedHeader
    • .twikiDiffPage .twikiDiffAddedMarker
    • .twikiDiffPage .twikiDiffAddedText
    • .twikiDiffPage th.twikiDiffChangedHeader
    • .twikiDiffPage .twikiDiffChangedText
    • .twikiDiffPage .twikiDiffUnchangedText
    • .twikiDiffPage .twikiDiffLineNumberHeader

CSS tags emitted from TWiki core code

See: TWikiCss

Layout per template

View template

CSS layout in View template

-- ArthurClemens? - 08 Aug 2004

Attachment sort Action Size Date Who Comment
CSS_element_layout_view.pattern.tmpl.png manage 47.8 K 16 Aug 2004 - 05:37 ArthurClemens?  

Revision: r1.1 - 16 Aug 2004 - 05:37 - ArthurClemens?
TWiki > PatternSkinCss
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Project hosting provided by:
SourceForge.net Logo		Donations welcome:
Support This Project