Changes for page CSS Files

Last modified by Lucas Charpentier (Sereza7) on 2024/02/21

<
From version < 2.1 >
edited by Manuel Smeria
on 2013/01/17
To version < 2.2 >
edited by Manuel Smeria
on 2013/01/17
>
Change comment: minor fixes

Summary

Details

Page properties
Content
... ... @@ -1,14 +1,16 @@
1 -= CSS Files =
1 +{{box cssClass="floatinginfobox" title="**Contents**"}}
2 +{{toc/}}
3 +{{/box}}
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.
5 +This page helps you 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 -== Core files ==
7 += Core files =
6 6  
7 -=== style.css ===
9 +== style.css ==
8 8  
9 -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 :
11 +This 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 this:
10 10  
11 -{{code}}
13 +{{code language="css"}}
12 12  @import "classes.css";
13 13  @import "colorsblack.css";
14 14  @import "elements.css";
... ... @@ -17,13 +17,11 @@
17 17  ...
18 18  {{/code}}
19 19  
20 -\
22 +== elements.css ==
21 21  
22 -=== elements.css ===
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 this:
23 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}}
26 +{{code language="css"}}
27 27  body {
28 28   margin: 0;
29 29   padding: 0em;
... ... @@ -45,13 +45,11 @@
45 45  ...
46 46  {{/code}}
47 47  
48 -\
48 +== classes.css ==
49 49  
50 -=== classes.css ===
50 +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 this:
51 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}}
52 +{{code language="css"}}
55 55  .xwikisep, .xwikisep2 {
56 56   display: none;
57 57  }
... ... @@ -64,13 +64,11 @@
64 64  ...
65 65  {{/code}}
66 66  
67 -\
65 +== screenlayout.css ==
68 68  
69 -=== screenlayout.css ===
70 -
71 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 72  
73 -{{code}}
69 +{{code language="css"}}
74 74  body#body{
75 75   width: 100%;
76 76   padding: 0;
... ... @@ -87,13 +87,11 @@
87 87  ...
88 88  {{/code}}
89 89  
90 -\
86 +== presentation.css ==
91 91  
92 -=== presentation.css ===
88 +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 author displayed, etc.).
93 93  
94 -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.).
95 -
96 -{{code}}
90 +{{code language="css"}}
97 97  .box,
98 98  .main-content {
99 99   margin: 0.5em;
... ... @@ -101,13 +101,11 @@
101 101  ...
102 102  {{/code}}
103 103  
104 -\
98 +== colors*.css ==
105 105  
106 -=== colors*.css ===
100 +This 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.
107 107  
108 -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.
109 -
110 -{{code}}
102 +{{code language="css"}}
111 111  .heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 {
112 112   color: #369;
113 113  }
... ... @@ -118,60 +118,58 @@
118 118  ...
119 119  {{/code}}
120 120  
121 -\
113 += Special purpose files =
122 122  
123 -== Special purpose files ==
115 +== rss.css ==
124 124  
125 -=== rss.css ===
117 +A few rules to format how the profile rss is displayed.
126 126  
127 -A few rules to format how profile rss is displayed. \
119 +== microformats.css ==
128 128  
129 -=== microformats.css ===
121 +Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...).
130 130  
131 -Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...). \
123 +== chwSkin.css ==
132 132  
133 -=== chwSkin.css ===
125 +Formatting for the Chart Wizard.
134 134  
135 -Formatting for the Chart Wizard. \
127 +== tdwSkin.css ==
136 136  
137 -=== tdwSkin.css ===
129 +Formatting the Table Datasource Wizard (part of Chart Wizard).
138 138  
139 -Formatting of the Table Datasource Wizard (part of Chart Wizard). \
131 +== print.css ==
140 140  
141 -=== print.css ===
133 +Formatting for the @media print.
142 142  
143 -Formatting for the @media print. \
135 += Deprecated (soon to be removed) =
144 144  
145 -== Deprecated (soon to be removed) ==
137 +== wiki.css ==
146 146  
147 -=== wiki.css ===
139 +It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1.
148 148  
149 -It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1. \
141 +== xwiki.css ==
150 150  
151 -=== xwiki.css ===
143 +It was one of the few files holding css (stage 1).
152 152  
153 -It was one of the few files holding css (stage 1). \
145 +== ie.css ==
154 154  
155 -=== ie.css ===
147 +Some old hacks to make the default skin work in IE too.
156 156  
157 -Some old hacks to make the default skin work in IE too. \
149 +== style1/2/3.css ==
158 158  
159 -=== styel1/2/3.css ===
151 +Variants of the 'default' skin, with green, pink and yellow colors.
160 160  
161 -Variants of the 'default' skin, with green, pink and yellow colors. \
153 +== temp.css ==
162 162  
163 -=== temp.css ===
155 +Used for some tests.
164 164  
165 -Used for some tests. \
157 += Possibly usable files =
166 166  
167 -== Possibly usable files ==
168 -
169 169  //if somebody makes the skin wizard//
170 170  
171 -=== customlayout.css ===
161 +== customlayout.css ==
172 172  
173 -A dynamic version of screenlayout.css, using properties defined in a skin object. Should be parsed by velocity. \
163 +A dynamic version of ##screenlayout.css## using properties defined in a skin object. Should be parsed by velocity.
174 174  
175 -=== customcolors.css ===
165 +== customcolors.css ==
176 176  
177 -Same, but for colors. \
167 +Same, but for colors.

Get Connected