Wiki source code of Skin

Version 26.2 by Silvia Macovei on 2011/04/07

Show last authors
1 (% class="floatinginfobox" %)
2 (((
3 **Contents**
4
5 {{toc/}}
6 )))
7
8 = What is a XWiki Skin used for? =
9
10 An XWiki Skin is used to customize the interface of a XWiki Enterprise instance.
11 A Skin is composed of:
12 * [[Velocity templates>>platform:DevGuide.Scripting#velocity]]
13 * [[CSS files (stylesheets)>>platform:AdminGuide.CSS files]]
14 * [[Javascript files>>platform:DevGuide.JavaScriptAPI]]
15 * Images
16 All these components are stored on the server that hosts the XWiki Enterprise instance, inside the webapps/xwiki/ folder. Each XWiki skin has its own directory.
17
18 = The default XWiki Skins =
19
20 An XWiki Enterprise instance contains several skins by default, such as:
21 * The [[Albatross>>extensions:Extension.Albatross Skin]] Skin
22 * The [[Toucan>>extensions:Extension.Toucan Skin]] Skin
23 * The [[Colibri>>extensions:Extension.Colibri Skin]] Skin
24 The full list of XWiki Skins that are included in your XWiki Enterprise instance can be found on the server filesystem, inside the webapps/xwiki/skins folder.
25
26 = The usage level for a XWiki Skin =
27
28 A Skin can be used at different levels:
29 * For the entire XWiki Enterprise instance. If no Skin is set at other levels, the pages will use the global instance Skin
30 * For a space inside the XWiki Enterprise instance. It has a higher priority than the instance level Skin
31 * For a specific user. It has a higher priority than the space level Skin. Click [[here>>Features.Skins#HChangingtheSkinforauser]] for more details
32 * 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)
33
34 == Changing the Skin ==
35
36 {{warning}}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.{{/warning}}
37
38 === How to preview a Skin applied on a page ===
39
40 To check how a page looks on changing the Skin, you can add a parameter named skin to the page URL. For example, to preview the wiki main page with the Toucan Skin, use the following URL: http://localhost:8080/xwiki/bin/view/Main/WebHome/?skin=toucan. 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.
41
42 === Changing the Skin at instance level ===
43
44 Each XWiki Enterprise 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:
45
46 * Go to Wiki Administration page
47 * Click on **Presentation** on the left tab
48 (((
49 [[image:skin1.png||style="border:1px solid black; width:650px"]]
50 )))
51 * Check the Skin property that stores the full name of the document
52 * Click on the **Customize** button from the Skin section
53 (((
54 [[image:skin2.png||style="border:1px solid black; width:650px"]]
55 )))
56 * Click on the **Edit this skin** button or edit the page in Object mode
57 (((
58 [[image:skin3||style="border:1px solid black; width:650px"]]
59 )))
60 * You have multiple text areas where you can override the default behavior of your skin
61 * Click on **Save and View**
62 * Your settings will be applied and the skin should change accordingly.
63
64 === Changing the Skin at space level ===
65
66 An XWiki space can have its own Skin. For example, if you want to set the Albatross Skin for the Main space you should follow these steps:
67
68 * Go on any page inside the Main space
69 * From the top Space menu, click Administer space to open the Administration interface for the Main space
70 * Click on **Presentation** on the left tab
71 (((
72 [[image:skin5.png||style="border:1px solid black; width:650px"]]
73 )))
74 * For example, to use the Toucan Skin you can write "toucan" in the **Skin** field. If you have defined another Skin, you should fill in directory name which contains the skin. Note that the names are case-sensitive.
75 * Click **Save**
76 * If you open any page inside the Main space you will notice the layout difference.
77
78 === Changing the Skin for a user ===
79
80 For example, if you want to use the Toucan Skin for a specific user, follow these steps:
81
82 * Go to the user's profile page
83 * Edit the user's objects. Use the top-left menu: Edit -> Objects
84 * Set the value of the skin(%%) property (under 'Objects of type XWiki.XWikiUsers') to toucan. You must use lowercase letters, remember that skin names are case-sensitive.
85 (((
86 [[image:skin6.png||style="border:1px solid black; width:650px"]]
87 )))
88 * Click on **Save and View**
89 * Now, all the pages inside the wiki will have the (% class="sectionblockcodecolored"%)toucan(%%) Skin applied for that user.
90
91 = More about XWiki Skins =
92
93 In order to find out more about the XWiki Skins, check the [[Skins Tutorial>>DevGuide.Skins]] in the Developer Guide and the [[Skins Tutorial>>Features.Skins]] in the User Guide.
94
95
96

Get Connected