Wiki source code of CSS Files
Last modified by Lucas Charpentier (Sereza7) on 2024/11/18
Show last authors
| 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>>xwiki:Documentation.DevGuide.Tutorials.Skins.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 | {{version since="16.0.0"}} This file is now populated by style.less.vm, which contains in its template all the imports.{{/version}} | ||
| 23 | |||
| 24 | = Special purpose files = | ||
| 25 | |||
| 26 | == microformats.css == | ||
| 27 | |||
| 28 | Stylesheet to format the different microformats-enabled pages (user profile, blog, calendar...). | ||
| 29 | |||
| 30 | == print.css == | ||
| 31 | |||
| 32 | Formatting for the @media print. | ||
| 33 | |||
| 34 | = Legacy files = | ||
| 35 | |||
| 36 | Those files used to be important CSS files used in XWiki. With the move to Flamingo ColorThemes with Bootstrap and LESS, the style structure we use got updated and those files are not in the codebase anymore as of 16.10.0 . | ||
| 37 | |||
| 38 | == classes.css == | ||
| 39 | |||
| 40 | 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: | ||
| 41 | |||
| 42 | {{code language="css"}} | ||
| 43 | .xwikisep, .xwikisep2 { | ||
| 44 | display: none; | ||
| 45 | } | ||
| 46 | .clear, .clearfloats { | ||
| 47 | clear: both; | ||
| 48 | } | ||
| 49 | .none, .hidden { | ||
| 50 | display: none; | ||
| 51 | } | ||
| 52 | ... | ||
| 53 | {{/code}} | ||
| 54 | |||
| 55 | == screenlayout.css == | ||
| 56 | |||
| 57 | 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...). | ||
| 58 | |||
| 59 | {{code language="css"}} | ||
| 60 | body#body{ | ||
| 61 | width: 100%; | ||
| 62 | padding: 0; | ||
| 63 | margin: 0 ; | ||
| 64 | min-width: 760px; | ||
| 65 | } | ||
| 66 | .minwidth, .minwidthb, .minwidthc{ | ||
| 67 | width: 720px; | ||
| 68 | height: 0px; | ||
| 69 | } | ||
| 70 | .minwidthc{ | ||
| 71 | width: 438px; | ||
| 72 | } | ||
| 73 | ... | ||
| 74 | {{/code}} | ||
| 75 | |||
| 76 | == presentation.css == | ||
| 77 | |||
| 78 | 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.). | ||
| 79 | |||
| 80 | {{code language="css"}} | ||
| 81 | .box, | ||
| 82 | .main-content { | ||
| 83 | margin: 0.5em; | ||
| 84 | } | ||
| 85 | ... | ||
| 86 | {{/code}} | ||
| 87 | |||
| 88 | == colors*.css == | ||
| 89 | |||
| 90 | 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. | ||
| 91 | |||
| 92 | {{code language="css"}} | ||
| 93 | .heading-1, .heading-1-1, .heading-1-1-1, .heading-1-1-1-1 { | ||
| 94 | color: #369; | ||
| 95 | } | ||
| 96 | ul.xwikiintra{ | ||
| 97 | border-bottom-color: #DDD; | ||
| 98 | background-color: #EEE; | ||
| 99 | } | ||
| 100 | ... | ||
| 101 | {{/code}} | ||
| 102 | |||
| 103 | == elements.css == | ||
| 104 | |||
| 105 | {{version since="16.0.0"}} | ||
| 106 | This file is not available in xwiki-platform anymore, its content has been moved to a few different files: | ||
| 107 | * {{code}}type.less{{/code}} for typographic styles, such as title size and generic text mixins. | ||
| 108 | * Color Themes for admin defined styles, such as text color and font-family. | ||
| 109 | {{/version}} | ||
| 110 | |||
| 111 | {{version before="16.0.0"}} | ||
| 112 | |||
| 113 | |||
| 114 | 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: | ||
| 115 | |||
| 116 | {{code language="css"}} | ||
| 117 | body { | ||
| 118 | margin: 0; | ||
| 119 | padding: 0em; | ||
| 120 | font-size: 90.01%; | ||
| 121 | line-height: 1.25em; | ||
| 122 | background: white; | ||
| 123 | color: black; | ||
| 124 | font-family: "Arial", "Lucida", "Trebuchet MS", "Luxi Sans", "Helvetica", sans-serif; | ||
| 125 | } | ||
| 126 | h1 { | ||
| 127 | font-size: 1.5em; | ||
| 128 | line-height: 1.33em; | ||
| 129 | margin: 0.89em 0; | ||
| 130 | } | ||
| 131 | ul { | ||
| 132 | margin: 1em 0; | ||
| 133 | padding: 0 0 0 2.5em; | ||
| 134 | } | ||
| 135 | ... | ||
| 136 | {{/code}} | ||
| 137 | |||
| 138 | {{/version}} | ||
| 139 | |||
| 140 | = Deprecated (soon to be removed) = | ||
| 141 | |||
| 142 | As of 16.10.0-RC1, all the files that were in this section got removed (most of them had their content moved inside a StyleSheetExtension object). | ||
| 143 | |||
| 144 | = Possibly usable files = | ||
| 145 | |||
| 146 | //if somebody makes the skin wizard// | ||
| 147 | |||
| 148 | == customlayout.css == | ||
| 149 | |||
| 150 | A dynamic version of ##screenlayout.css## using properties defined in a skin object. Should be parsed by velocity. | ||
| 151 | |||
| 152 | == customcolors.css == | ||
| 153 | |||
| 154 | Same, but for colors. |
