Difference: PatternSkinCss (1 vs. 8)

Revision 82006-03-07 - TWikiContributor

Line: 1 to 1
 

CSS elements in PatternSkin

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

Revision 72006-03-07 - TWikiContributor

Line: 1 to 1
 

CSS elements in PatternSkin

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

Line: 6 to 6
 
Page contents:

PatternSkin uses 4 stylesheets:

Changed:
<
<
  • 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
>
>
  • 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.
Line: 54 to 54
 
    • #patternMain - center area
    • #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
    • #patternTopBar - top bar area
Changed:
<
<
    • #patternTopBarContents - header art / logo; contains topic WebTopBar
>
>
    • #patternTopBarContents - header art / logo; contains topic WebTopBar
 
    • #patternBottomBar - bottom bar area
    • #patternBottomBarContents - copyright
Line: 62 to 62
 
  • 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 (where the user form is positioned outside, above the topic text)
Changed:
<
<
    • .patternTopBarLogo - logo position in patternTopBar (topic WebTopBar)
>
>
    • .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
Line: 72 to 72
 
    • .patternMoved - topic moved info (only visible when the topic has changed name or web)
    • .patternWebIndicator - colored block at the top of the left bar to indicate the current web
    • .patternFormHolder - container around form to manage the size of form elements
Changed:
<
<
    • .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar)
>
>
    • .patternLeftBarPersonal - block of personal links (included topic %USERSWEB%.%USERNAME%LeftBar)
 
    • .patternHomePath - breadcrumb at top
    • .patternHomePathTitle - "You are here" text
    • .patternRevInfo - revision info and author name
Line: 110 to 110
 
    • .patternSearchResultCount - the number of results
    • .patternSearched - feedback on the string used to search
Deleted:
<
<
  • WebLeftBarSearch
    • .patternFormButton
    • .patternChangeLanguage - change language button (deprecated)

 Related Topics: TWikiSkins, AdminDocumentationCategory

Revision 62006-03-07 - TWikiContributor

Line: 1 to 1
 

CSS elements in PatternSkin

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

Line: 24 to 24
 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.
Changed:
<
<
  • 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">.
>
>
  • 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 (smaller or wider margins for instance) in one sweep. Template edit.pattern.tmpl uses <body class="patternNoViewPage patternEditPage">.
 

Page type classes

Revision 52006-03-07 - TWikiContributor

Line: 1 to 1
 

CSS elements in PatternSkin

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

Line: 66 to 66
 
    • .patternTopBarOverlay - striped white image background
    • .patternTopic - TWiki topic text
    • .patternTop - area at top of topic text, with patternHomePath, revision and action buttons
Added:
>
>
    • .patternTopicActions - container for multiple .patternTopicAction rows
 
    • .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)
Line: 86 to 87
 
    • .patternSig - signature copy box
    • .patternSaveOptions - holder for .patternSaveOptionsContents
    • .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
Changed:
<
<
    • .patternAccessKeyInfo - info block with access key information
>
>
    • .patternSaveHelp - info block with help on save options (access keys and potentially other info)
 
  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic

Revision 42006-03-07 - TWikiContributor

Line: 1 to 1
 

CSS elements in PatternSkin

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

Line: 17 to 17
 
  • 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.
Added:
>
>
  • Positional containers are referred by id, for instance #patternLeftBar.
 

Namespaces

Line: 36 to 37
 
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
Changed:
<
<
  • .patternPlainPage (view.plain.pattern.tmpl)
>
>
  • .patternPlainPage (viewplain.pattern.tmpl)
 

Layout classes

Changed:
<
<
  • Main layout elements
    • #patternScreen - holder of patternPageShadow and patternBottomBar
    • #patternPageShadow - shadow border around patternPage; default not used
>
>
 
    • #patternPage - html content container
Changed:
<
<
    • #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
>
>
    • Left bar:
      • #patternWrapper
 
    • #patternLeftBar - left bar area
Changed:
<
<
    • .patternLeftBarContents - used for left menu
>
>
      • #patternLeftBarContents - used for left menu
    • #patternOuter - wrapper container
    • #patternFloatWrap - wrapper container
    • #patternMain - center area
    • #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
    • #patternTopBar - top bar area
    • #patternTopBarContents - header art / logo; contains topic WebTopBar
 
    • #patternBottomBar - bottom bar area
Changed:
<
<
    • .patternBottomBarContents - copyright
>
>
    • #patternBottomBarContents - copyright
 

Style classes

  • View
Changed:
<
<
    • .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)
>
>
    • .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
Line: 65 to 69
 
    • .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)
Changed:
<
<
    • .patternWebIndicator - not used
>
>
    • .patternWebIndicator - colored block at the top of the left bar to indicate the current web
 
    • .patternFormHolder - container around form to manage the size of form elements
    • .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar)
Deleted:
<
<
    • .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
Line: 79 to 79
 
    • .patternToolBarButtons - action buttons at top of page
    • .patternToolBarBottom - seperator
    • .patternSimpleLogo - logo used on 'simple' pages like the login screen
Changed:
<
<
    • .patternFormFieldVerticalForm - input field in vertically formatted form
>
>
    • .patternButton - tab button Edit, Attach, Printable at top of topic
    • .patternMetaMenu - search box, jump box, language selector
 
  • Edit
    • .patternSig - signature copy box
Line: 93 to 94
 
  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
Added:
>
>
    • .patternAttachForm
 
  • Rename (rename, move, delete)
    • patternRenameOptionsList - list of topics that can be updated
Line: 101 to 103
 
    • patternDiffOptions - row of revision options under "Compare revisions"

  • Search results
Changed:
<
<
    • .patternSearchResultsHeader
    • .patternSearchString
    • .patternSearchResults
    • .patternSearchResultCount
    • .patternSearchResultsBegin - for changes template with noheader="on"
    • .patternBookViewList

  • Print
    • .patternTopicFooter - revision and author info at bottom of printed topic
>
>
    • .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
    • .patternSearchResultsHeader - horizontal bar with the web color
    • .patternSearchResults - block of one result
    • .patternSearchResultCount - the number of results
    • .patternSearched - feedback on the string used to search
 
Deleted:
<
<
    • .patternFormSpacer - for layout purposes
    • .patternFormField
 
    • .patternFormButton
Changed:
<
<
    • .patternChangeLanguage - change language button
>
>
    • .patternChangeLanguage - change language button (deprecated)
 
Deleted:
<
<

Layout per template

View template

CSS layout in View template

  Related Topics: TWikiSkins, AdminDocumentationCategory

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.

Page contents:
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 22004-08-17 - PeterThoeny

Line: 1 to 1
 

Css elements in PatternSkin

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

Line: 158 to 158
  CSS layout in View template
Changed:
<
<		-- ArthurClemens - 08 Aug 2004
>
>		-- TWiki:Main.ArthurClemens - 08 Aug 2004
 
Changed:
<
<
META FILEATTACHMENT attr="" 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="48981" user="ArthurClemens" version="1.1"

Revision 12004-08-16 - ArthurClemens

Line: 1 to 1
Added:
>
>

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

META FILEATTACHMENT attr="" 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"
View topic | History: r8 < r7 < r6 < r5 | More topic actions...
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCss.