Eclipse 4.0 – So you can theme me Part 1


One of the nice things of Eclipse 4.0 is that you can change its Look & Feel using CSS. In this blog post you’ll learn how you can write your own theme and use it in our workbench.

The Eclipse 4.0 SDK comes along with 3 themes (on WinXP with 4 and Win7 with 5):

  • %OS-Default%: Default theme which should blend best into your OS-System
  • Default Theme: A standard theme
  • Win XP Classic: 3.x L&F for this who don’t like the new tabs

If you are not happy with any of them you are able to tweak the layout of the running Eclipse Version by writing your own theme. You might say that this has been possible already in 3.x by writing your own presentation and you are right but for that you would have to make yourself familiar with the Presentation-API.

The setup

To start developing themes for Eclipse 4.0 you naturally have to download Eclipse 4.0 SDK following this link and afterwards we should install the source bundles for the following features:

  • E4 UI > Eclipse E4 UI CSS Source
  • E4 UI > Eclipse e4 Modeled Workbench Source

Project-Creation/Configuration

Afterwards create an OSGi-Projekt (a plain one without any dependencies and no Activator) all we do here is to use an extension point to contribute a CSS-File and add “org.eclipse.e4.ui.css.swt.theme” as the only “Required Plug-in”.

Create a folder in the project named “css” and create a text file named “mytheme.css”. Your workspace should look like this now:

Contributing Theme

To contribute a theme we are using an extension point named “org.eclipse.e4.ui.css.swt.theme” which allows us to contribute 2 different things:

  • theme: A theme is made up of at least one CSS file (the basestyle) and an unbound number of contributed stylesheets.
  • stylesheet: Plug-in developers are able to contribute CSS-stylesheets to existing themes so that their own component blends best into the base theme

Our aim is to create a new theme and so we enter the following informations:

  • id: mytheme
  • label: My Custom Theme
  • basestylesheeturi: css/mytheme.css
  • os: <empty>
  • ws: <empty>
  • os_version: <empty>


The values os, ws and os_version are worth explain. Using those fields allows you to filter out specific operationsystems, windowingsystems, operatingsystem-version.
This feature is used for example by the Eclipse 4.0 workbench to contribute multiple styles with the same id but because the platform filter differs only one of them is really showing ups in the registered themes in the end.

Defining a theme

Let’s use the CSS-Definition for Win7 as a starting point for our themeing:


.MTrimmedWindow { 
    background-color: #E1E6F6; 
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

.MTrimmedWindow.topLevel { 
    margin-top: 24px;
    margin-bottom: 2px;
    margin-left: 12px;
    margin-right: 12px;
}

.MPartStack {
    tab-renderer: url('platform:/plugin/org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
    unselected-tabs-color: #FFFFFF #FFFFFF #FFFFFF 100% 100%;
    outer-keyline-color: #FFFFFF;
	inner-keyline-color: #FFFFFF;
	font-size: 9;
	font-family: 'Segoe UI';
	simple: true;
}

.MTrimBar {
    background-color: #E1E6F6; 
}

.MTrimBar#org-eclipse-ui-main-toolbar {
    background-image:  url(./win7.PNG);	
}

.MPartStack.active {
	unselected-tabs-color: #F3F9FF #D0DFEE #CEDDED #CEDDED #D2E1F0 #D2E1F0 #FFFFFF 20% 45% 60% 70% 100% 100%;
    outer-keyline-color: #B6BCCC;
	inner-keyline-color: #FFFFFF;
}

#PerspectiveSwitcher  {
	background-color: #F5F7FC #E1E6F6 100%;
}

Just copy this to your mytheme.css. If you now launch an Inner Eclipse and open the Appearance-PreferencePage you should be able to select a your “My Custom Theme” and the application in the background will immediatly change its L&F and on my OS-X look like this:

The first thing I we’d like to change is the margin on the main-window which is at least in my eyes a little bit too large. So we modify the margin settings in “MTrimmedWindow.topLevel” to

.MTrimmedWindow.topLevel { 
    margin-top: 12px;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
}

Next thing we are customizing is the background color of our window which is controlled by .MTrimmedWindow

