RAP: Adapt Your Style

Home  >>  Eclipse  >>  RAP: Adapt Your Style

RAP: Adapt Your Style

On August 14, 2012, Posted by , In Eclipse, By ,,,, , With 4 Comments

I really like the new RAP default theme introduced with the  RAP 1.5 Release (see New and Noteworthy). It looks much more sophisticated and refined thus making RAP applications look ‘desgned for the web’, rather than ‘ported to the web’ as before.

However, while working on my last customer project, I was looking for a way to customise or adapt the styling to their CI. As soon as I added the green colored logo to the main form of my application, I knew that I had to change something – even if the green colors did not exactly clash with the rest of the form, the logo seemed outplaced and not part of the form. So I looked arround at ways to change the styling.

My first changes were easy: I changed the color of my separator line and played arround with the background colors of my Composites and Widgets – all using the SWT/RWT API. But as soon as I added a checked box on my form I quickly realised the limits of this approach: The tick of the checkbox is blue, and there is no way to change this programatically. I needed another plan of attack.

Looking around, a friend pointed me to an easy way to override single css classes from the default theme. The concept is as simple as powerful: using the ‘themeContribution’ extension point (org.eclipse.rap.ui.themes) I could add a css file that contains one or more css classes that are used by the default RAP UI theme. Such contributed css class definitions are added to the css file distributed as part of the RAP framework, and since they are magically placed at the bottom of this file, these additions actually override the original RAP css entries.
An example:
The original css entry that defines the image used for the check box:

Button-CheckIcon:selected {
  background-image: url( images/check-selected.png );
}

Steps to override this image:

  1. I copied the original image, renamed it accordingly. For better visibility, I chose to change the colour of the tick to red in this example.
  2. I created a new css file in my project that I contributed to the default theme using the following extension:
    <extension point="org.eclipse.rap.ui.themes">
      <themeContribution
        file="css/my.css"
        themeId="org.eclipse.rap.rwt.theme.Default" />
    </extension>
  3. I added the following css entry in my.css:
    Button-CheckIcon:selected {
      background-image: url( images/check-selected_red.png );
    }
  4. I changed the build,properties of my project to include the image folder and the css folder in the binary build.
See also  Speed up Your Builds with Codeship Parallel Test Pipelines

Here you can see the difference:

Original my red version

Of course simply changing one image is not enough, you also need to change other images, like ‘Button-CheckIcon:selected:hover’.

Here is a more elaborated example from a recent project – the same code, one without and one with css contributions. First the ‘default’ version:

And here the ‘pimped’ css style:

One last hint to help you in customising your style: the original css definition can be found here: default.css.

Enjoy adapting your style!

 

Samy Abou-Shama
Latest posts by Samy Abou-Shama (see all)

4 Comments so far:

  1. Stefan says:

    Hi Samy, interesting reading. Btw, do I still need to restart the server to make changes to the css visible in the app?

  2. Rolando says:

    how can I change the theme of the messages shown in rap

  3. Rüdiger Herrmann says:

    Rolando,
    messages like “Network Error” or “Session Timeout” cannot be styled, or which messages do you refer to?