PDA

View Full Version : Widget with multiple css



LordLuky
26 Jan 2010, 6:57 AM
Hi,

I have two TreePanels and I want them with different selection styles.

in css I can override selected row by


.x-ftree2-selected {
background-color: #aaaaaa !important;
}


but in the second one I need different backroun collor, how can I do that?

Complete style is


x-tree3-el x-ftree2-selected


I traced this issue with firebug, but I cant find way how to replace "x-tree3-el" style with something else.

Lukas

wm003
26 Jan 2010, 7:06 AM
If the second treepanel has an unique id (for example "mysecondtreepanel") you could try:



.x-ftree2-selected {
background-color: #aaaaaa !important;
}

#mysecondtreepanel .x-ftree2-selected {
background-color: #444444 !important;
}

Arno.Nyhm
26 Jan 2010, 7:22 AM
better prepend a classname to your custom declaration and then style you widget with

myWidget1.addStyleName("myFirstStyle");
myWidget2.addStyleName("mySecondStyle");


and define it like this

.myFirstStyle x-tree3-el x-ftree2-selected {
background-color: #444444 !important;
}
.mySecondStyle x-tree3-el x-ftree2-selected {
background-color: #888888 !important;
}

}

LordLuky
26 Jan 2010, 7:59 AM
Thank you all.



#mysecondtreepanel .x-ftree2-selected {
background-color: #444444 !important;
}

and


tree.setId("mysecondtreepanel");

works fine.

The second solution didn't work for me.

Thanks again =D>

Arno.Nyhm
26 Jan 2010, 9:22 AM
then this should also work:



.mysecondtreepanel .x-ftree2-selected {
background-color: #444444 !important;
}
and


tree.addStyleName("mysecondtreepanel");



(and is a little more save, if you place this tree in a window but open the window twice, then you get errors because of the id - this id should be only once.)