<
From version < 1.4 >
edited by agoncal
on 2007/03/22
To version < 2.1 >
edited by Manuel Smeria
on 2013/01/17
>
Change comment: Document converted from syntax xwiki/1.0 to syntax xwiki/2.1

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.agoncal
1 +XWiki.ManuelSmeria
Syntax
... ... @@ -1,1 +1,1 @@
1 -XWiki 1.0
1 +XWiki 2.1
Content
... ... @@ -1,12 +1,14 @@
1 -1 CSS Files
1 += CSS Files =
2 2  
3 -This page helps you to understand the different css files used in XWiki, their purpose and content. XWiki skins use several css files to separe the different components of the skin: basic elements, layout, colors, etc. Check this [page>CSSLayout] to learn about XWiki layout.
3 +This page helps you to understand the different css files used in XWiki, their purpose and content. XWiki skins use several css files to separe the different components of the skin: basic elements, layout, colors, etc. Check this [[page>>CSSLayout]] to learn about XWiki layout.
4 4  
5 -1.1 Core files
5 +== Core files ==
6 6  
7 -1.1.1 style.css
7 +=== style.css ===
8 +
8 8  Is the top level style file. It's purpose is to include all the other files. It shouldn't have any other css in there. It looks like that :
9 -{code}
10 +
11 +{{code}}
10 10  @import "classes.css";
11 11  @import "colorsblack.css";
12 12  @import "elements.css";
... ... @@ -13,13 +13,15 @@
13 13  @import "presentation.css";
14 14  @import "screenlayout.css";
15 15  ...
16 -{code}
17 -\\
18 +{{/code}}
18 18  
19 -1.1.1 elements.css
20 -This stylesheet is intended to provide general design rules
21 -regarding the html elements. For example, default font size and family for headings, underline for links, etc. You can get a blank version of this stylesheet at this [address > http://www.webproducer.at/lab/elements.css]. It should not provide color properties. It looks like that :
22 -{code}
20 +\
21 +
22 +=== elements.css ===
23 +
24 +This stylesheet is intended to provide general design rules regarding the html elements. For example, default font size and family for headings, underline for links, etc. You can get a blank version of this stylesheet at this [[address>>http://www.webproducer.at/lab/elements.css]]. It should not provide color properties. It looks like that :
25 +
26 +{{code}}
23 23  body {
24 24   margin: 0;
25 25   padding: 0em;
... ... @@ -39,13 +39,15 @@
39 39   padding: 0 0 0 2.5em;
40 40  }
41 41  ...
42 -{code}
43 -\\
46 +{{/code}}
44 44  
45 -1.1.1 classes.css
46 -Like elements.css, but formats elements having a similar semantic meaning (after all, a class should have a semantic name, and not a
47 -random id). As examples, .underline, .hidden, .sep, wikicreatelink, or .heading-1-1. This should only contain general classes, for specific elements see presentation.css. It looks like that :
48 -{code}
48 +\
49 +
50 +=== classes.css ===
51 +
52 +Like elements.css, but formats elements having a similar semantic meaning (after all, a class should have a semantic name, and not a random id). As examples, .underline, .hidden, .sep, wikicreatelink, or .heading-1-1. This should only contain general classes, for specific elements see presentation.css. It looks like that :
53 +
54 +{{code}}
49 49  .xwikisep, .xwikisep2 {
50 50   display: none;
51 51  }
... ... @@ -56,13 +56,15 @@
56 56   display: none;
57 57  }
58 58  ...
59 -{code}
60 -\\
65 +{{/code}}
61 61  
62 -1.1.1 screenlayout.css
63 -The place where the general layout of the interface is specified. This file should contain rules regarding position, dimension and display mode for the major elements of the interface (header, side
64 -panels, menu, footer...).
65 -{code}
67 +\
68 +
69 +=== screenlayout.css ===
70 +
71 +The place where the general layout of the interface is specified. This file should contain rules regarding position, dimension and display mode for the major elements of the interface (header, side panels, menu, footer...).
72 +
73 +{{code}}
66 66  body#body{
67 67   width: 100%;
68 68   padding: 0;
... ... @@ -77,23 +77,29 @@
77 77   width: 438px;
78 78  }
79 79  ...
80 -{code}
81 -\\
88 +{{/code}}
82 82  
83 -1.1.1 presentation.css
90 +\
91 +
92 +=== presentation.css ===
93 +
84 84  Refinement of screenlayout.css. This is where borders, margins, paddings are set, font styling for objects not in elements.css or classes.css, along with some specific elements of the layout which are not affecting the general layout (where is the profile picture displayed, how is the comment auther displayed, etc.).
85 -{code}
95 +
96 +{{code}}
86 86  .box,
87 87  .main-content {
88 88   margin: 0.5em;
89 89  }
90 90  ...
91 -{code}
92 -\\
102 +{{/code}}
93 93  
94 -1.1.1 colors*.css
104 +\
105 +
106 +=== colors*.css ===
107 +
95 95  Is the place where the skin gets painted. Without this file, the skin should be black and white only (except the blue links). Font color, background, border color.
96 -{code}
109 +
110 +{{code}}
97 97  .heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 {
98 98   color: #369;
99 99  }
... ... @@ -102,58 +102,62 @@
102 102   background-color: #EEE;
103 103  }
104 104  ...
105 -{code}
106 -\\
119 +{{/code}}
107 107  
108 -1.1 Special purpose files
121 +\
109 109  
110 -1.1.1 rss.css
111 -A few rules to format how profile rss is displayed.
112 -\\
123 +== Special purpose files ==
113 113  
114 -1.1.1 microformats.css
115 -Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...).
116 -\\
125 +=== rss.css ===
117 117  
118 -1.1.1 chwSkin.css
119 -Formatting for the Chart Wizard.
120 -\\
127 +A few rules to format how profile rss is displayed. \
121 121  
122 -1.1.1 tdwSkin.css
123 -Formatting of the Table Datasource Wizard (part of Chart Wizard).
124 -\\
125 -1.1.1 print.css
126 -Formatting for the @media print.
127 -\\
129 +=== microformats.css ===
128 128  
129 -1.1 Deprecated (soon to be removed)
130 -1.1.1 wiki.css
131 -It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1.
132 -\\
131 +Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...). \
133 133  
134 -1.1.1 xwiki.css
135 -It was one of the few files holding css (stage 1).
136 -\\
133 +=== chwSkin.css ===
137 137  
138 -1.1.1 ie.css
139 -Some old hacks to make the default skin work in IE too.
140 -\\
135 +Formatting for the Chart Wizard. \
141 141  
142 -1.1.1 styel1/2/3.css
143 -Variants of the 'default' skin, with green, pink and yellow colors.
144 -\\
137 +=== tdwSkin.css ===
145 145  
146 -1.1.1 temp.css
147 -Used for some tests.
148 -\\
139 +Formatting of the Table Datasource Wizard (part of Chart Wizard). \
149 149  
150 -1.1 Possibly usable files
151 -~~if somebody makes the skin wizard~~
141 +=== print.css ===
152 152  
153 -1.1.1 customlayout.css
154 -A dynamic version of screenlayout.css, using properties defined in a skin object. Should be parsed by velocity.
155 -\\
143 +Formatting for the @media print. \
156 156  
157 -1.1.1 customcolors.css
158 -Same, but for colors.
159 -\\
145 +== Deprecated (soon to be removed) ==
146 +
147 +=== wiki.css ===
148 +
149 +It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1. \
150 +
151 +=== xwiki.css ===
152 +
153 +It was one of the few files holding css (stage 1). \
154 +
155 +=== ie.css ===
156 +
157 +Some old hacks to make the default skin work in IE too. \
158 +
159 +=== styel1/2/3.css ===
160 +
161 +Variants of the 'default' skin, with green, pink and yellow colors. \
162 +
163 +=== temp.css ===
164 +
165 +Used for some tests. \
166 +
167 +== Possibly usable files ==
168 +
169 +//if somebody makes the skin wizard//
170 +
171 +=== customlayout.css ===
172 +
173 +A dynamic version of screenlayout.css, using properties defined in a skin object. Should be parsed by velocity. \
174 +
175 +=== customcolors.css ===
176 +
177 +Same, but for colors. \

Get Connected