YUI classes

UI Components for JSF
G-rom
Posts: 83
Joined: 16 Mar 2010, 16:20

31 Mar 2010, 09:54

Dont know for everyone but to my team YUI classes are bitches when we want apply our CSS on complex primefaces object like p:datatable with selectable row and scrollable.
Can we disable it instead of overload it ? Overload take so much time and still have some things not working (selected and highlighed in datatable make some my dev crying)

Cagatay please, I'm begging you, for my devs sake, add an attribute yuiStyle (true, false) (or some like) to disable all yui selectors on some of your PF components :cry:

G-rom
Posts: 83
Joined: 16 Mar 2010, 16:20

31 Mar 2010, 15:40

Does anyone know why PF css overload mine ?
When I look at the showcase and try to apply those *very* simple examples it never work. I always have to add another class to overload yui styles :/

User avatar
Ben Utzer
Posts: 61
Joined: 10 Feb 2010, 12:05

31 Mar 2010, 16:02

It's either because PrimeFaces styles are more specific or because they are parsed after your own styles.

G-rom
Posts: 83
Joined: 16 Mar 2010, 16:20

31 Mar 2010, 16:26

I'm using firebug to be as specific as those are.

But your second response please me. Can I do things to force my css be parsed after PF's ?

User avatar
Ben Utzer
Posts: 61
Joined: 10 Feb 2010, 12:05

31 Mar 2010, 16:40

You could use @import because link is only allowed within the html header and primefaces stylesheets will always get applied later I think.
But why not be more specific?
When you have a dataTable for example the following classes are applied:

.yui-skin-sam .yui-dt table

Now when you provide an explicit id to your dataTable you can simply override those styles by defining a selector ".yui-skin-sam #yourtableid .yui-dt table" in your stylesheet.
The only problem is that you probably have to overwrite a lot of classes because the yui-skin-sam class will always get applied to the body element. This is when you want a totally different look to the table but in the end you probably need to come up with similar classes so you can as well just override the already existing.

Hope that helps.

G-rom
Posts: 83
Joined: 16 Mar 2010, 16:20

31 Mar 2010, 21:51

I'll try the @import tomorrow thank you.

I can't always use id, because sometimes there is two elements with the same CSS.
And our CSS is very different than .yui one, and very elaborate. There is to much .yui selector to overload that s my point. Even with firebug, somtimes we can't find all, some selector are very difficult to find, specially with highlighted and selected properties, or when JS change its.

I dream about a properties to shut down .yui sometimes.

User avatar
Ben Utzer
Posts: 61
Joined: 10 Feb 2010, 12:05

31 Mar 2010, 23:11

G-rom wrote: I can't always use id, because sometimes there is two elements with the same CSS.
You can style by using a class as well.
G-rom wrote: I dream about a properties to shut down .yui sometimes.
But you would have to apply your own style classes just like the yui ones, or am I wrong? I dont see the difference between overriding and defining new.

Another thing you could do is to change the yui specific stylesheets included in the primefaces source, so you would not need to override styles.

Also have a look here if you have not done so already: http://developer.yahoo.com/yui/examples ... nning.html.

G-rom
Posts: 83
Joined: 16 Mar 2010, 16:20

01 Apr 2010, 12:13

er... I'm starting to think nobody tried to apply elaborate css instead of .yui's.

Trust me overload all .yui classes is a pain in the ass compare to simply add mine, even with lots of elements.
Even when adding id or class property, I have some foolish comportment in datatable or tabview due to .yui

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

05 Apr 2010, 02:32

If there are more users requesting this feature to disable default skin, we can make this configurable with a context param like primefaces.SKIN = none. But until now this is the first time I heard a complain about this and I think overiding default one is easier to create a skin from scratch. Still I'll keep an eye on forum to hear other comments regarding this topic.

YUI site and PrimeFaces user's guide have full list of CSS skin selectors, there are even graphs to display which style applies where, it is not a black box.

G-rom
Posts: 83
Joined: 16 Mar 2010, 16:20

05 Apr 2010, 17:55

To using it... sometime it s not as clear as crystal. Theory and example always easier than real projects.
And as said, when you have to put in an entire design already made, you're loosing a lot of time searching on YUI instead of just apply CSS as usual.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 24 guests