28 June 2012

Fixing Editor Tab Fonts in Eclipse Juno

Eclipse Juno is out! It starts a good deal faster than Indigo, shows a more colourful (but ill-proportioned) splash screen, and then opens a workbench window with oversized and truncated labels in all editor tabs.

This applies to Ubuntu 12.04 with KDE and the QtCurve GTK+ theme.
This issue is not due to QtCurve or SWT, as I had first suspected, but to the new CSS-based widget styling of the e4 platform. There is an E4 CSS Editor which is not included in Juno by default, but can be installed via the Update Manager.

With this editor, you can change the font-size and font-family properties of the MPartStack style used by the editor tabs.
Much better!

Update 14 Aug 2012: If you develop web applications and edit CSS files in Eclipse, you'd better deinstall the E4 CSS editor after customizing the workbench layout to fall back to the standard WTP CSS editor. The XText-based E4 editor does not recognize some legal syntax like unquoted URLs.

Actually, you don't need any Eclipse plugin to change the CSS, you can directly edit the CSS file in your Eclipse installation at plugins/org.eclipse.platform_4.2.0.v20120608140/css/e4_default_gtk.css.



8 comments:

Alik Elzin said...

I can't see the css - just a Theme dropdown and 'enable animations' checkbox.

Harald Wellmann said...

@Alik: You need to install the E4 CSS Editor plugin.

Alik Elzin said...

Stupid of me. Thanks.

Unknown said...

Hi, Thanks for this tip. Maybe you have somemthing for this horizontal strip above icons, it looks really bad (for me).

Harald Wellmann said...

To remove the toolbar background image, delete the following style:

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

Unknown said...

Thanks, now my Eclipse looks really nice.
Additionally, I've changed:

.MTrimBar {
background-color: #C9C9CA;
}

to make background color the same as menu bar in Oxygene theme.

Sérgio Silva said...

Hi!

Do you know if it is possible to change the height and shape of tabs with CSS ?

Thnks!

Harald Wellmann said...

Here's another trick to hide the Quick Access field from the toolbar

#SearchField {
visibility: hidden;
}