<
From version < 21.1 >
edited by Gilles Sérasset
on 2010/03/08
To version < 21.2 >
edited by Gilles Sérasset
on 2010/03/08
>
Change comment: Cosmetic modification of broken page

Summary

Details

Page properties
Content
... ... @@ -1,77 +1,105 @@
1 1  {{velocity}}
2 2  $xwiki.ssx.use($doc.fullName)
3 3  {{/velocity}}
4 -(% class="floatinginfobox" %)(((
4 +
5 +(% class="floatinginfobox" %)
6 +(((
5 5  **Contents**
6 6  
7 7  {{toc depth="3" start="2"/}}
8 8  )))
9 -=XWiki Skins=
10 10  
11 -{{id name="s1" /}}
12 -==What is a XWiki Skin used for?==
12 += XWiki Skins =
13 +
14 +{{id name="s1"/}}
15 +
16 +== What is a XWiki Skin used for? ==
17 +
13 13   A XWiki Skin is used to customize the interface of a XWiki Enterprise instance.
14 14  
15 -{{id name="s2" /}}
16 -==What are the components that define a XWiki Skin?==
20 +{{id name="s2"/}}
21 +
22 +== What are the components that define a XWiki Skin? ==
23 +
17 17   A XWiki Skin is composed of:
18 - * (% class="sectionblockcodecolored"%)[[Velocity templates>>platform:DevGuide.Scripting#velocity]](%%)
19 - * (% class="sectionblockcodecolored"%)[[{{html}}<acronym title="Cascading Style Sheets">CSS</acronym>{{/html}} stylesheets>>platform:AdminGuide.CSS files]](%%)
20 - * (% class="sectionblockcodecolored"%)[[Javascript files>>platform:DevGuide.JavaScriptAPI]](%%) and
21 - * (% class="sectionblockcodecolored"%)Images(%%)
22 22  
23 - All these components are stored on the server that hosts the XWiki Enterprise instance, inside the (% class="sectionblockcodecolored directory"%)webapps/xwiki(%%) folder.
24 -{{id name="s3" /}} ==How to change the Skin== {{id name="3a" /}}===A. The default XWiki Skins===
26 +* (% class="sectionblockcodecolored" %)[[Velocity templates>>platform:DevGuide.Scripting#velocity]]
27 +* (% class="sectionblockcodecolored" %)[[{{html}}<acronym title="Cascading Style Sheets">CSS</acronym>{{/html}} stylesheets>>platform:AdminGuide.CSS files]]
28 +* (% class="sectionblockcodecolored" %)[[Javascript files>>platform:DevGuide.JavaScriptAPI]](%%) and
29 +* (% class="sectionblockcodecolored" %)Images
30 +
31 + All these components are stored on the server that hosts the XWiki Enterprise instance, inside the (% class="sectionblockcodecolored directory" %)webapps/xwiki(%%) folder.
32 +
33 +==
34 +{{id name="s3"/}}How to change the Skin ==
35 +
36 +=== {{id name="3a"/}}A. The default XWiki Skins ===
37 +
38 +
25 25   A XWiki Enterprise instance contains by default a [[list of Skins>>code:Skins.WebHome]] like:
26 - * the (% class="sectionblockcodecolored"%)[[albatross>>code:Skins.AlbatrossSkin]](%%) Skin
27 - * the (% class="sectionblockcodecolored"%)[[toucan>>code:Skins.ToucanSkin]](%%) Skin
28 - * the (% class="sectionblockcodecolored"%)[[colibri>>code:Skins.ColibriSkin]](%%) Skin and
29 - * 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 )
30 - {{id name="3b" /}}===B. The usage level for a XWiki Skin===
31 - A Skin can be used at different levels:
32 - * 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 )
33 - * for a (% class="sectionblockcodecolored"%)space(%%) inside the XWiki Enterprise instance ( it has a higher priority then the (% class="sectionblockcodecolored"%)instance(%%) level Skin )
34 - * for a specific (% class="sectionblockcodecolored"%)user(%%) (it has a higher priority then the (% class="sectionblockcodecolored"%)space(%%) level Skin) and
35 - * 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 )
36 -{{id name="3c" /}} ===C. Changing the Skin===
37 -{{warning}}
38 -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.
39 -{{/warning}}
40 -{{id name="3c1" /}}====1. How to preview a Skin applied on a page====
41 - 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 .
42 -{{id name="3c2" /}}====2. Changing the Skin at (% class="sectionblockcodecolored"%)instance(%%) level====
43 - 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:
44 -|(% style="width:60%;color:#222"%)(((
45 - 1. go into the (% class="sectionblockcodecolored"%)Administration(%%) interface
46 - 1. go into the (% class="sectionblockcodecolored"%)Presentation(%%) section
47 - 1. check the (% class="sectionblockcodecolored"%)Skin(%%) property that stores the full name of the document
48 - )))|((([[[[image:1.png||width="100%" style="border:3px solid #ddd;"]]>>attach:1.png]])))
49 49  
50 -{{id name="3c2steps" /}}To change the current Skin, follow these steps:
51 -|(% style="width:60%;color:#222"%)(((
52 - (% start="4" %)
53 - 1. click on the (% class="sectionblockcodecolored"%)CUSTOMIZE(%%) button right beside the (% class="sectionblockcodecolored"%)Skin(%%) property, to open the document
54 - 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(%%)
55 - 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(%%) )
56 - 1. save the document
57 - )))|((([[[[image:2.png||width="100%" style="border:3px solid #ddd;"]]>>attach:2.png]])))
41 +* the (% class="sectionblockcodecolored" %)[[albatross>>code:Skins.AlbatrossSkin]](%%) Skin
42 +* the (% class="sectionblockcodecolored" %)[[toucan>>code:Skins.ToucanSkin]](%%) Skin
43 +* the (% class="sectionblockcodecolored" %)[[colibri>>code:Skins.ColibriSkin]](%%) Skin and
44 +* 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 )
58 58  
46 +=== {{id name="3b"/}}B. The usage level for a XWiki Skin
47 + ===
48 +
49 +* A Skin can be used at different levels:
50 +* 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 )
51 +* for a (% class="sectionblockcodecolored" %)space(%%) inside the XWiki Enterprise instance ( it has a higher priority then the (% class="sectionblockcodecolored" %)instance(%%) level Skin )
52 +* for a specific (% class="sectionblockcodecolored" %)user(%%) (it has a higher priority then the (% class="sectionblockcodecolored" %)space(%%) level Skin) and
53 +* 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 )
54 +{{id name="3c"/}} ===C. Changing the Skin===
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}}
56 +{{id name="3c1"/}}====1. How to preview a Skin applied on a page====
57 + 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 .
58 +{{id name="3c2"/}}====2. Changing the Skin at (% class="sectionblockcodecolored" %)instance(%%) level====
59 + 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:
60 +
61 +|(% style="width: 60%; color: rgb(34, 34, 34);" %)(((
62 +1. go into the (% class="sectionblockcodecolored" %)Administration(%%) interface
63 +1. go into the (% class="sectionblockcodecolored" %)Presentation(%%) section
64 +1. check the (% class="sectionblockcodecolored" %)Skin(%%) property that stores the full name of the document
65 +)))|(((
66 +[[[[image:1.png||style="border: 3px solid rgb(221, 221, 221);" width="100%"]]>>attach:1.png]]
67 +)))
68 +
69 +{{id name="3c2steps"/}}To change the current Skin, follow these steps:
70 +
71 +|(% style="width: 60%; color: rgb(34, 34, 34);" %)(((
72 +
73 +
74 +1. click on the (% class="sectionblockcodecolored" %)CUSTOMIZE(%%) button right beside the (% class="sectionblockcodecolored" %)Skin(%%) property, to open the document
75 +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
76 +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(%%) )
77 +1. save the document
78 +)))|(((
79 +[[[[image:2.png||style="border: 3px solid rgb(221, 221, 221);" width="100%"]]>>attach:2.png]]
80 +)))
81 +
59 59   You can now open any page inside the wiki instance and you will notice the layout difference.
60 -{{id name="3c3" /}}====3. Changing the Skin at (% class="sectionblockcodecolored"%)space(%%) level====
61 - 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:
62 -|(% style="width:60%;color:#222"%)(((
63 - 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/ )
64 - 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(%%)
65 - 1. go into the (% class="sectionblockcodecolored"%)Presentation(%%) section
66 - 1. follow the steps 4, 5, 6 and 7 from inside the section [[C-2>>#3c2]]
67 - )))|((([[[[image:3.png||width="100%" style="border:3px solid #ddd;"]]>>attach:3.png]])))
83 +{{id name="3c3"/}}====3. Changing the Skin at (% class="sectionblockcodecolored" %)space(%%) level====
84 + 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:
68 68  
69 - You can now open any page inside the (% class="sectionblockcodecolored"%)Main(%%) space and you will notice the layout difference.
70 - )))
86 +|(% style="width: 60%; color: rgb(34, 34, 34);" %)(((
87 +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/ )
88 +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
89 +1. go into the (% class="sectionblockcodecolored" %)Presentation(%%) section
90 +1. follow the steps 4, 5, 6 and 7 from inside the section [[C-2>>#3c2]]
91 +)))|(((
92 +[[[[image:3.png||style="border: 3px solid rgb(221, 221, 221);" width="100%"]]>>attach:3.png]]
93 +)))
71 71  
72 -{{id name="3d" /}}
73 -==More about XWiki Skins==
95 + You can now open any page inside the (% class="sectionblockcodecolored" %)Main(%%) space and you will notice the layout difference.
96 +
97 +{{id name="3d"/}}
98 +
99 +== More about XWiki Skins ==
100 +
74 74  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
75 75  
76 76  
77 77  
105 +

Get Connected