CSS Files (XWiki.org)

author	version	line-number	content
1	{{box cssClass="floatinginfobox" title="Contents"}}
2	{{toc/}}
3	{{/box}}
4
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>>platform:AdminGuide.CSSLayout]] to learn about the XWiki layout.
6
7	= Core files =
8
9	== style.css ==
10
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:
12
13	{{code language="css"}}
14	@import "classes.css";
15	@import "colorsblack.css";
16	@import "elements.css";
17	@import "presentation.css";
18	@import "screenlayout.css";
19	...
20	{{/code}}
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 this:
25
26	{{code language="css"}}
27	body {
28	margin: 0;
29	padding: 0em;
30	font-size: 90.01%;
31	line-height: 1.25em;
32	background: white;
33	color: black;
34	font-family: "Arial", "Lucida", "Trebuchet MS", "Luxi Sans", "Helvetica", sans-serif;
35	}
36	h1 {
37	font-size: 1.5em;
38	line-height: 1.33em;
39	margin: 0.89em 0;
40	}
41	ul {
42	margin: 1em 0;
43	padding: 0 0 0 2.5em;
44	}
45	...
46	{{/code}}
47
48	== classes.css ==
49
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
52	{{code language="css"}}
53	.xwikisep, .xwikisep2 {
54	display: none;
55	}
56	.clear, .clearfloats {
57	clear: both;
58	}
59	.none, .hidden {
60	display: none;
61	}
62	...
63	{{/code}}
64
65	== screenlayout.css ==
66
67	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...).
68
69	{{code language="css"}}
70	body#body{
71	width: 100%;
72	padding: 0;
73	margin: 0 ;
74	min-width: 760px;
75	}
76	.minwidth, .minwidthb, .minwidthc{
77	width: 720px;
78	height: 0px;
79	}
80	.minwidthc{
81	width: 438px;
82	}
83	...
84	{{/code}}
85
86	== presentation.css ==
87
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.).
89
90	{{code language="css"}}
91	.box,
92	.main-content {
93	margin: 0.5em;
94	}
95	...
96	{{/code}}
97
98	== colors*.css ==
99
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.
101
102	{{code language="css"}}
103	.heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 {
104	color: #369;
105	}
106	ul.xwikiintra{
107	border-bottom-color: #DDD;
108	background-color: #EEE;
109	}
110	...
111	{{/code}}
112
113	= Special purpose files =
114
115	== rss.css ==
116
117	A few rules to format how the profile rss is displayed.
118
119	== microformats.css ==
120
121	Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...).
122
123	== chwSkin.css ==
124
125	Formatting for the Chart Wizard.
126
127	== tdwSkin.css ==
128
129	Formatting the Table Datasource Wizard (part of Chart Wizard).
130
131	== print.css ==
132
133	Formatting for the @media print.
134
135	= Deprecated (soon to be removed) =
136
137	== wiki.css ==
138
139	It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1.
140
141	== xwiki.css ==
142
143	It was one of the few files holding css (stage 1).
144
145	== ie.css ==
146
147	Some old hacks to make the default skin work in IE too.
148
149	== style1/2/3.css ==
150
151	Variants of the 'default' skin, with green, pink and yellow colors.
152
153	== temp.css ==
154
155	Used for some tests.
156
157	= Possibly usable files =
158
159	//if somebody makes the skin wizard//
160
161	== customlayout.css ==
162
163	A dynamic version of ##screenlayout.css## using properties defined in a skin object. Should be parsed by velocity.
164
165	== customcolors.css ==
166
167	Same, but for colors.

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>>platform:AdminGuide.CSSLayout]] to learn about the XWiki layout.

6

= Core files =

== style.css ==

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:

12

13

14

@import "classes.css";

15

@import "colorsblack.css";

16

@import "elements.css";

17

@import "presentation.css";

18

@import "screenlayout.css";

...

== elements.css ==

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:

body {

margin: 0;

padding: 0em;

font-size: 90.01%;

line-height: 1.25em;

background: white;

color: black;

font-family: "Arial", "Lucida", "Trebuchet MS", "Luxi Sans", "Helvetica", sans-serif;

}

h1 {

font-size: 1.5em;

line-height: 1.33em;

margin: 0.89em 0;

}

ul {

margin: 1em 0;

padding: 0 0 0 2.5em;

}

...

== classes.css ==

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

52

53

.xwikisep, .xwikisep2 {

54

display: none;

55

}

56

.clear, .clearfloats {

clear: both;

}

.none, .hidden {

display: none;

}

...

== screenlayout.css ==

66

67

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...).

body#body{

width: 100%;

padding: 0;

margin: 0 ;

min-width: 760px;

}

.minwidth, .minwidthb, .minwidthc{

width: 720px;

height: 0px;

}

.minwidthc{

width: 438px;

}

...

== presentation.css ==

87

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.).

.box,

.main-content {

margin: 0.5em;

}

...

== colors*.css ==

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.

101

102

103

.heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 {

color: #369;

}

ul.xwikiintra{

border-bottom-color: #DDD;