Adding CSS to a panel

General
1

I know there are many threads on CSS already, but I couldn’t find what I’m looking for so I hope this question isn’t redundant…

    .v-panel-content-borderless { //modified chameleon borderless-style
     overflow-y: hidden !important;
     overflow-x: hidden !important;
     border: none !important;
    }

That code works perfectly with this StyleName…:

    panel_3.addStyleName("borderless light"); //though css style names don't exactly match

But now I want to add a style to a new panel, which is equal to the above - but does have borders. So I try…:

.v-panel-content-borderless-newStyle { //how to call this style? overflow-y: hidden !important; overflow-x: hidden !important; border: solid !important } …and…

[code]

  panel_3.addStyleName("newStyle");
[/code] //how to call this style?

But that doesn’t work. This should be easy but I’m not successfull.
Basically I want a style that inherits from the “chameleon borderless light” style.

2

Hi Fred.
If you call

panel_3.addStyleName("borderless light");
panel_3.addStyleName("newStyle");

You can access the component by css this way:

.borderless.light.newStyle Just use your web browser and inspect the element (your panel_3) so you will see the generated class names. The rest is just copypasta.

3

Thanks, I’ll follow your tip.
So elements can have multiple CSS styles? What if, in the first style, I say “border: none !important” and in the second style I say “border: solid !important”… what rules apply here?


EDIT:
no the code you propose doesn’t work… I now seem to have a panel without any style (standard looking panel) / it doesn’t inherit from “borderless light”.


EDIT 2:
 Example: I wish to append a new Style to my panel which changes how the caption looks. I try:

    //in css
    .v-panel-caption.newStyle {
    font-style:italic !important;
    }
    //and in java
    panel_3("newStyle");

And that doesn’t work. It looks wrong to me too but I don’t know how to fix it… ?