Difference: PatternSkinCss (1 vs. 8)

Revision 82006-03-07 - TWikiContributor

 

CSS elements in PatternSkin

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

Page contents:

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
Changed:
<
<
>
>
 If you want to learn how to create your own look or skin based on PatternSkin, read further in PatternSkin.

Naming conventions

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

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

Page type classes

  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .patternPlainPage (viewplain.pattern.tmpl)

Layout classes

  • Main layout elements (in order of appearance in body.pattern.tmpl)
    • #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
    • #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
    • #patternPage - html content container
    • Left bar:
      • #patternWrapper
      • #patternLeftBar - left bar area
      • #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
    • #patternBottomBarContents - copyright

Style classes

  • 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)
    • .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
    • .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)
    • .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 %USERSWEB%.%USERNAME%LeftBar)
    • .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
    • .patternButton - tab button Edit, Attach, Printable at top of topic
    • .patternMetaMenu - search box, jump box, language selector

  • Edit
    • .patternSig - signature copy box
    • .patternSaveOptions - holder for .patternSaveOptionsContents
    • .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
    • .patternSaveHelp - info block with help on save options (access keys and potentially other info)

  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic

  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
    • .patternAttachForm

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

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

  • Search results
    • .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

Related Topics: TWikiSkins, AdminDocumentationCategory

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 72006-03-07 - TWikiContributor

 

CSS elements in PatternSkin

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

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.

Naming conventions

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

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

Page type classes

  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .patternPlainPage (viewplain.pattern.tmpl)

Layout classes

  • Main layout elements (in order of appearance in body.pattern.tmpl)
    • #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
    • #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
    • #patternPage - html content container
    • Left bar:
      • #patternWrapper
      • #patternLeftBar - left bar area
      • #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
Changed:
<
<
    • #patternTopBarContents - header art / logo; contains topic WebTopBar
>
>
    • #patternTopBarContents - header art / logo; contains topic WebTopBar
 
    • #patternBottomBar - bottom bar area
    • #patternBottomBarContents - copyright

Style classes

  • 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
    • .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)
    • .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
    • .patternToolBar - holder for .patternToolBarButtons
    • .patternToolBarButtons - action buttons at top of page
    • .patternToolBarBottom - seperator
    • .patternSimpleLogo - logo used on 'simple' pages like the login screen
    • .patternButton - tab button Edit, Attach, Printable at top of topic
    • .patternMetaMenu - search box, jump box, language selector

  • Edit
    • .patternSig - signature copy box
    • .patternSaveOptions - holder for .patternSaveOptionsContents
    • .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
    • .patternSaveHelp - info block with help on save options (access keys and potentially other info)

  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic

  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
    • .patternAttachForm

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

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

  • Search results
    • .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:
<
<
  • WebLeftBarSearch
    • .patternFormButton
    • .patternChangeLanguage - change language button (deprecated)

  Related Topics: TWikiSkins, AdminDocumentationCategory

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 62006-03-07 - TWikiContributor

 

CSS elements in PatternSkin

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

Page contents:

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

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

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 "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

  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .patternPlainPage (viewplain.pattern.tmpl)

Layout classes

  • Main layout elements (in order of appearance in body.pattern.tmpl)
    • #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
    • #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
    • #patternPage - html content container
    • Left bar:
      • #patternWrapper
      • #patternLeftBar - left bar area
      • #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
    • #patternBottomBarContents - copyright

Style classes

  • 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)
    • .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
    • .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)
    • .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)
    • .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
    • .patternButton - tab button Edit, Attach, Printable at top of topic
    • .patternMetaMenu - search box, jump box, language selector

  • Edit
    • .patternSig - signature copy box
    • .patternSaveOptions - holder for .patternSaveOptionsContents
    • .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
    • .patternSaveHelp - info block with help on save options (access keys and potentially other info)

  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic

  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
    • .patternAttachForm

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

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

  • Search results
    • .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

  • WebLeftBarSearch
    • .patternFormButton
    • .patternChangeLanguage - change language button (deprecated)

Related Topics: TWikiSkins, AdminDocumentationCategory

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 52006-03-07 - TWikiContributor

 

CSS elements in PatternSkin

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

Page contents:

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

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

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 "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">.

Page type classes

  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .patternPlainPage (viewplain.pattern.tmpl)

Layout classes

  • Main layout elements (in order of appearance in body.pattern.tmpl)
    • #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
    • #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
    • #patternPage - html content container
    • Left bar:
      • #patternWrapper
      • #patternLeftBar - left bar area
      • #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
    • #patternBottomBarContents - copyright

Style classes

  • 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)
    • .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
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)
    • .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)
    • .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
    • .patternButton - tab button Edit, Attach, Printable at top of topic
    • .patternMetaMenu - search box, jump box, language selector

  • Edit
    • .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

  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
    • .patternAttachForm

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

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

  • Search results
    • .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

  • WebLeftBarSearch
    • .patternFormButton
    • .patternChangeLanguage - change language button (deprecated)

Related Topics: TWikiSkins, AdminDocumentationCategory

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 42006-03-07 - TWikiContributor

 

CSS elements in PatternSkin

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

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.

Naming conventions

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

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

Page type classes

Changed:
<
<
  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .patternPlainPage (view.plain.pattern.tmpl)
