Customize gwt-togglebutton via css in a vaadin widget

Vaadin 6 / 7 / 8
1

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.

2

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.

3

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"

4

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:

[code]
@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.
[/code]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.

5

a lot of thanks
I see that i must study it