%META:TOPICINFO{author="TWikiContributor" date="1111929255" format="1.0" version="3"}%
---+!! 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.

---++ 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": =&lt;body class="patternViewPage"&gt;=. 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 =&lt;body class="patternNoViewPage patternEditPage"&gt;=.

---+++ Page type classes

	* .patternViewPage
	* .patternViewPage .patternPrintPage
	* .patternNoViewPage
	* .patternNoViewPage .patternEditPage
	* .patternNoViewPage .patternAttachPage
	* .patternNoViewPage .patternChangeFormPage
	* .patternNoViewPage .patternDiffPage
	* .patternNoViewPage .patternRenamePage
	* .patternSearchResultsPage
	* .patternPlainPage (view.plain.pattern.tmpl)

---++ Layout classes

	* 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 %TWIKIWEB%.WebTopBar
		* #patternLeftBar - left bar area
		* .patternLeftBarContents - used for left menu
		* #patternBottomBar - bottom bar area
		* .patternBottomBarContents - copyright

---++ Style classes

	* 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 %TWIKIWEB%.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 %<nop>MAINWEB%.%<nop>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

	* %TWIKIWEB%.WebLeftBarSearch
		* .patternFormSpacer - for layout purposes
		* .patternFormField
		* .patternFormButton
		* .patternChangeLanguage - change language button

---++ Layout per template

---+++ View template

<img src="%ATTACHURLPATH%/CSS_element_layout_view.pattern.tmpl.png" alt="CSS layout in View template" style="border:1px solid #ddd;" width="560" height="713"  />

__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"}%
