Difference: PatternSkinCss (2 vs. 3)

Revision 32005-03-27 - TWikiContributor

Line: 1 to 1
Changed:
<
<

Css elements in PatternSkin

>
>

CSS elements in PatternSkin

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

Changed:
<
<
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
>
>
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

Changed:
<
<
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.
>
>
  • 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.
 

Namespaces

PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag.

Changed:
<
<
  • 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">.
>
>
  • 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">.
 
Changed:
<
<

body class names

>
>

Page type classes

 
Changed:
<
<
  • .twikiViewPage
  • .twikiViewPage .twikiPrintPage
  • .twikiNoViewPage
  • .twikiNoViewPage .twikiEditPage
  • .twikiNoViewPage .twikiAttachPage
  • .twikiNoViewPage .twikiChangeFormPage
  • .twikiNoViewPage .twikiDiffPage
  • .twikiNoViewPage .twikiRenamePage
  • .twikiSearchResultsPage
>
>
  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .patternPlainPage (view.plain.pattern.tmpl)
 

Layout classes

Changed:
<
<
  • 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
>
>
  • Main layout elements
    • #patternScreen - holder of patternPageShadow and patternBottomBar
    • #patternPageShadow - shadow border around patternPage; default not used
    • #patternPage - html content container
    • #patternColumnWrapper - holder for patternMain and patternLeftbar
    • #patternMain - holder of patternMainContents
    • #patternTopBar - top bar area
    • .patternTopBarContents - table (for easy vertical alignment) for header art / logo; contains topic WebTopBar
    • #patternLeftBar - left bar area
    • .patternLeftBarContents - used for left menu
    • #patternBottomBar - bottom bar area
    • .patternBottomBarContents - copyright
 

Style classes

Changed:
<
<
  • .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

>
>
  • View
    • .patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
    • .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
    • .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
    • .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
    • .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"

  • Rename (rename, move, delete)
    • patternRenameOptionsList - list of topics that can be updated

  • More
    • patternDiffOptions - row of revision options under "Compare revisions"

  • 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

Changed:
<
<
CSS layout in View template
>
>
CSS layout in View template
 
Changed:
<
<
-- TWiki:Main.ArthurClemens - 08 Aug 2004
>
>
Related Topics: TWikiSkins, AdminDocumentationCategory
 
Changed:
<
<
META FILEATTACHMENT attr="h" comment="" date="1092634624" name="CSS_element_layout_view.pattern.tmpl.png" path="CSS_element_layout_view.pattern.tmpl.png" size="48981" user="ArthurClemens" version="1.1"
>
>
META FILEATTACHMENT attr="h" comment="" date="1092634624" name="CSS_element_layout_view.pattern.tmpl.png" path="CSS_element_layout_view.pattern.tmpl.png" size="37359" user="TWikiContributor" version="1.1"
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding URCS? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCss.