# CSS elements in PatternSkin This page is a reference for all CSS classes used in [[PatternSkin]].
Page contents:
PatternSkin uses 4 stylesheets: - [layout.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/layout.css): positioning of block elements on the page - [style.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/style.css): margins, paddings, borders, font sizes - [colors.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/colors.css): text colors, background colors, border colors - [print.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/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": ``. 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 ``. ### 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 - .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 - .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" - .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]]