Styling your UI with css

7.1. Defining the stylesheet

Eclipse e4 allows to style your UI widgets via CSS properties. This is similar to styling webpages with Cascading Style Sheets (CSS) .

To style an Eclipse 4.0 based application you first define a file which contains the styling information. Each UI widget can be addressed via the corresponding CSS class. Colors of widgets can defined via differences ways, e.g. the color white can be described via #white, rgb(255,255,2555) or #ffffff. The Eclipse wiki describes the details of the possible mapping in Eclipse Wiki Entry for SWT Mapping .

It is also to set a data tag for a specific SWT UI element and use this data tag in the CSS. For example you can set the tag for an label via:

    
Label label = new Label(parenet, SWT.NONE);
label.setData("org.eclipse.e4.ui.css.id","MyCSSTagForLabel");
   

This element can be addressed in the CSS via:

    
#MyCSSTagForLabel{
 color:#blue;
}
   

Styling supports gradients for the background color of UI controls. Linear and radial gradients are supported. To define a gradient use:

    
// linear gradient
background-color: gradient linear color_1 [color_2]* [percentage]*

// For example
background-color: gradient linear white black
background-color: gradient linear white black blue
background-color: gradient linear white black 50%
background-color: gradient linear white black 50% 20%

// radial gradient
background-color: gradient linear color_1 color_2 [percentage]

// For example
background-color: gradient radial white black
background-color: gradient radial white black 50%

   

If you use the optional percentage in the definition then the color change will be done after the defined percentage.

7.2. Using the styling

After defining your style sheet you have to tell your application to use it. Here you have two different options.

• Specify the property css on the product

• Use the theme manager

The first approach is simple, you just define the property "applicationCSS" on the product in "plugin.xml" pointing to the file. This way your application will be styled at startup.

The second approach is more flexible but requires a bit more work. You define an extension for the extension point "org.eclipse.e4.ui.css.swt.theme" which basically defines an id and a pointer to the CSS file. You then you define t