Welcome, Registration, and other StartingPoints; TWiki history & Wiki style; All the docs...
View   r3  >  r2  ...
PatternSkinCss 3 - 27 Mar 2005 - Main.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"

Revision 3r3 - 27 Mar 2005 - 13:14:15 - TWikiContributor
Revision 2r2 - 17 Aug 2004 - 04:47:12 - PeterThoeny?
This site is powered by the TWiki collaboration platform.
All material on this collaboration platform is the property of the contributing authors.
All material marked as authored by Eben Moglen is available under the license terms CC-BY-SA version 4.
Syndicate this site RSSATOM