Changing button style in Reindeer

Flow
1

Hey guys,
i’m very new to vaadin, but created my first page and so im very happy. I am working with style Reindeer. Now i want to change the style of my buttons like the left menu bar in dashboard example.
My problem is that i only could change the whole theme to dashboard theme, but i only want the buttons.

i made my own theme and include both (Reindeer and Dashboard) but that didnt work. I also tried to exclude nativebutton from Reindeer and include the nativebutton from Dashboard, which did not work either.

Is there a simple way to get my own buttons?

my theme.scss atm looks like:

/* Import the reindeer theme./
/ This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import “…/dashboard/dashboard.scss”;
@import “…/reindeer/reindeer.scss”;
@import “mixins.scss”;

/* This contains all of your theme./
/ If somebody wants to extend the theme she will include this mixin. /
@mixin probetheme {
/ Include all the styles from the reindeer theme */
@include reindeer;

/* Insert your theme rules here */
}

Sorry Im at the beginning of these style editings.
Greetz

// working with Vaadin 7.1.9

2

Did you have a look at
this
 and
this
 page?
Basically where you have the /* Insert your theme rules here */ you put the rules you want from the dashboard scss. So you look through the scss file and then pick the ones (probably the .v-button-… ones when you want to change a button) and include them in your own theme scss.

3

Hi,

You should start by copy-pasting the contents of reindeer.scss, and deleting the line where it says
@include reindeer-button
. Place that new reindeer.scss file in your theme folder and import that instead of the original.

That way you can include everything else but the reindeer styled button.

Then, just add the line
@include dashboard-button;
 in place of
/* insert your theme rules here */

That should get you quite far. Just ask if you need more help!