Styling widgets

The default CSS style of a custom widget is based on the GWT style. In this recipe, we will show how to change it. As shown in the following screenshot, we will make a simple change. The label of the counter is aligned at the bottom and has a gray color.

Getting ready

We create a widget text field with a counter as described in the Creating a TextField with counter recipe.

How to do it...

Carry out the following steps to learn how to style a widget:

1. In the constructor of the CountedTextFieldWidget class, we set the primary CSS style name of each widget because we want to set a new style for a specific widget. The name consists of a base style name plus a general name of the widget separated by a dash.

   public CountedTextFieldWidget() {
     setStylePrimaryName(CLASSNAME);
     textBox.setStylePrimaryName(CLASSNAME + "-field");
     countLabel.setStylePrimaryName(CLASSNAME + "-label");
     …
   }

2. On the same level as the *.gwt.xml file, we create the public/countedtextfield/styles.css folder with...