Eclipse Zone is brought to you in partnership with:

Wayne Beaton is employed by The Eclipse Foundation where he works as an evangelist, spreading the word and helping folks adopt Eclipse technologies. Wayne has extensive experience in object-oriented software development and is a strong proponent of refactoring, unit testing, and agile development methodologies. He is also the editor-in-chief of Eclipse Corner, PMC Lead for the Technology Project, Project Lead for the Examples Project, and an advisor for osbootcamp. In 1982, he received the prestigious Chief Scouts Award from then-Governor General Edward Schreyer. In 1984 his team was selected to represent beautiful British Columbia in the Kinsmen Voyageur Relay. In his spare time, he writes down meaningless accomplishments from his youth in a lame attempt to impress the reader. Wayne is a DZone MVB and is not an employee of DZone and has posted 77 posts at DZone. You can read more from them at their website. View Full User Profile

Editing the Eclipse 4 Workbench CSS

  • submit to reddit

The overall look of Eclipse 4 is controlled with CSS stylesheets. The CSS files take the same form as those for a browser, but underlying model is understandably different. Minimally, this means that the names of the things you can play with are different. Additionally, there are a few extra things you can play with to tweak the behaviour. I’m just starting to wade into, so please consider this a start of a discovery log rather than any sort of authoritative “how to”.

Unfortunately, the documentation on Eclipse 4 CSS is a little scant. The underlying model, which can be used to sort out the names of the various model elements in the workbench, is captured in the Eclipse wiki. There is also some information regarding how various CSS properties map to SWT widgets.

I started by locating the actual CSS files themselves. They’re found in the org.eclipse.platform bundle which is located in the “R4_HEAD” branch of the eclipse.platform git repository. I decided to fork the GitHub clone of this repository and work in that fork. The CSS files are in the ./platform/org.eclipse.platform/css directory.

I cloned the repository locally, checked out the the “R4_HEAD” branch, loaded–with a little help from EGit–the org.eclipse.platform plug-in project, and navigated to the GTK CSS file (I’m running Fedora 14 Linux).

From here, I started playing. The CSS editor component provided by the Web Tools’ Source Editing Project provides considerable help for standard sorts of CSS things (i.e. the stuff supported by browsers like background colours). I took additional inspiration from the other CSS files. The first thing I did was remove the background image on the workbench window’s toolbar and replaced it with a solid color (Bug 372448). While I was at it, I changed the background colour of the ToolBar widgets to the same colour:

.MTrimBar#org-eclipse-ui-main-toolbar {
background-color: #E2E2E2;

.MTrimBar#org-eclipse-ui-main-toolbar ToolBar {
background-color: #E2E2E2;

The “.MTrimBar” model element represents the various holders of tool bars in the workbench, including the main window as well as view/editor stacks. Adding “#org-eclipse-ui-main-toolbar” focuses the style properties on the main window tool bar. The first entry applies to the tool bar area itself. The second entry applies to the SWT ToolBar instances contained within the tool bar area. I may be getting some of the names mixed up.

To test the changes, I launched an instance of Eclipse using the modified plug-in in my workspace with the default target. I discovered that I was able to test some changes without requiring a restart by instead just changing the theme in the preferences (i.e. switch the theme and then switch back).

Unfortunately, some changes require a restart to test. I believe that this is a point-in-time problem, and I’m planning to open bugs to address specific issues that I uncover.

I did discover some ongoing work in the E4 Incubator project to provide a Xtext-based CSS editor (you may notice the little Xtext nature decoration on the project icon). It provides a little more content assist help, but doesn’t provide much help with the edit/test cycle.

I’m thinking that just having a “Reapply current theme CSS” command might be enough to make the edit/test cycle bearable. That shouldn’t be too hard to build. I’ll let you know how it turns out.

Published at DZone with permission of Wayne Beaton, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Thomas Eichberger replied on Tue, 2012/03/13 - 3:18am

Thanks for the info. Hope, you will share more with us :-)

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.