>
>
  • .patternViewPage
  • .patternViewPage .patternPrintPage
  • .patternNoViewPage
  • .patternNoViewPage .patternEditPage
  • .patternNoViewPage .patternAttachPage
  • .patternNoViewPage .patternChangeFormPage
  • .patternNoViewPage .patternDiffPage
  • .patternNoViewPage .patternRenamePage
  • .patternSearchResultsPage
  • .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
    • #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
>
>
  • Main layout elements (in order of appearance in body.pattern.tmpl)
    • #patternScreen - outer container, used when centering the page (see PatternSkinCssCookbookCenterPage)
    • #patternPageShadow - shadow border around patternPage; default not used (see PatternSkinCssCookbookCenterPageBorder)
    • #patternPage - html content container
    • Left bar:
      • #patternWrapper
      • #patternLeftBar - left bar area
      • #patternLeftBarContents - used for left menu
    • #patternOuter - wrapper container
    • #patternFloatWrap - wrapper container
    • #patternMain - center area
    • #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
Added:
>
>
    • #patternTopBar - top bar area
    • #patternTopBarContents - header art / logo; contains topic WebTopBar
    • #patternBottomBar - bottom bar area
    • #patternBottomBarContents - copyright
 

Style classes

Changed:
<
<
  • 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
>
>
  • 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)
    • .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 - 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)
    • .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
    • .patternButton - tab button Edit, Attach, Printable at top of topic
    • .patternMetaMenu - search box, jump box, language selector
Deleted:
<
<
    • .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
 
Changed:
<
<
  • 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
>
>
  • 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
 
Changed:
<
<
  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic
>
>
  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic
 
Changed:
<
<
  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
>
>
  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
Added:
>
>
    • .patternAttachForm
 
Changed:
<
<
  • Rename (rename, move, delete)
    • patternRenameOptionsList - list of topics that can be updated
>
>
  • Rename (rename, move, delete)
    • patternRenameOptionsList - list of topics that can be updated
 
Changed:
<
<
  • More
    • patternDiffOptions - row of revision options under "Compare revisions"

  • Search results
    • .patternSearchResultsHeader
    • .patternSearchString
    • .patternSearchResults
    • .patternSearchResultCount
    • .patternSearchResultsBegin - for changes template with noheader="on"
>
>
  • More
    • patternDiffOptions - row of revision options under "Compare revisions"

  • Search results
    • .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:
<
<
    • .patternBookViewList
 
Changed:
<
<
  • Print
    • .patternTopicFooter - revision and author info at bottom of printed topic
>
>
Added:
>
>
    • .patternChangeLanguage - change language button (deprecated)

 
Deleted:
<
<
  • WebLeftBarSearch
    • .patternFormSpacer - for layout purposes
    • .patternFormField
    • .patternFormButton
    • .patternChangeLanguage - change language button

Layout per template

View template

CSS layout in View template

 Related Topics: TWikiSkins, AdminDocumentationCategory
Added:
>
>
 
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 32005-03-27 - TWikiContributor

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
Added:
>
>
  • 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.
Added:
>
>
  • 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
Added:
>
>
  • .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
>
>
  • 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
Added:
>
>
    • #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
 
Changed:
<
<
  • TWiki block elements
>
>

Style classes

Deleted:
<
<
    • .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
 
Changed:
<
<
  • Layout adjustments on specific pages
    • .twikiNoViewPage .twikiMain
    • .twikiPrintPage .twikiMain
    • .twikiPrintPage .twikiBottomBar
>
>
  • 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)
Added:
>
>
    • .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
 
Changed:
<
<

Style classes

  • .twikiMiddleContainer - holder for twikiMain and twikiLeftbar
  • .twikiMain - holder of twikiToolbar, twikiTopic, twikiAttachments, etc)
  • .twikiTopBar - top bar area
>
>
  • 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
Deleted:
<
<
  • .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)
 
Changed:
<
<
  • Table class names (emitted from TablePlugin)
    • .twikiSortedAscendingCol - sortable table column header that is sorted ascending (uses TablePlugin)
>
>
  • Preview page
    • .patternPreviewArea - container around preview of .patternTopic
Deleted:
<
<
    • .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
 
Changed:
<
<
  • Form elements
    • .twikiCheckbox - styled checkbox
    • .twikiRadioButton
>
>
  • Attach page
    • .patternPrevious - attachment table of previous versions
    • .patternMoveAttachment - container for "Move or Delete attachment"
Deleted:
<
<
    • .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
 
Changed:
<
<
  • Preview
    • .twikiPreviewPage .twikiPreviewArea - holder of previewed topic text
>
>
  • Rename (rename, move, delete)
    • patternRenameOptionsList - list of topics that can be updated
Deleted:
<
<
  • Attach
    • .twikiAttachPage .twikiNotes - holder of help text
    • .twikiAttachPage .twikiPrevious - attachment table of previous versions
 
Changed:
<
<
  • 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
>
>
  • More
    • patternDiffOptions - row of revision options under "Compare revisions"

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

CSS tags emitted from TWiki core code

>
>
  • Print
Added:
>
>
    • .patternTopicFooter - revision and author info at bottom of printed topic
 
Changed:
<
<		See: TWikiCss
>
>
Added:
>
>
    • .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

 

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

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

 

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.