Changes for page Skin Extension Plugin

Last modified by Thomas Mortagne on 2023/10/10 17:11

<
From version < 28.1 >
edited by Thomas Mortagne
on 2015/08/26 14:43
To version < 28.2 >
edited by Vincent Massol
on 2016/02/26 15:00
>
Change comment: Fixing TOC

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.ThomasMortagne
1 +xwiki:XWiki.VincentMassol
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -1,6 +1,6 @@
1 1  Avoids the inclusion by default of many styling and scripting files that are only used in some pages. See the [[SkinExtensions design page>>dev:Design.Skin Extensions]] for more information.
2 2  
3 -=== Usage ===
3 += Usage =
4 4  
5 5  {{info}}
6 6  For a complete documentation on what you can do with the Skin Extensions plugin, you can read the [[Skin Extensions tutorial>>platform:DevGuide.SkinExtensionsTutorial]].
... ... @@ -23,13 +23,13 @@
23 23  * ##defer##, used only for javascript extension, which can be used to prevent scripts from being defered; defaults to ##true##
24 24  * ##colorTheme## allows to render a ssx extension using a specific color theme (including color themes from other wikis on a XEM)
25 25  
26 -==== Creating a skin extension ====
26 +== Creating a skin extension ==
27 27  
28 28  A skin extension is a wiki document which contains an instance of
29 29  XWiki.StyleSheetExtention class or XWiki.JavaScriptExtention class. The objects
30 30  holds the actual code (CSS or JavaScript, respectively), caching policy, and whether this code should be parsed (if it is generated by velocity or groovy code).
31 31  
32 -==== Using the skin extension ====
32 +== Using the skin extension ==
33 33  
34 34  A style sheet or a javascript code defined in a skin extension can be used in a wiki page or in a velocity template by including one of the following lines:
35 35  
... ... @@ -39,7 +39,7 @@
39 39  
40 40  Here, "My.CSS" & "My.JavaScript" are the names of those pages which contains your StyleSheetExtension / JavaScriptExtension.
41 41  
42 -=== Tip: How to refer a file from a skin extension ===
42 += Tip: How to refer a file from a skin extension =
43 43  
44 44  Referring files from the code of a skin extensions is useful, for example, in StyleSheetExtensions, when images are needed for styling. The StyleSheetExtension can use images that are 1) in the XWiki skin directory or 2) attached to a wiki document.
45 45  
... ... @@ -52,7 +52,6 @@
52 52  (% style="list-style-type: square" %)
53 53  * If the image is attached to the wiki document containing the refering StyleSheetExtension, it can be accessed as shown in the following example:##
54 54  
55 -
56 56  {{code}}background-image: url($doc.getAttachmentURL("image.png"));{{/code}}
57 57  
58 58  (% style="list-style-type: square" %)
... ... @@ -64,7 +64,7 @@
64 64  
65 65  In all cases, the "Parse content" property of the StyleSheetExtension object must be set to "yes", so the code that obtains the actual url can be evaluated.
66 66  
67 -=== Use LESS ===
66 += Use LESS =
68 68  
69 69  {{info}}Since XWiki 6.4M2{{/info}}, you can write [[LESS code>>http://lesscss.org/]] thanks to the [[LESS Module]], inside a Skin Extension.
70 70  
... ... @@ -86,7 +86,7 @@
86 86  
87 87  Of course, the LESS compilation result is cached so that it is not re-computed for every request.
88 88  
89 -==== Compatibility issue ====
88 +== Compatibility issue ==
90 90  
91 91  {{warning}}You cannot use LESS in a SSX with a skin that does not have a ##less## directory. For example, it will not work with [[Colibri>>Colibri Skin]].{{/warning}}
92 92  
... ... @@ -128,7 +128,8 @@
128 128  
129 129  {{/warning}}
130 130  
131 -==== Debugging ====
130 +== Debugging ==
131 +
132 132  The LESS compilation can fail if you have some mistakes in your code. As a result, by default, you will not see anything. But the error message is displayed inside a CSS comment if you disable the minification.
133 133  
134 134  For example: you have a problem in a SSX stored in the ##Test.SSX## document. Go to the following url:
... ... @@ -139,6 +139,6 @@
139 139  /* LESSCompilerException: The path [/skins/colibri/less] is not a directory or does not exist. */
140 140  {{/code}}
141 141  
142 -=== See also ===
142 += See also =
143 143  
144 144  * [[Skin Extensions Tutorial>>platform:DevGuide.SkinExtensionsTutorial]]

Get Connected