buildrelease
[openafs-wiki.git] / TWiki / PatternSkinCss.mdwn
1 # <a name="CSS elements in _PatternSkin"></a><a name=" CSS elements in _PatternSkin"></a> CSS elements in PatternSkin
2
3 This page is a reference for all CSS classes used in [[PatternSkin]].
4
5 <div><span>Page contents:</span><ul>
6     <li><a href="#Naming conventions"> Naming conventions</a></li>
7     <li><a href="#Namespaces"> Namespaces</a><ul>
8         <li><a href="#Page type classes"> Page type classes</a></li>
9       </ul>
10     </li>
11     <li><a href="#Layout classes"> Layout classes</a></li>
12     <li><a href="#Style classes"> Style classes</a></li>
13   </ul>
14 </div>
15
16 PatternSkin uses 4 stylesheets:
17
18 - [layout.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/layout.css): positioning of block elements on the page
19 - [style.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/style.css): margins, paddings, borders, font sizes
20 - [colors.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/colors.css): text colors, background colors, border colors
21 - [print.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/print.css): optimalizations for printed page
22
23 If you want to learn how to create your own look or skin based on PatternSkin, read further in [[PatternSkin]].
24
25 ## <a name="Naming conventions"></a> Naming conventions
26
27 - All PatternSkin specific classes have the prefix `pattern`: patternEditPage, patternTopicAction, etcetera.
28 - TWiki specific classes (emitted by the TWiki engine) have the prefix `twiki`: twikiButton, twikiToc, etcetera. See for a complete list [[TWikiCss]].
29 - Positional containers are referred by id, for instance `#patternLeftBar`.
30
31 ## <a name="Namespaces"></a> Namespaces
32
33 PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag.
34
35 - The body tag in view.pattern.tmpl for instance has the class name "patternViewPage": `<body >`. All CSS elements specific to the view template thus can be defined as `.patternViewPage .someClassName`.
36 - 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 >`.
37
38 ### <a name="Page type classes"></a> Page type classes
39
40 - .patternViewPage
41 - .patternViewPage .patternPrintPage
42 - .patternNoViewPage
43 - .patternNoViewPage .patternEditPage
44 - .patternNoViewPage .patternAttachPage
45 - .patternNoViewPage .patternChangeFormPage
46 - .patternNoViewPage .patternDiffPage
47 - .patternNoViewPage .patternRenamePage
48 - .patternSearchResultsPage
49 - .patternPlainPage (`viewplain.pattern.tmpl`)
50
51 ## <a name="Layout classes"></a> Layout classes
52
53 - Main layout elements (in order of appearance in `body.pattern.tmpl`)
54   - #patternScreen - outer container, used when centering the page (see [[PatternSkinCssCookbookCenterPage]])
55   - #patternPageShadow - shadow border around patternPage; default not used (see [[PatternSkinCssCookbookCenterPageBorder]])
56   - #patternPage - html content container
57   - Left bar:
58     - #patternWrapper
59     - #patternLeftBar - left bar area
60     - #patternLeftBarContents - used for left menu
61   - #patternOuter - wrapper container
62   - #patternFloatWrap - wrapper container
63   - #patternMain - center area
64   - #patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
65   - #patternTopBar - top bar area
66   - #patternTopBarContents - header art / logo; contains topic [[WebTopBar]]
67   - #patternBottomBar - bottom bar area
68   - #patternBottomBarContents - copyright
69
70 ## <a name="Style classes"></a> Style classes
71
72 - View
73   - .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)
74   - .patternTopBarLogo - logo position in patternTopBar (topic [[WebTopBar]])
75   - .patternTopBarOverlay - striped white image background
76   - .patternTopic - TWiki topic text
77   - .patternTop - area at top of topic text, with patternHomePath, revision and action buttons
78   - .patternTopicAction - container for .patternActionButtons
79   - .patternActionButtons - action buttons at bottom of page
80   - .patternMoved - topic moved info (only visible when the topic has changed name or web)
81   - .patternWebIndicator - colored block at the top of the left bar to indicate the current web
82   - .patternFormHolder - container around form to manage the size of form elements
83   - .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar)
84   - .patternHomePath - breadcrumb at top
85   - .patternHomePathTitle - "You are here" text
86   - .patternRevInfo - revision info and author name
87   - .patternToolBar - holder for .patternToolBarButtons
88   - .patternToolBarButtons - action buttons at top of page
89   - .patternToolBarBottom - seperator
90   - .patternSimpleLogo - logo used on 'simple' pages like the login screen
91   - .patternButton - tab button Edit, Attach, Printable at top of topic
92   - .patternMetaMenu - search box, jump box, language selector
93
94 - Edit
95   - .patternSig - signature copy box
96   - .patternSaveOptions - holder for .patternSaveOptionsContents
97   - .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
98   - .patternAccessKeyInfo - info block with access key information
99
100 - Preview page
101   - .patternPreviewArea - container around preview of .patternTopic
102
103 - Attach page
104   - .patternPrevious - attachment table of previous versions
105   - .patternMoveAttachment - container for "Move or Delete attachment"
106   - .patternAttachForm
107
108 - Rename (rename, move, delete)
109   - patternRenameOptionsList - list of topics that can be updated
110
111 - More
112   - patternDiffOptions - row of revision options under "Compare revisions"
113
114 - Search results
115   - .patternSearchResults - container on rename pages (no longer used on actual search results 'view' pages)
116   - .patternSearchResultsHeader - horizontal bar with the web color
117   - .patternSearchResults - block of one result
118   - .patternSearchResultCount - the number of results
119   - .patternSearched - feedback on the string used to search
120
121 - [[WebLeftBarSearch]]
122   - .patternFormButton
123   - .patternChangeLanguage - change language button (deprecated)
124
125 **_Related Topics:_** [[TWikiSkins]], [[AdminDocumentationCategory]]