%META:TOPICINFO{author="PeterThoeny" date="1092718032" format="1.0" version="1.2"}%
---+!! Css elements in !PatternSkin

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

%TOC{title="Page contents:"}%

The !PatternSkin stylesheet is divided in two files:
	* [[%PUBURL%/%TWIKIWEB%/PatternSkin/layout.css][layout.css]]: positioning of block elements on the page
	* [[%PUBURL%/%TWIKIWEB%/PatternSkin/style.css][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": =&lt;body class="twikiViewPage"&gt;=. 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 =&lt;body class="twikiNoViewPage twikiEditPage"&gt;=.

---+++ 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 %<nop>WEBBGCOLOR%
	* .twikiLeftBarContents - used for left menu (a bullet list) 
	* .twikiLeftBarPersonal - block of personal links (included topic %<nop>MAINWEB%.%<nop>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 (%<nop>TOC%)
	* .twikiTocTitle - title of TOC (%<nop>TOC{title="Contents:"}%)
	* .twikiTopicInfo - revision (%<nop>REVINFO%) and moved (%<nop>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 TWiki.TablePlugin)
		* .twikiSortedAscendingCol - sortable table column header that is sorted ascending (uses TWiki.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 %<nop>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

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

-- TWiki:Main.ArthurClemens - 08 Aug 2004

%META:FILEATTACHMENT{name="CSS_element_layout_view.pattern.tmpl.png" attr="h" comment="" date="1092634624" path="CSS_element_layout_view.pattern.tmpl.png" size="48981" user="ArthurClemens" version="1.1"}%
