<
From version < 1.2 >
edited by agoncal
on 2007/03/22
To version < 1.3 >
edited by agoncal
on 2007/03/22
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,34 +1,108 @@
1 1  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 {style:type=span|class=st}skin{style}: basic elements, layout, colors, etc.
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.
4 4  
5 5  1.1 Core files
6 6  
7 7  1.1.1 style.css
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.
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 [email protected] "classes.css";
11 [email protected] "colorsblack.css";
12 [email protected] "elements.css";
13 [email protected] "presentation.css";
14 [email protected] "screenlayout.css";
15 +...
16 +{code}
9 9  \\
10 10  
11 11  1.1.1 elements.css
12 12  This stylesheet is intended to provide general design rules
13 -regarding the html elements. For example, default font size and family for headings, underline for links, etc. It should not provide color properties.
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}
23 +body {
24 + margin: 0;
25 + padding: 0em;
26 + font-size: 90.01%;
27 + line-height: 1.25em;
28 + background: white;
29 + color: black;
30 + font-family: "Arial", "Lucida", "Trebuchet MS", "Luxi Sans", "Helvetica", sans-serif;
31 +}
32 +h1 {
33 + font-size: 1.5em;
34 + line-height: 1.33em;
35 + margin: 0.89em 0;
36 +}
37 +ul {
38 + margin: 1em 0;
39 + padding: 0 0 0 2.5em;
40 +}
41 +...
42 +{code}
14 14  \\
15 15  
16 16  1.1.1 classes.css
17 17  Like elements.css, but formats elements having a similar semantic meaning (after all, a class should have a semantic name, and not a
18 -random id). As examples, .underline, .hidden, .sep, wikicreatelink, or .heading-1-1. This should only contain general classes, for specific elements see presentation.css
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}
49 +.xwikisep, .xwikisep2 {
50 + display: none;
51 +}
52 +.clear, .clearfloats {
53 + clear: both;
54 +}
55 +.none, .hidden {
56 + display: none;
57 +}
58 +...
59 +{code}
19 19  \\
20 20  
21 21  1.1.1 screenlayout.css
22 22  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
23 23  panels, menu, footer...).
65 +{code}
66 +body#body{
67 + width: 100%;
68 + padding: 0;
69 + margin: 0 ;
70 + min-width: 760px;
71 +}
72 +.minwidth, .minwidthb, .minwidthc{
73 + width: 720px;
74 + height: 0px;
75 +}
76 +.minwidthc{
77 + width: 438px;
78 +}
79 +...
80 +{code}
24 24  \\
25 25  
26 26  1.1.1 presentation.css
27 27  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}
86 +.box,
87 +.main-content {
88 + margin: 0.5em;
89 +}
90 +...
91 +{code}
28 28  \\
29 29  
30 30  1.1.1 colors*.css
31 31  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}
97 +.heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 {
98 + color: #369;
99 +}
100 +ul.xwikiintra{
101 + border-bottom-color: #DDD;
102 + background-color: #EEE;
103 +}
104 +...
105 +{code}
32 32  \\
33 33  
34 34  1.1 Special purpose files

Get Connected