Wiki source code of Skin Files
Last modified by Eleni Cojocariu on 2026/09/28 14:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | A skin is a set of files rather than a single setting. This page lists what those files are, what each one does and where a filesystem skin keeps them, which is what [[Customize a Skin>>doc:documentation.xs.admin.skins.customize.WebHome]] replaces one file at a time. For the skins an instance can use and how each is named, see [[Available Skins>>doc:documentation.xs.admin.skins.available.WebHome]]. | ||
| 2 | |||
| 3 | == What a skin is made of == | ||
| 4 | |||
| 5 | |=Part |=What it does | ||
| 6 | |Velocity templates (##.vm##) |Build the pages of the interface. Overriding one of them is how a wiki skin changes the interface. | ||
| 7 | |LESS sources (##.less##) |Where the styling of the skin is written. In Flamingo the appearance is maintained here rather than directly in the stylesheets. | ||
| 8 | |Stylesheets (##.css##) |The styles the browser finally loads. | ||
| 9 | |Scripts (##.js##) |The behaviour of the interface widgets. | ||
| 10 | |Images |The logo and the pictures the templates refer to. | ||
| 11 | |##skin.properties## |The skin's own settings. | ||
| 12 | |||
| 13 | Each action is built by a template of its own, and the styling has a single entry point: | ||
| 14 | |||
| 15 | |=What it builds |=File in the skin | ||
| 16 | |The view of a page |##view.vm## | ||
| 17 | |The editor of a page |##edit.vm## | ||
| 18 | |The main stylesheet |##style.css## | ||
| 19 | |Its LESS source |##less/style.less.vm## | ||
| 20 | |||
| 21 | == Where a filesystem skin keeps them == | ||
| 22 | |||
| 23 | Filesystem skins live under ##webapps/xwiki/skins/##, one directory each. XWiki keeps its own skins there so that they can be used even when the database is empty, which a skin held in pages cannot be. This is the whole of that directory on a standard XWiki instance, and the layout of the skin it contains: | ||
| 24 | |||
| 25 | {{code language="none"}} | ||
| 26 | webapps/xwiki/skins/ | ||
| 27 | flamingo/ | ||
| 28 | skin.properties the skin's own settings | ||
| 29 | *.vm Velocity templates | ||
| 30 | less/ LESS sources, where the styling is written | ||
| 31 | css/, *.css stylesheets | ||
| 32 | *.js scripts | ||
| 33 | logo.svg, logo.png the default logo | ||
| 34 | {{/code}} | ||
| 35 | |||
| 36 | == skin.properties == | ||
| 37 | |||
| 38 | ##skin.properties## is what makes a directory a skin: a filesystem skin without one is not recognised at all. It declares the skin it inherits from and the syntax it produces, and in Flamingo it holds exactly two lines: | ||
| 39 | |||
| 40 | {{code language="properties"}} | ||
| 41 | parent= | ||
| 42 | outputSyntax=html/5.0 | ||
| 43 | {{/code}} | ||
| 44 | |||
| 45 | An empty ##parent## means the skin explicitly has no parent, so it falls back to no other skin for anything, which is why Flamingo has to provide a complete interface on its own. |
