1 Apr
2014
1 Apr
'14
2:42 p.m.
FYI, I actually do what Marius suggested me.
eg:
.skin-flamingo .suggest {
/* Properties specific to Flamingo */
}"
Thanks,
Louis-Marie
2014-03-19 11:11 GMT+01:00 Marius Dumitru Florea <
mariusdumitru.florea(a)xwiki.com>gt;:
If an UI component wants to be displayed differently
based on the
current skin then I suggest doing this:
* Each skin can set a specific CSS class name (e.g. the skin name) on
the BODY element to let the others know what is the current skin:
<body id="body" class="wiki-playground space-Main viewbody hideleft
colibri">
* UI components can then have specific CSS rules for each skin:
.suggest {
/* Properties common for all skins */
}
.colibri .suggest {
/* Properties specific to Colibri */
}
.flamingo .suggest {
/* Properties specific to Flamingo */
}
* If there are not that many skin dependant rules then they can be put
in the same CSS file
/resources/uicomponents/suggest/suggest.css
* Otherwise, if there are many skin dependant rules (which shouldn't
happen very often) then the UI component can have 3 stylesheets
/resources/uicomponents/suggest/suggest.css
/resources/uicomponents/suggest/suggest-colibri.css
/resources/uicomponents/suggest/suggest-flamingo.css
In this case, each skin must load the right stylesheets. javascript.vm
and stylesheets.vm could load common resources and also include a
Velocity template that is skin dependent and that loads skin dependant
resources. suggest.css would be loaded by javascript.vm /
stylesheets.vm while suggest-colibri.css and suggest-flamingo.css
would be loaded by the skin dependant vm.
In any case, all resources (JavaScript, CSS, images, fonts, etc.)
related to an UI components should be grouped together.
Hope this helps,
Marius
On Tue, Mar 18, 2014 at 7:57 PM, Guillaume "Louis-Marie" Delhumeau
<gdelhumeau(a)xwiki.com> wrote:
Hi guys,
When a user create a new skin, she might have to change the CSS classes
provided by some UI components. But she cannot simply override the class
in
her own style.css because uicomponents css are
currently called after the
skin in the HTML page.
To fix it, in Flamingo, I currently copy the uicomponents css code into
my
style.css, and then modify it. Thanks to LESS, I
am able to split my big
CSS file into several LESS files, so the code still looks good. Then, I
remove every calls to $xwiki.ssfx.use('uicomponents/...') in my
templates.
But it might not be a good solution to have uicomponents splitted in
different locations like this.
What is your opinion about this?
Thanks,
Louis-Marie
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs