Wiki source code of Skins

Last modified by Thomas Mortagne on 2023/10/10

Show last authors
1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
4
5 A XWiki skin is used to customize the interface of a XWiki instance.
6 A skin is composed of:
7
8 * [[Velocity templates>>Documentation.DevGuide.Scripting#velocity]]
9 * [[CSS files (stylesheets)>>Documentation.DevGuide.Tutorials.Skins.CSS files]]
10 * [[Javascript files>>Documentation.DevGuide.JavaScriptAPI]]
11 * Images
12
13 All these components are stored on the server that hosts the XWiki instance, inside the ##webapps/xwiki/## folder. Each XWiki skin has its own directory.
14
15 {{version since="13.8RC1"}}
16 Skins can now be stored in extensions. If an extension installed on a wiki contains a ##skins/skinName/## folder, it can be discovered and used as a wiki Skin.
17 {{/version}}
18
19 = The default XWiki Skins =
20
21 An XWiki instance contains several skins by default, such as:
22
23 * The [[Flamingo Skin>>extensions:Extension.Flamingo Skin]]
24 * The [[Colibri skin (deprecated starting 6.2-m2)>>extensions:Extension.Colibri Skin]]
25 * The [[Toucan skin (deprecated and removed starting with 4.4-rc1)>>extensions:Extension.Toucan Skin]]
26
27 The [[full list of XWiki skins>>Documentation.UserGuide.Features.Skins]] that are included in your XWiki instance can be found on the server filesystem, inside the ##webapps/xwiki/skins## folder.
28
29 = The usage level for a XWiki Skin =
30
31 A Skin can be used at different levels:
32
33 * For the entire XWiki instance. If no skin is set at other levels, the pages will use the global instance skin.
34 * For a space inside the XWiki instance. It has a higher priority than the instance level skin.
35 * For a specific user. It has a higher priority than the space level skin. For more details check [[this tutorial>>Documentation.AdminGuide.Skins#HChangingtheSkinforauser]].
36 * For other custom levels that can be created by modifying the Velocity templates inside the skin (for example, a skin can be set for a specific page, for a specific group of users and so on).
37
38 == Changing the Skin ==
39
40 {{warning}}
41 To change the Skin, the user must have administrating rights. In the case that you have these rights, make sure that you switch to the Advanced mode in your profile, to enable the advanced options on the top main menu.
42 {{/warning}}
43
44 === How to preview a Skin applied on a page ===
45
46 To check how a page looks when changing the skin, you can add a parameter named skin to the page URL. For example, to preview the wiki main page with colibri skin, use the following URL: [[http:~~/~~/localhost:8080/xwiki/bin/view/Main/WebHome/?skin=colibri>>http://localhost:8080/xwiki/bin/view/Main/WebHome/?skin=colibri]]. If you want to preview the page using a skin document named MySpace.MySkinDoc, use the following URL: [[http:~~/~~/localhost:8080/xwiki/bin/view/Main/WebHome/?skin=MySpace.MySkinDoc>>http://localhost:8080/xwiki/bin/view/Main/WebHome/?skin=MySpace.MySkinDoc]].
47
48 === Changing the Skin at instance level ===
49
50 Each XWiki instance contains a //skin document// that stores the skin for the instance. In order to find out which document is used to store the current skin, the user has to follow these steps:
51
52 * Hover over "Wiki" and click on "Administer Wiki"
53 * Click on the **Presentation** link(((
54 {{image reference="skin1.png"/}}
55 )))
56 * Click on the **Customize** button from the skin section(((
57 [[image:skin2.png||style="border:1px solid silver" width="650"]]
58 )))
59 * Edit the page in Objects mode(((
60 [[image:skin3||style="border:1px solid silver" width="650"]]
61 )))
62 * You have multiple text areas where you can override the default behavior of your skin. Make your desired modifications.
63 * Click on **Save and View**
64 * Your settings will be applied and the skin should change accordingly
65
66 === Changing the Skin at space level ===
67
68 A XWiki space can have its own skin. For example, if you want to set the your skin for the Main space you should follow these steps:
69
70 * Go to any page inside the Main space
71 * From the top Space menu, click "Administer Space" to open the administration interface for the Main space
72 * Click on the **Presentation** link(((
73 {{image reference="skin5.png"/}}
74 )))
75 * If you have defined another skin, you should fill in the directory name which contains the skin.(((
76 {{info}}
77 The names of the skins are case-sensitive.
78 {{/info}}
79 )))
80 * Click on **Save**
81 * If you open any page inside the Main space you will notice the layout difference
82
83 === Changing the Skin for a user ===
84
85 If you want to use your skin for a specific user follow these steps:
86
87 * Go to the user's profile page
88 * Edit the page in Objects mode
89 * Set the value of the "skin" property (under //Objects of type XWiki.XWikiUsers//) to you custom skin (you must use lowercase letters)(((
90 [[image:skin6.png||style="border:1px solid silver" width="650"]]
91 )))
92 * Click on **Save and View**
93 * Now all the pages inside the wiki will use your new skin for that user
94
95 = More about XWiki Skins =
96
97 In order to find out more about the XWiki Skins, check the [[Skins Tutorial>>Documentation.DevGuide.Tutorials.Skins]] in the Developer Guide and the [[Skins Tutorial>>Documentation.UserGuide.Features.Skins]] in the User Guide.

Get Connected