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