Wiki source code of Skins

Last modified by Thomas Mortagne on 2023/10/10

Hide last authors
Manuel Smeria 29.4 1 {{box cssClass="floatinginfobox" title="**Contents**"}}
Sorin Burjan 25.11 2 {{toc/}}
Manuel Smeria 29.4 3 {{/box}}
Vincent Massol 6.2 4
Ecaterina Moraru (Valica) 37.1 5 A XWiki skin is used to customize the interface of a XWiki instance.
Manuel Smeria 29.5 6 A skin is composed of:
Sorin Burjan 25.3 7
Thomas Mortagne 41.1 8 * [[Velocity templates>>Documentation.DevGuide.Scripting#velocity]]
Ecaterina Moraru (Valica) 38.1 9 * [[CSS files (stylesheets)>>Documentation.DevGuide.Tutorials.Skins.CSS files]]
Thomas Mortagne 41.1 10 * [[Javascript files>>Documentation.DevGuide.JavaScriptAPI]]
Sorin Burjan 25.2 11 * Images
serasset 21.2 12
Ecaterina Moraru (Valica) 37.1 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.
Manuel Smeria 29.4 14
Manuel Leduc 40.1 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
Sorin Burjan 25.12 19 = The default XWiki Skins =
serasset 21.2 20
Ecaterina Moraru (Valica) 37.1 21 An XWiki instance contains several skins by default, such as:
Manuel Smeria 29.4 22
Guillaume Delhumeau 30.1 23 * The [[Flamingo Skin>>extensions:Extension.Flamingo Skin]]
24 * The [[Colibri skin (deprecated starting 6.2-m2)>>extensions:Extension.Colibri Skin]]
Sorin Burjan 29.7 25 * The [[Toucan skin (deprecated and removed starting with 4.4-rc1)>>extensions:Extension.Toucan Skin]]
Manuel Smeria 29.4 26
Thomas Mortagne 41.1 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.
Vincent Massol 1.37 28
Sorin Burjan 25.12 29 = The usage level for a XWiki Skin =
serasset 21.2 30
serasset 21.3 31 A Skin can be used at different levels:
32
Ecaterina Moraru (Valica) 37.1 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.
Manuel Leduc 39.2 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]].
Manuel Smeria 29.5 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
Silvia Macovei 26.2 38 == Changing the Skin ==
Sorin Burjan 25.12 39
Manuel Smeria 29.5 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}}
serasset 21.3 43
Manuel Smeria 29.5 44 === How to preview a Skin applied on a page ===
serasset 21.2 45
Manuel Leduc 39.2 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]].
Sorin Burjan 25.3 47
Silvia Macovei 26.2 48 === Changing the Skin at instance level ===
Sorin Burjan 25.3 49
Ecaterina Moraru (Valica) 37.1 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:
Sorin Burjan 25.3 51
Manuel Smeria 29.5 52 * Hover over "Wiki" and click on "Administer Wiki"
Sorin Burjan 29.7 53 * Click on the **Presentation** link(((
Silvia Macovei 29.3 54 {{image reference="skin1.png"/}}
Sorin Burjan 25.7 55 )))
Sorin Burjan 29.7 56 * Click on the **Customize** button from the skin section(((
Manuel Leduc 39.2 57 [[image:skin2.png||style="border:1px solid silver" width="650"]]
Sorin Burjan 25.7 58 )))
Sorin Burjan 29.7 59 * Edit the page in Objects mode(((
Manuel Leduc 39.2 60 [[image:skin3||style="border:1px solid silver" width="650"]]
Sorin Burjan 25.7 61 )))
Manuel Smeria 29.5 62 * You have multiple text areas where you can override the default behavior of your skin. Make your desired modifications.
Sorin Burjan 25.5 63 * Click on **Save and View**
Manuel Smeria 29.5 64 * Your settings will be applied and the skin should change accordingly
Sorin Burjan 25.4 65
Silvia Macovei 26.2 66 === Changing the Skin at space level ===
Sorin Burjan 25.3 67
Sorin Burjan 29.7 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:
serasset 21.2 69
Manuel Smeria 29.5 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
Sorin Burjan 29.7 72 * Click on the **Presentation** link(((
Silvia Macovei 29.3 73 {{image reference="skin5.png"/}}
Sorin Burjan 25.7 74 )))
Sorin Burjan 29.7 75 * If you have defined another skin, you should fill in the directory name which contains the skin.(((
Manuel Smeria 29.5 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
serasset 21.2 82
Silvia Macovei 26.2 83 === Changing the Skin for a user ===
serasset 21.2 84
Sorin Burjan 29.7 85 If you want to use your skin for a specific user follow these steps:
Sorin Burjan 25.9 86
87 * Go to the user's profile page
Manuel Smeria 29.5 88 * Edit the page in Objects mode
Sorin Burjan 29.7 89 * Set the value of the "skin" property (under //Objects of type XWiki.XWikiUsers//) to you custom skin (you must use lowercase letters)(((
Manuel Leduc 39.2 90 [[image:skin6.png||style="border:1px solid silver" width="650"]]
Sorin Burjan 25.9 91 )))
92 * Click on **Save and View**
Sorin Burjan 29.7 93 * Now all the pages inside the wiki will use your new skin for that user
Sorin Burjan 25.9 94
Sorin Burjan 25.12 95 = More about XWiki Skins =
serasset 21.2 96
Thomas Mortagne 41.1 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