122 lines
6.5 KiB
Plaintext
122 lines
6.5 KiB
Plaintext
%META:TOPICINFO{author="TWikiContributor" date="1141775863" format="1.1" version="6"}%
|
|
---+!! CSS elements in !PatternSkin
|
|
|
|
This page is a reference for all CSS classes used in PatternSkin.
|
|
|
|
%TOC{title="Page contents:"}%
|
|
|
|
!PatternSkin uses 4 stylesheets:
|
|
* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page
|
|
* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/style.css][style.css]]: margins, paddings, borders, font sizes
|
|
* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/colors.css][colors.css]]: text colors, background colors, border colors
|
|
* [[%PUBURLPATH%/%TWIKIWEB%/PatternSkin/print.css][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
|
|
* #patternTopBarContents - header art / logo; contains topic %TWIKIWEB%.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 %TWIKIWEB%.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 %<nop>MAINWEB%.%<nop>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
|
|
|
|
* %TWIKIWEB%.WebLeftBarSearch
|
|
* .patternFormButton
|
|
* .patternChangeLanguage - change language button (deprecated)
|
|
|
|
|
|
__Related Topics:__ TWikiSkins, AdminDocumentationCategory
|
|
|
|
|
|
%META:FILEATTACHMENT{name="CSS_element_layout_view.pattern.tmpl.png" attr="h" comment="" date="1092634624" path="CSS_element_layout_view.pattern.tmpl.png" size="37359" user="TWikiContributor" version="1.1"}%
|