How to 'extend' Runo.BUTTON_SMALL css style?

Flow
1

Hey all,

I’m a bit ignorant towards the usage of CSS, that is to say, I don’t really know how to start searching for this particular question.

In short:

I have my own theme I created which inherits from the Runo Theme (@import “…/runo/styles.css”; ).

And in my own styles.css I would like to create a style that inherits all the modifications from the BUTTON_SMALL style from Runo, but overrides certain properties (in my case I want my button to be green instead of grey).

So ehm, any pointers on how to do this?

Thanks in advance!
Pieter

2

Quick’n’dirty example:

// Java
myButton.addStyleName("small");
myButton.addStyleName("green");

// CSS
.v-button-green .v-button-wrap {
   background: green;
   }

Active (down/pressed) state will need it’s own selector and style.

If you need a gradient background, you need to create that image yourself :wink:

3

So it really is as easy as just ‘adding’ multiple stylenames to my component?! :open_mouth:

awesome!

4

Hmmz… seems it doesn’t do the trick…

// Java
myButton.addStyleName(Runo.BUTTON_SMALL);
myButton.addStyleName("green");

// CSS
@import "../runo/styles.css";

.v-button-green .v-button-wrap {
   background: green;
   color: red;
   }

results in a button that looks exactly like the regular 'Runo.BUTTON_SMALL ':frowning:

5

That’s odd, I was able to style them exactly like that. Are you sure the theme gets loaded properly?

6

Hey Jouni,

sorry it took me so long to reply :-/
Anyways, in order to respond to your question, yes, the theme is loading properly. Other modifications are done in a proper way… so I’m still a bit at a loss.

Pieter

7

This time it’s me answering late…

There might be a problem with the specificity of the selectors, causing your selector to be overridden by the Reindeer ones. Can you see your selectors matching the button’s if you look at the button-wrap element with Firebug/Web Inspector?

Here’s the CSS for the small style button (it inherits the normal button styles as well), you can see the selectors used from there:
http://dev.vaadin.com/browser/versions/6.5/WebContent/VAADIN/themes/reindeer/button/button-small-style.css

You could try adding .v-app in from of the selector and see if that cures the specificity:

.v-app .v-button-green {

}

.v-app .v-button-green .v-button-wrap {

}