18 Mar
2014
18 Mar
'14
6:57 p.m.
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
19 Mar
19 Mar
7:56 a.m.
Hi,
It's normal that the uicomponents are called after the skin.
I'm not sure I understand what you mean by 'override the class in own
style.css'. IMO this is a specificity problem and usually this is solved by
having more specific selectors. What would you'd expect? To write the same
selector and take precedence because it is in a uicomponents location?
You can copy in style.css the uicomponents you know come by default in
XWiki, but the problem will still remain for ssx and ssfx calls.
Thanks,
Caty
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
11:11 a.m.
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
1 Apr
1 Apr
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
3821
days inactive
3835
days old
3 comments
3 participants
participants (3)
-
Ecaterina Moraru (Valica) -
Guillaume "Louis-Marie" Delhumeau -
Marius Dumitru Florea