CSS Files

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

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 to learn about the XWiki layout.

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:

@import "classes.css";
@import "colorsblack.css";
@import "elements.css";
@import "presentation.css";
@import "screenlayout.css";
...

XWiki 16.0.0+  This file is now populated by style.less.vm, which contains in its template all the imports.

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:

.xwikisep, .xwikisep2 {
  display: none;
}
.clear, .clearfloats {
 clear: both;
}
.none, .hidden {
 display: none;
}
...

screenlayout.css

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

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.

.heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 {
 color: #369;
}
ul.xwikiintra{
 border-bottom-color: #DDD;
 background-color: #EEE;
}
...

elements.css

XWiki 16.0.0+ 


  This file is not available in xwiki-platform anymore, its content has been moved to a few different files:

  • type.less for typographic styles, such as title size and generic text mixins.
  • Color Themes for admin defined styles, such as text color and font-family.

XWiki <16.0.0 

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. 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;
}
...

Special purpose files

rss.css

A few rules to format how the profile rss is displayed.

microformats.css

Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...).

chwSkin.css

Formatting for the Chart Wizard.

tdwSkin.css

Formatting the Table Datasource Wizard (part of Chart Wizard).

print.css

Formatting for the @media print.

Deprecated (soon to be removed)

wiki.css

It was supposed to format wiki generated syntax, like .wikilink and .heading-1-1.

xwiki.css

It was one of the few files holding css (stage 1).

ie.css

Some old hacks to make the default skin work in IE too.

style1/2/3.css

Variants of the 'default' skin, with green, pink and yellow colors.

temp.css

Used for some tests.

Possibly usable files

if somebody makes the skin wizard

customlayout.css

A dynamic version of screenlayout.css using properties defined in a skin object. Should be parsed by velocity.

customcolors.css

Same, but for colors.

Tags:
Created by Ecaterina Moraru (Valica) on 2017/09/06
   

Get Connected