Changes for page Skin Extension Tutorial

Last modified by Vincent Massol on 2023/10/10

<
From version < 35.2 >
edited by Vincent Massol
on 2017/09/05
To version < 36.1 >
edited by Ecaterina Moraru (Valica)
on 2018/06/28
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.VincentMassol
1 +XWiki.evalica
Content
... ... @@ -417,6 +417,18 @@
417 417  
418 418  Since XWiki 6.4M2, you can use [[LESS>>http://www.lesscss.org/]] in your Skin Extensions. Get a look to [[extensions:Extension.Skin Extension Plugin||anchor="HUseLESS"]] for more informations.
419 419  
420 +When adding style to your applications there are several languages you can use ##CSS##, ##LESS##, ##Velocity##. It all depends if you need advanced functions, access to the XWiki API, if you need to reuse existing variables, etc.
421 +
422 +For example, depending on where your code is (in a ##SSX##, skin file or in a ##LESS## file) you can use the [[old Color Themes variables>>extensions:Extension.Color Theme Application||anchor="HUsingColorThemesvariables"]] (needs ##Velocity## to be parsed) or the [[Flamingo Theme variables>>extensions:Extension.Flamingo Theme Application||anchor="HUsingthemevariables"]] (needs ##LESS## to be compiled).
423 +
424 +If you are not sure what to use and where this is a small summary:
425 +
426 +(% class="table table-bordered" %)
427 +| | CSS | LESS | Velocity
428 +|CSS | SSX-CSS; Skin style.css; Web Resources | SSX-LESS; ColorTheme Advanced; Skin LESS files; Bootstrap variables;| SSX-CSS-Parse; Skin style.css; $theme variables
429 +|LESS | SSX-LESS; ColorTheme Advanced; Skin LESS files; Bootstrap variables; | SSX-LESS; ColorTheme Advanced; Skin LESS files; Bootstrap variables; | SSX-LESS-Parse; style.less.vm; $theme variables; Bootstrap variables;
430 +|Velocity | SSX-CSS-Parse; Skin style.css; $theme variables | SSX-LESS-Parse; style.less.vm; | ##{ {Velocity} }## macro; Generic Templates; Skin Templates
431 +
420 420  = References =
421 421  
422 422  * [[extensions:Extension.Skin Extension Plugin]]

Get Connected