255a57228f5fea5a768e3407521726f51bbc0c75
[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     <li><a href="#Layout per template"> Layout per template</a><ul>
14         <li><a href="#View template"> View template</a></li>
15       </ul>
16     </li>
17   </ul>
18 </div>
19
20 PatternSkin uses 4 stylesheets:
21
22 - [layout.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/layout.css): positioning of block elements on the page
23 - [style.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/style.css): margins, paddings, borders, font sizes
24 - [colors.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/colors.css): text colors, background colors, border colors
25 - [print.css](http://www.dementia.org/twiki//view/TWiki/PatternSkin/print.css): optimalizations for printed page
26
27 If you want to learn how to create your own look or skin based on PatternSkin, read further in [[PatternSkin]].
28
29 ## <a name="Naming conventions"></a> Naming conventions
30
31 - All PatternSkin specific classes have the prefix `pattern`: patternEditPage, patternTopicAction, etcetera.
32 - TWiki specific classes (emitted by the TWiki engine) have the prefix `twiki`: twikiButton, twikiToc, etcetera. See for a complete list [[TWikiCss]].
33
34 ## <a name="Namespaces"></a> Namespaces
35
36 PatternSkin uses namespaces for templates, by adding one (sometimes two - multiple) class names to the template's body tag.
37
38 - 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`.
39 - 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 >`.
40
41 ### <a name="Page type classes"></a> Page type classes
42
43 - .patternViewPage
44 - .patternViewPage .patternPrintPage
45 - .patternNoViewPage
46 - .patternNoViewPage .patternEditPage
47 - .patternNoViewPage .patternAttachPage
48 - .patternNoViewPage .patternChangeFormPage
49 - .patternNoViewPage .patternDiffPage
50 - .patternNoViewPage .patternRenamePage
51 - .patternSearchResultsPage
52 - .patternPlainPage (view.plain.pattern.tmpl)
53
54 ## <a name="Layout classes"></a> Layout classes
55
56 - Main layout elements
57   - #patternScreen - holder of patternPageShadow and patternBottomBar
58   - #patternPageShadow - shadow border around patternPage; default not used
59   - #patternPage - html content container
60   - #patternColumnWrapper - holder for patternMain and patternLeftbar
61   - #patternMain - holder of patternMainContents
62   - #patternTopBar - top bar area
63   - .patternTopBarContents - table (for easy vertical alignment) for header art / logo; contains topic [[WebTopBar]]
64   - #patternLeftBar - left bar area
65   - .patternLeftBarContents - used for left menu
66   - #patternBottomBar - bottom bar area
67   - .patternBottomBarContents - copyright
68
69 ## <a name="Style classes"></a> Style classes
70
71 - View
72   - .patternMainContents - holder of patternTop, patternTopic, twikiForm, twikiAttachments, etc.
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 - not used
82   - .patternFormHolder - container around form to manage the size of form elements
83   - .patternLeftBarPersonal - block of personal links (included topic %MAINWEB%.%USERNAME%LeftBar)
84   - .patternVersatileTable - table used in various places (Attach, Rename, Changeform)
85     - .patternVersatileTable .patternMainCol - table column that is the most important part of the table
86     - .patternVersatileTable .patternOldCol - table column with 'old' appearance, for instance the old attachment or the old topic name
87     - .patternVersatileTable .patternHelpCol - table column with help texts
88   - .patternHomePath - breadcrumb at top
89   - .patternHomePathTitle - "You are here" text
90   - .patternRevInfo - revision info and author name
91   - .patternToolBar - holder for .patternToolBarButtons
92   - .patternToolBarButtons - action buttons at top of page
93   - .patternToolBarBottom - seperator
94   - .patternSimpleLogo - logo used on 'simple' pages like the login screen
95   - .patternFormFieldVerticalForm - input field in vertically formatted form
96
97 - Edit
98   - .patternSig - signature copy box
99   - .patternSaveOptions - holder for .patternSaveOptionsContents
100   - .patternSaveOptionsContents - checkboxes that change the state of a topic save; for instance "Force revision" checkbox
101   - .patternAccessKeyInfo - info block with access key information
102
103 - Preview page
104   - .patternPreviewArea - container around preview of .patternTopic
105
106 - Attach page
107   - .patternPrevious - attachment table of previous versions
108   - .patternMoveAttachment - container for "Move or Delete attachment"
109
110 - Rename (rename, move, delete)
111   - patternRenameOptionsList - list of topics that can be updated
112
113 - More
114   - patternDiffOptions - row of revision options under "Compare revisions"
115
116 - Search results
117   - .patternSearchResultsHeader
118   - .patternSearchString
119   - .patternSearchResults
120   - .patternSearchResultCount
121   - .patternSearchResultsBegin - for changes template with noheader="on"
122   - .patternBookViewList
123
124 - Print
125   - .patternTopicFooter - revision and author info at bottom of printed topic
126
127 - [[WebLeftBarSearch]]
128   - .patternFormSpacer - for layout purposes
129   - .patternFormField
130   - .patternFormButton
131   - .patternChangeLanguage - change language button
132
133 ## <a name="Layout per template"></a> Layout per template
134
135 ### <a name="View template"></a> View template
136
137 <img src="http://www.dementia.org/twiki//view/CSS_element_layout_view.pattern.tmpl.png" width="586" height="746" alt="CSS layout in View template" style="border: 1px solid #ddd" />
138
139 **_Related Topics:_** [[TWikiSkins]], [[AdminDocumentationCategory]]