Wiki source code of CSS Files

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

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

Get Connected