Last modified by Admin on 2017/10/05 15:44

From version 69.4
edited by Admin
on 2016/11/23 01:31
To version 70.1
edited by Anca Luca
on 2016/11/28 20:20
Change comment: Updated information about how to use the color theme's variables

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.Admin
1 +xwiki:XWiki.lucaa
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -116,10 +116,16 @@
116 116  On the preview box, when you are editing a theme, it is different. It actually uses the LESS compiler, executed on the browser. It allows us to offer a real preview (not a fake one) without making the server re-compile the LESS files, which would be too costly.
117 117  
118 118  == Using theme variables ==
119 -Currently, we do not have a solution for using the flamingo theme's variables in a [[Skin Extension>>platform:DevGuide.SkinExtensionsTutorial]]. But you can still use the [[old color theme variables>>Extension.Color Theme Application||anchor=HUsingColorThemesvariables]] because we provide an automatic mapping between flamingo variables and them.
119 +Starting with 6.4 milestone 2, you can use LESS in a [[Skin Extension>>platform:DevGuide.SkinExtensionsTutorial]]. Thus, in order to use the theme variables, you just need to choose the LESS syntax for your Skin Extension and then just use the Flamingo Theme variables normally. For example, in order to reuse the link color, you'd write:
120 120  
121 -Example:(((
121 +{{code language="less"}}
122 +.yourClass {
123 + color: @link-color;
124 +}
125 +{{/code}}
122 122  
127 +Before 6.4 milestone 2 there is no solution for using the flamingo theme's variables in a [[Skin Extension>>platform:DevGuide.SkinExtensionsTutorial]]. But you can still use the [[old color theme variables>>Extension.Color Theme Application||anchor=HUsingColorThemesvariables]] because there is an automatic mapping between flamingo variables and them. For example,
128 +
123 123  {{code language="css"}}
124 124  #template('colorThemeInit.vm')
125 125  
... ... @@ -127,4 +127,5 @@
127 127   color: $theme.linkColor;
128 128  }
129 129  {{/code}}
130 -)))
136 +
137 +Note that this automatic mapping exists also for versions above 6.4 milestone 2, so CSS code using $theme. will continue to work. This mapping is offered, though, on best-effort basis, so using this mechanism might not be seamless.

Get Connected