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
<[email protected]> 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
> [email protected]
> http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
[email protected]
http://lists.xwiki.org/mailman/listinfo/devs
