Wiki source code of Skin
Version 27.1 by Vincent Massol on 2011/04/22
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 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>>#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 |
