Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Customize gwt-togglebutton via css in a vaadin widget
I am using Win10 64bit, vaadin 7.6.8, eclipse 4.6.0
I am developping a vaadin widget, called Uze.
The Widget works.
In this widget i use a GWT-ToggleButton:
com.google.gwt.user.client.ui.ToggleButton boldButton = new ToggleButton("Bold")
How can i customize this GWT-ToggleButton via CSS.
My Themefolder is:
/Uze/src/main/webapp/VAADIN/themes/uzetheme/
- addons.scss
- styles.css
- styles.scss
- uzetheme.scss
i have created in this themefolder the file toggleButton.css with following entries
.gwt-ToggleButton-up {
color:green;
}
.gwt-ToggleButton-down {
color:blue;
}
.gwt-ToggleButton-up-hovering {
color:pink;
}
.gwt-ToggleButton-down-hovering {
color:aqua;
}
.gwt-ToggleButton-up-disabled {
color:lime;
}
.gwt-ToggleButton-down-disabled {
color:maroon;
}
What must i do, that this css-style is working for my GWT-ToggleButton.
To do it the 'correct' way, do the following:
1. rename your file to toggleButton.scss
2. in uzetheme.scss, add the following:
@import "uzetheme.scss";
3. recompile your theme.
Thats it, hope it helps.
p.s. you should wrap your css in a mixin definition, and include the mixin inside the @mixin uzetheme, but this isn't mandatory.
Have a lot of thanks.
It works with a small correction.
I must write in uzetheme.scss:
@import "toggleButton.scss";
What you mean with:
" you should wrap your css in a mixin definition, and include the mixin inside the @mixin uzetheme"
In your case, there is no difference. mixins are used for snippets that might be needed in multiple places, like this:
file 'text-mixins.scss':
@mixin bolded {
font-weight: bold;
color: dark-gray;
}
in file 'yourtheme.scss':
@import "text-mixins.scss"; //this doesn't actually add anything to the result file
.header {
.warning-text {
@include bolded; //this adds the two styles
}
.caption-text {
@include bolded; //so does this
}
}
so, for instance, one of my project style files looks like this:
@import "../valo/valo.scss";
@import "basic_components.scss";
@import "mainview.scss";
@import "calendar.scss";
@import "responsive_menu.scss";
@import "search.scss";
@mixin mytheme {
@include valo;
@include basic_components;
@include mainview;
@include calendar;
@include responsive_menu;
@include search;
//... etc.
We use mixins for better structure in this theme. the mixin allows us to add our theme snippets in the correct order, inside the mytheme brackets.