Posted by: Brian de Alwis | October 25, 2012

Eclipse 4 CSS Tips: Restore sanity to Eclipse

One of the great things about Eclipse 4’s CSS support is that you can use it to tweak the Eclipse UI with very little effort. I previously spent hours to navigate internals to craft little hacks to tweak the environment to my liking; now I write CSS. Add these CSS snippets using the lightweight CSS editor (some installation required).

Editor Tab Order

Like many, I hate the new behaviour of our editor tabs: rather than the sensible most-recently-used order, its behaviour is actually modelled on web browser tabs, which many people seem to like. The MRU behaviour can be brought back with the following CSS:

#org-eclipse-ui-editorss { swt-mru-visible: true; }

This uses a custom SWT property.
Note: the double “s” is not a typo.

Make the Quick Access go away

I’ve actually come to like the Quick Access bar, but many don’t. CSS can make it disappear:

#SearchField { visibility: hidden; }

So how does one find these options?

Eclipse 4’s SWT-CSS supports many of the standard CSS 2.1 properties, and also includes many custom properties too.

The easiest way to discover these elements and properties is to use the CSS Spy: simply hover over the element, invoke the Spy using its hotkey, and walk up the widget hierarchy, looking at the the CSS Id column, to identify the container.

(Note: the CSS Spy is normally invoked using Shift-Alt-F4, but Windows seems to ignore the Shift and helpfully closes the current window. You can remap the Spy to a different keystroke using Preferences → General → Keys.)

What tweaks have you tried?


  1. Hi Brian,

    This is great. There are quite a few things here that I’d like to tweak. Switching to single tab mode is top priority for me.

    • Such a tweak’s is listed at the Eclipse 4 CSS wiki page

      • Yeah…saw that. Just tried it out and it’s not doing quite what I expected. The reason why I like single tab mode is that it lets you see the full path of the file in the editor (or at least it does on 3.x). Now, even with single tab mode on, I still see the simple file name with no path. Is there another piece of css magic that I need?

      • The workspace-relative path is shown in the window title.

  2. Andrew, that’s a bug. We’ll use

  3. If you want to customize theme more simply, Try

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s