Changes for page Skin Extension Plugin

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

<
From version < 28.2 >
edited by Vincent Massol
on 2016/02/26 15:00
To version < 29.1 >
edited by Denis Gervalle
on 2017/10/09 17:45
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.VincentMassol
1 +xwiki:XWiki.dgervalle
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -14,6 +14,7 @@
14 14  * ##$xwiki.ssrx.use('path/to/file.css')## pulls a style sheet file located in a JAR (located either in ##WEB-INF/lib## or added through an Extension).
15 15  * All the above versions accept as a second parameter a map of parameters, as in ##$xwiki.jsx.use('Document.Name', {'minify' : false, 'language': $context.language})##
16 16  * jsfx and ssfx have an optional second boolean parameter, which allows to specify whether the URL of the pulled file extension should always pass through the skin action: ##$xwiki.jsfx.use('path/to/file.js', true)##; for enabling this behavior with the generic parameter map, use ##$xwiki.jsfx.use('file.js', {'forceSkinAction': true})##
17 +* ##$xwiki.linkx.use('url/to/file.css, {'type': 'text/css', 'rel': 'stylesheet'})## pulls a style sheet from any URL, this could be very useful in combinaison with the webjar module, where you can use ##$xwiki.linkx.use($services.webjars.url('artifact-id','path/to/file.css'), {'type': 'text/css', 'rel': 'stylesheet'})##
17 17  
18 18  Important parameters:
19 19  
... ... @@ -33,9 +33,13 @@
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  
36 -{{code}}$xwiki.ssx.use("My.CSS"){{/code}}
37 +{{code}}
38 +$xwiki.ssx.use("My.CSS")
39 +{{/code}}
37 37  
38 -{{code}}$xwiki.jsx.use("My.JavaScript"){{/code}}
41 +{{code}}
42 +$xwiki.jsx.use("My.JavaScript")
43 +{{/code}}
39 39  
40 40  Here, "My.CSS" & "My.JavaScript" are the names of those pages which contains your StyleSheetExtension / JavaScriptExtension.
41 41  
... ... @@ -43,19 +43,23 @@
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  
46 -1) The ##$xwiki.getSkinFile()## function obtains a file located on the disk. The file will be looked for in the configured skins (first in the current skin, then in the base skin, then in the default skin, and finaly, in the templates directory; see the [[skin documentation>>platform:AdminGuide.Skins]] for details about skin structure). Example:##
51 +1) The ##$xwiki.getSkinFile()## function obtains a file located on the disk. The file will be looked for in the configured skins (first in the current skin, then in the base skin, then in the default skin, and finaly, in the templates directory; see the [[skin documentation>>platform:AdminGuide.Skins]] for details about skin structure). Example:
47 47  
48 -{{code}}background-image: url($xwiki.getSkinFile("path/to/the/image.png"));{{/code}}
53 +{{code}}
54 +background-image: url($xwiki.getSkinFile("path/to/the/image.png"));
55 +{{/code}}
49 49  
50 50  2) For using images that are attached to a document in the wiki:
51 51  
52 52  (% style="list-style-type: square" %)
53 -* If the image is attached to the wiki document containing the refering StyleSheetExtension, it can be accessed as shown in the following example:##
60 +* 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 -{{code}}background-image: url($doc.getAttachmentURL("image.png"));{{/code}}
62 +{{code}}
63 +background-image: url($doc.getAttachmentURL("image.png"));
64 +{{/code}}
56 56  
57 57  (% style="list-style-type: square" %)
58 -* An image attached to another wiki document can be accessed this way:##
67 +* An image attached to another wiki document can be accessed this way:
59 59  
60 60  {{code}}
61 61  background-image: url($xwiki.getDocument("Some.Document").getAttachmentURL("image.png"));
... ... @@ -67,8 +67,10 @@
67 67  
68 68  {{info}}Since XWiki 6.4M2{{/info}}, you can write [[LESS code>>http://lesscss.org/]] thanks to the [[LESS Module]], inside a Skin Extension.
69 69  
70 -For that, you just need to set the field "Content Type" to "LESS":(((
71 -{{image reference="contentTypeLESS.png" /}}
79 +For that, you just need to set the field "Content Type" to "LESS":
80 +
81 +(((
82 +{{image reference="contentTypeLESS.png"/}}
72 72  )))
73 73  
74 74  You will be able to use every [[Flamingo Theme>>Flamingo Theme Application]] variables and every mix-ins defined in your skin. For example, for [[Flamingo>>Flamingo Skin]], you can use all [[bootstrap's mixins>>http://getbootstrap.com/css/#less]].
... ... @@ -87,7 +87,9 @@
87 87  
88 88  == Compatibility issue ==
89 89  
90 -{{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}}
101 +{{warning}}
102 +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]].
103 +{{/warning}}
91 91  
92 92  So a good practice is to have 2 SSX objects: a first one containing pure CSS and a second one containing LESS code that overwrites the first's CSS rules. Example:
93 93  
... ... @@ -107,7 +107,8 @@
107 107  }
108 108  {{/code}}
109 109  
110 -{{warning}}Note that because of some bugs in the LESS Compiler, you are not able to use the 'extend' function to use a selector defined in the skin. But you can still use them as mix-ins. In other words, you can do:
123 +{{warning}}
124 +Note that because of some bugs in the LESS Compiler, you are not able to use the 'extend' function to use a selector defined in the skin. But you can still use them as mix-ins. In other words, you can do:
111 111  
112 112  {{code language="less"}}
113 113  .myClass {
Show installed count
... ... @@ -1,0 +1,1 @@
1 +Yes

Get Connected