PatternSkinCss

topic end
---+!! Css elements in !PatternSkin

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

%TOC{title="Page contents:"}%

The !PatternSkin stylesheet is divided in two files:
   * [[%PUBURL%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page
   * [[%PUBURL%/%TWIKIWEB%/PatternSkin/style.css][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": =&lt;body class="twikiViewPage"&gt;=. 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 =&lt;body class="twikiNoViewPage twikiEditPage"&gt;=.

---+++ 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 %<nop>WEBBGCOLOR%
   * .twikiLeftBarContents - used for left menu (a bullet list) 
   * .twikiLeftBarPersonal - block of personal links (included topic %<nop>MAINWEB%.%<nop>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 (%<nop>TOC%)
   * .twikiTocTitle - title of TOC (%<nop>TOC{title="Contents:"}%)
   * .twikiTopicInfo - revision (%<nop>REVINFO%) and moved (%<nop>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 TWiki.TablePlugin)
      * .twikiSortedAscendingCol - sortable table column header that is sorted ascending (uses TWiki.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 %<nop>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

<img src="%ATTACHURLPATH%/CSS_element_layout_view.pattern.tmpl.png" alt="CSS layout in View template" style="border:1px solid #ddd;" width="576" height="735"  />

-- TWiki:Main.ArthurClemens - 08 Aug 2004
to top
End of topic
Skip to action links | Back to top
You are here: TWiki > PatternSkinCss

r1.2 - 17 Aug 2004 - 04:47 - PeterThoeny to top
TWiki
Welcome
