Skip to Content

Wiki source code of Skin

Version 23.1 by Vincent Massol on 2011/04/07
Hide last authors
Raluca Stavro 16.1 1 {{velocity}}
2 $xwiki.ssx.use($doc.fullName)
3 {{/velocity}}
serasset 21.2 4
5 (% class="floatinginfobox" %)
6 (((
Raluca Stavro 16.1 7 **Contents**
Raluca Stavro 14.1 8
Raluca Stavro 16.1 9 {{toc depth="3" start="2"/}}
10 )))
Vincent Massol 6.2 11
serasset 21.2 12 = XWiki Skins =
13
14 {{id name="s1"/}}
15 == What is a XWiki Skin used for? ==
16
Raluca Stavro 16.1 17 A XWiki Skin is used to customize the interface of a XWiki Enterprise instance.
serasset 21.1 18
serasset 21.2 19 {{id name="s2"/}}
20 == What are the components that define a XWiki Skin? ==
21
Raluca Stavro 16.1 22 A XWiki Skin is composed of:
Vincent Massol 1.37 23
serasset 21.2 24 * (% class="sectionblockcodecolored" %)[[Velocity templates>>platform:DevGuide.Scripting#velocity]]
25 * (% class="sectionblockcodecolored" %)[[{{html}}<acronym title="Cascading Style Sheets">CSS</acronym>{{/html}} stylesheets>>platform:AdminGuide.CSS files]]
26 * (% class="sectionblockcodecolored" %)[[Javascript files>>platform:DevGuide.JavaScriptAPI]](%%) and
27 * (% class="sectionblockcodecolored" %)Images
28
29 All these components are stored on the server that hosts the XWiki Enterprise instance, inside the (% class="sectionblockcodecolored directory" %)webapps/xwiki(%%) folder.
30
serasset 21.3 31 {{id name="s3"/}}
32 == How to change the Skin ==
serasset 21.2 33
serasset 21.3 34 {{id name="3a"/}}
35 === A. The default XWiki Skins ===
serasset 21.2 36
Vincent Massol 22.3 37 A XWiki Enterprise instance contains several skins by default (See the [[Extensions wiki>>extensions:Main.WebHome]]), such as:
serasset 21.2 38
Vincent Massol 22.2 39 * the (% class="sectionblockcodecolored" %)[[albatross>>extensions:Extension.Albatross Skin]](%%) Skin
40 * the (% class="sectionblockcodecolored" %)[[toucan>>extensions:Extension.Toucan Skin]](%%) Skin
41 * the (% class="sectionblockcodecolored" %)[[colibri>>extensions:Extension.Colibri Skin]](%%) Skin and
serasset 21.2 42 * other skins ( the full list of XWiki Skins that are included in your XWiki Enterprise instance can be found on the server filesystem, inside the (% class="sectionblockcodecolored directory" %)webapps/xwiki/skins(%%) folder )
Vincent Massol 1.37 43
serasset 21.3 44 {{id name="3b"/}}
serasset 21.4 45 === B. The usage level for a XWiki Skin ===
serasset 21.2 46
serasset 21.3 47 A Skin can be used at different levels:
serasset 21.2 48 * for the entire XWiki Enterprise (% class="sectionblockcodecolored" %)instance(%%) ( if there is no Skin set other levels, the pages will use the global (% class="sectionblockcodecolored" %)instance(%%) Skin )
49 * for a (% class="sectionblockcodecolored" %)space(%%) inside the XWiki Enterprise instance ( it has a higher priority then the (% class="sectionblockcodecolored" %)instance(%%) level Skin )
50 * for a specific (% class="sectionblockcodecolored" %)user(%%) (it has a higher priority then the (% class="sectionblockcodecolored" %)space(%%) level Skin) and
51 * for other (% class="sectionblockcodecolored" %)custom(%%) levels that can be created by modifying the Velocity templates from inside the Skin ( for example, a Skin can be set for a specific page, for a specific group of users and so on )
serasset 21.3 52
53 {{id name="3c"/}}
54 ===C. Changing the Skin===
serasset 21.2 55 {{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}}
serasset 21.3 56
57 {{id name="3c1"/}}
58 ====1. How to preview a Skin applied on a page====
serasset 21.2 59 To check how a page looks on changing the Skin, you can add a parameter named (% class="sectionblockcodecolored" %)skin(%%) to the page URL. For example, to preview the wiki main page on using the (% class="sectionblockcodecolored" %)toucan(%%) Skin, use the following URL: http://localhost:8080/xwiki/bin/view/Main/WebHome/?skin=toucan . If you want to preview the page on using a Skin document named (% class="sectionblockcodecolored" %)MySpace.MySkinDoc(%%), use the following URL: http://localhost:8080/xwiki/bin/view/Main/WebHome/?skin=MySpace.MySkinDoc .
serasset 21.3 60
61 {{id name="3c2"/}}
62 ====2. Changing the Skin at (% class="sectionblockcodecolored" %)instance(%%) level====
serasset 21.2 63 Each XWiki Enterprise instance contains a document ( (% class="sectionblockcodecolored" %)Skin Document(%%) ) that stores the Skin for the instance. To find out which document is used to store the current Skin, the user has to follow these steps:
64
65 |(% style="width: 60%; color: rgb(34, 34, 34);" %)(((
66 1. go into the (% class="sectionblockcodecolored" %)Administration(%%) interface
67 1. go into the (% class="sectionblockcodecolored" %)Presentation(%%) section
68 1. check the (% class="sectionblockcodecolored" %)Skin(%%) property that stores the full name of the document
69 )))|(((
Raluca Stavro 22.1 70 [[[[image:1.png||style="border: 3px solid rgb(221, 221, 221);" width="99%"]]>>attach:1.png]]
serasset 21.2 71 )))
72
serasset 21.3 73 {{id name="3c2steps"/}}
74 To change the current Skin, follow these steps:
serasset 21.2 75
76 |(% style="width: 60%; color: rgb(34, 34, 34);" %)(((
77
78
79 1. click on the (% class="sectionblockcodecolored" %)CUSTOMIZE(%%) button right beside the (% class="sectionblockcodecolored" %)Skin(%%) property, to open the document
80 1. click on the (% class="sectionblockcodecolored" %)Edit this skin(%%) button to edit the document, or go to the top menu and select (% class="sectionblockcodecolored" %)EDIT -> OBJECTS
81 1. change the (% class="sectionblockcodecolored" %)Skin(%%) property ( the property is set to (% class="sectionblockcodecolored" %)colibri(%%) by default ) with the name of another Skin ( for example, (% class="sectionblockcodecolored" %)albatross(%%) )
82 1. save the document
83 )))|(((
Raluca Stavro 22.1 84 [[[[image:2.png||style="border: 3px solid rgb(221, 221, 221);" width="99%"]]>>attach:2.png]]
serasset 21.2 85 )))
86
Raluca Stavro 16.1 87 You can now open any page inside the wiki instance and you will notice the layout difference.
serasset 21.3 88
89 {{id name="3c3"/}}
90 ====3. Changing the Skin at (% class="sectionblockcodecolored" %)space(%%) level====
serasset 21.2 91 A XWiki space can use it's own Skin. For example, if you want to set as Skin for the space (% class="sectionblockcodecolored" %)Main(%%) as being the (% class="sectionblockcodecolored" %)albatross(%%) Skin, follow these steps:
Vincent Massol 1.37 92
serasset 21.2 93 |(% style="width: 60%; color: rgb(34, 34, 34);" %)(((
94 1. go on any page inside the (% class="sectionblockcodecolored" %)Main(%%) space ( for example, go on the home page: http://localhost:8080/xwiki/bin/view/Main/ )
95 1. from the top right menu, choose (% class="sectionblockcodecolored" %)Administration -> Administer space: Main(%%) to open the (% class="sectionblockcodecolored" %)Administration(%%) interface for the space (% class="sectionblockcodecolored" %)Main
96 1. go into the (% class="sectionblockcodecolored" %)Presentation(%%) section
97 1. follow the steps 4, 5, 6 and 7 from inside the section [[C-2>>#3c2]]
98 )))|(((
Raluca Stavro 22.1 99 [[[[image:3.png||style="border: 3px solid rgb(221, 221, 221);" width="99%"]]>>attach:3.png]]
serasset 21.2 100 )))
Raluca Stavro 20.1 101
serasset 21.2 102 You can now open any page inside the (% class="sectionblockcodecolored" %)Main(%%) space and you will notice the layout difference.
103
104 {{id name="3d"/}}
105
106 == More about XWiki Skins ==
107
Raluca Stavro 20.1 108 In order to find more about XWiki Skins, check the [[Skins Tutorial>>DevGuide.Skins]] from inside the Developer Guide and the [[Skins Tutorial>>Features.Skins]] from inside the User Guide
109
110
111
serasset 21.2 112

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected