Hide last authors
Manuel Smeria 2.2 1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
agoncal 1.1 4
Vincent Massol 3.3 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.
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
Manuel Smeria 2.2 22 == elements.css ==
Manuel Smeria 2.1 23
Manuel Smeria 2.2 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:
Manuel Smeria 2.1 25
Manuel Smeria 2.2 26 {{code language="css"}}
agoncal 1.3 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 ...
Manuel Smeria 2.1 46 {{/code}}
agoncal 1.1 47
Manuel Smeria 2.2 48 == classes.css ==
Manuel Smeria 2.1 49
Manuel Smeria 2.2 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:
Manuel Smeria 2.1 51
Manuel Smeria 2.2 52 {{code language="css"}}
agoncal 1.3 53 .xwikisep, .xwikisep2 {
54 display: none;
55 }
56 .clear, .clearfloats {
57 clear: both;
58 }
59 .none, .hidden {
60 display: none;
61 }
62 ...
Manuel Smeria 2.1 63 {{/code}}
agoncal 1.1 64
Manuel Smeria 2.2 65 == screenlayout.css ==
Manuel Smeria 2.1 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
Manuel Smeria 2.2 69 {{code language="css"}}
agoncal 1.3 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 ...
Manuel Smeria 2.1 84 {{/code}}
agoncal 1.2 85
Manuel Smeria 2.2 86 == presentation.css ==
Manuel Smeria 2.1 87
Manuel Smeria 2.2 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.).
Manuel Smeria 2.1 89
Manuel Smeria 2.2 90 {{code language="css"}}
agoncal 1.3 91 .box,
92 .main-content {
93 margin: 0.5em;
94 }
95 ...
Manuel Smeria 2.1 96 {{/code}}
agoncal 1.2 97
Manuel Smeria 2.2 98 == colors*.css ==
Manuel Smeria 2.1 99
Manuel Smeria 2.2 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.
Manuel Smeria 2.1 101
Manuel Smeria 2.2 102 {{code language="css"}}
agoncal 1.3 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 ...
Manuel Smeria 2.1 111 {{/code}}
agoncal 1.2 112
Manuel Smeria 2.2 113 = Special purpose files =
agoncal 1.2 114
Manuel Smeria 2.2 115 == rss.css ==
agoncal 1.1 116
Manuel Smeria 2.2 117 A few rules to format how the profile rss is displayed.
agoncal 1.2 118
Manuel Smeria 2.2 119 == microformats.css ==
agoncal 1.2 120
Manuel Smeria 2.2 121 Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...).
agoncal 1.2 122
Manuel Smeria 2.2 123 == chwSkin.css ==
agoncal 1.2 124
Manuel Smeria 2.2 125 Formatting for the Chart Wizard.
agoncal 1.2 126
Manuel Smeria 2.2 127 == tdwSkin.css ==
agoncal 1.2 128
Manuel Smeria 2.2 129 Formatting the Table Datasource Wizard (part of Chart Wizard).
agoncal 1.2 130
Manuel Smeria 2.2 131 == print.css ==
agoncal 1.2 132
Manuel Smeria 2.2 133 Formatting for the @media print.
agoncal 1.2 134
Manuel Smeria 2.2 135 = Deprecated (soon to be removed) =
agoncal 1.2 136
Manuel Smeria 2.2 137 == wiki.css ==
Manuel Smeria 2.1 138
Manuel Smeria 2.2 139 It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1.
Manuel Smeria 2.1 140
Manuel Smeria 2.2 141 == xwiki.css ==
Manuel Smeria 2.1 142
Manuel Smeria 2.2 143 It was one of the few files holding css (stage 1).
Manuel Smeria 2.1 144
Manuel Smeria 2.2 145 == ie.css ==
Manuel Smeria 2.1 146
Manuel Smeria 2.2 147 Some old hacks to make the default skin work in IE too.
Manuel Smeria 2.1 148
Manuel Smeria 2.2 149 == style1/2/3.css ==
Manuel Smeria 2.1 150
Manuel Smeria 2.2 151 Variants of the 'default' skin, with green, pink and yellow colors.
Manuel Smeria 2.1 152
Manuel Smeria 2.2 153 == temp.css ==
Manuel Smeria 2.1 154
Manuel Smeria 2.2 155 Used for some tests.
Manuel Smeria 2.1 156
Manuel Smeria 2.2 157 = Possibly usable files =
Manuel Smeria 2.1 158
159 //if somebody makes the skin wizard//
160
Manuel Smeria 2.2 161 == customlayout.css ==
Manuel Smeria 2.1 162
Manuel Smeria 2.2 163 A dynamic version of ##screenlayout.css## using properties defined in a skin object. Should be parsed by velocity.
Manuel Smeria 2.1 164
Manuel Smeria 2.2 165 == customcolors.css ==
Manuel Smeria 2.1 166
Manuel Smeria 2.2 167 Same, but for colors.

Get Connected