Mail Css

CSS Theming for Eclipse RCP 3.x

11

Eclipse 4.0 brought a great new feature: Theming RCP applications with CSS. Another good news is, this cool feature can also be used with RCP 3.x based applications. The following screen shot shows the RCP Mail Demo, styled with CSS:

How to run the Demo with CSS styling?

  1. Checkout :pserver:anonymous@dev.eclipse.org:/cvsroot/eclipse/e4/releng
  2. Import Project Set /releng/org.eclipse.e4.ui.releng/e4.ui.css.psf
  3. Checkout e4/org.eclipse.e4.ui/bundles/org.eclipse.e4.ui.widgets (see bug 322641)
  4. Cleanup org.eclipse.e4.ui.css.swt (see bug 322644)
    => Organize Imports
    => Delete dependencies to org.eclipse.e4.core.*
  5. Start the CSS RCP Mail demo (project org.eclipse.e4.ui.examples.css.rcp)

The demo also provides dynamic theme switching. Here is is little excerpt from the defaul.css styling:


CTabItem, Label, Tree, Text {
 font-family: "Arial";
}

Shell {
 font-size: 12;
}

CTabItem, ToolBar, Button, CBanner, CoolBar {
 font-size: 9;
 background-color: white;
}

CTabFolder, CTabItem {
 background-color: #F0F1F7;
}

If you would like to play around with the css, just edit the files css/default.css and css/colorful.css in the project org.eclipse.e4.ui.examples.css.rcp. I have submitted a short talk at Eclipse Summit Europe to explain a few more details.

Have Fun!

Kai
Follow me on Twitter

11 Comments

  1. ilx
    ilx08-17-2010

    It’s nice to see CSS support is getting there, but SWT itself still has a lot of issues.
    For instance, nobody mentions the fact that you can’t change background color of menus.

    Since we’re taking about LnF. Lately I saw the work of Kirill Grouchnikov and remembered a project that implemented SWT on top of the Swing. What happened to that project?

  2. Kai Tödter
    Kai Tödter08-17-2010

    @ilx, unfortunately SWTonSwing and EclipseOnSwing both died. And yes, some things connot be styled right now in SWT, but the SWT team is working on it. On my wishlist are background color (or even better gradients) on the main menu and the table headers…

  3. John Bauer
    John Bauer08-31-2010

    I am trying to follow your example and I keep getting an exception. java.lang.NullPointerException: A null service reference is not allowed.
    at org.eclipse.osgi.framework.internal.core.BundleContextImpl.getService(BundleContextImpl.java:660)
    at org.eclipse.e4.ui.css.swt.internal.theme.BootstrapTheme3x.(BootstrapTheme3x.java:38)
    at org.eclipse.e4.ui.css.swt.internal.theme.BootstrapTheme3x.(BootstrapTheme3x.java:30)

    My guess is that I have something messed up. I am running 3.6.0 Thanks. Looks real cool!

  4. Angelo
    Angelo10-13-2010

    Hi Kay,

    Thank a lot for this post. I would like just add it’s important to add teh “org.eclipse.equinox.ds” Plug-In (and her dependencies bundles) in the launch otherwise if you start the application you will have teh error :

    ———————————————————————————————————-
    java.lang.NullPointerException: A null service reference is not allowed.
    at org.eclipse.osgi.framework.internal.core.BundleContextImpl.getService(BundleContextImpl.java:660)
    at org.eclipse.e4.ui.css.swt.internal.theme.BootstrapTheme3x.(BootstrapTheme3x.java:38)
    at org.eclipse.e4.ui.css.swt.internal.theme.BootstrapTheme3x.(BootstrapTheme3x.java:30)
    ———————————————————————————————————-

    Indead ThemeEngineManager is registered with DS, so you must add DS in the launch.

    Regards Angelo

  5. Our Eclipse Summit Europe « Bonita open source BPM community blog
    Our Eclipse Summit Europe « Bonita open source BPM community blog11-10-2010

    [...] the help of Kai Töedter and his blogpost, Mickael set up the CSS styling of e4 in Bonita Studio, our RCP application based on Eclipse [...]

  6. Jose
    Jose05-31-2011

    Thanks Angelo, i had tha same problem with that NullPointerException but with your explanation at last i can run my RCP Aplication at Eclipse Helios

  7. Jose
    Jose05-31-2011

    hello kai,
    i have a question: Can i change the color of a viewPart-RCP with CSS? i also need to change the color of the main Window of my RCP application.
    Thanks in advance.

  8. Dhaval
    Dhaval03-09-2012

    Please any one can suggest me how to improve UI of RCP application?
    This CSS theming will work on my current application made in eclipse rcp 3.6..?
    Thankx in advance..

  9. Langdon
    Langdon08-19-2012

    I tried to download the source from CSV but it didn’t work; Eclipse shows a Could connect exception.

  10. Langdon
    Langdon08-19-2012

    Eclipse shows a message “Could not connect exception”.

Leave a Reply