← Back to branch summary

~kosova/+junk/tuxfamily-twiki

« back to all changes in this revision

Viewing changes to foswiki/data/System/PatternSkinCss.txt

  • Committer: James Michael DuPont
  • Date: 2009-07-18 19:58:49 UTC
  • Revision ID: jamesmikedupont@gmail.com-20090718195849-vgbmaht2ys791uo2
added foswiki

Show diffs side-by-side

added added

removed removed

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