.MTrimmedWindow { 
    background-color: #293955; 
    /*  */
}

Next on our list is the background of our top-trim (which shows the Toolbar and the perspective switcher) and the left/right trim used to show minized stacks.

.MTrimBar {
    background-color: #405579;
}

.MTrimBar#org-eclipse-ui-main-toolbar {
    background-color: #d9e3f3 rgb(170, 176, 191) 100%;
}

#PerspectiveSwitcher  {
	background-color: #d9e3f3 rgb(170, 176, 191) 100%;
}

The definition of the background-color of the top-trim and the Perspective-Switcher is interesting because we define there a linear gradient.

The final change we make is the background color of the active tabs:

.MPartStack.active {
  unselected-tabs-color: #eef0f3 #ced4df #ced4df #FFFFFF 90% 100% 100%;
  outer-keyline-color: #eef0f3;
  inner-keyline-color: #FFFFFF;
}

When launching our Inner Eclipse the next time it should look like this:

You see you can with some very easy changes influence the L&F of the Eclipse workbench. Still there are some things I haven’t been able to style yet:

  • Line drawn between PerspectiveSwitcher and Toolbar
  • Items in the StatusBar (I’d like to give them a white foreground-color)
  • Background of the ActiveTab – only the unselected tabs are themeable

In the 2nd part of this series we are going to implement our own TabRenderer to customize the L&F of the Tabs even more.

I’ve started a small project named e4themes over at eclipselabs which holds some themes.

About these ads

8 Responses to “Eclipse 4.0 – So you can theme me Part 1”

  1. Great! I liked this post! Looks like Visual Studio! When will part 2 come? :-)

    Note: Eclipse 4.1 seems to draw the editors strangely different, the mix/max buttons are in a separate line above the editor tabs. Here, the dark background is used as shadow, which looks like a graphic error… But anyways, thx!

    • I know we are working on this but the EditorArea in Eclipse 4 is a bit different to the one in 3.x and that’s why it is represented a bit different (though the current L&F is definately how it looks like when we ship 4.1).

  2. this tutorial is brill!
    I am currently doing a project on customisation of eclipse v4. I am wondering is part 2 up for the customisation of L&F? If so where can I find it?

  3. Hm, for me, this does not work with Eclipse 4.2RC3 (on Linux) – it keeps telling me “No schema found for the org.eclipse.e4.ui.css.swt.theme extension point”… org.eclipse.e4.ui.css.swt.theme.source is installed though – do the ..swt.theme and ..swt.theme.source versions need to correspond?

  4. The active tab background can be themed. Following is from: http://wiki.eclipse.org/Eclipse4/CSS#Using_GUI_Style_Editor

    .MPartStack {
    swt-tab-renderer: null;
    swt-selected-tabs-background: #FFFFFF #ECE9D8 100%;
    swt-simple: true;
    swt-mru-visible: true;
    }

    this -> swt-tab-renderer: null; swt-selected-tabs-background: #FFFFFF #ECE9D8 100%; <- is the line where background color of active tab may be changed. The first color id ("#FFFFFF" shown in the line from above) is for the edge/fade color and the second color id ("#ECE9D8" shown in the line from above) is for the main color of the active tab.

    Peace

  5. Hi Tom,

    is there a possibilty to disable/hidden the PerspectiveSwitcher openPerspektiveButton (the button with the yellow plus) via css?

    #PerspectiveSwitcher {
    background-color: #F5F7FC #E1E6F6 100%;
    }

    Thanks Michael

  6. Hi Tom,
    I’m having some trouble following your tutorial, especially the following sentence makes little sense to me “Afterwards create an OSGi-Projekt ” during project creation.

    When I do this, eclipse doesn’t allow me to work with extensions. I can add “org.eclipse.e4.ui.css.swt.theme” as the only required Plug-in, but after this I cannot set any “Extension Element Details”. The only way I can manipulate the extension element details is if I choose “Eclipse version 3.5″ as the target for the plugin during project creation but that doesn’t work. The plugin is created, but when I select it as a theme under “Appearance” nothing happens, no change to the UI.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 740 other followers

%d bloggers like this: