Skip to main content

Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse 4 » CSS styling of ETabItems?
CSS styling of ETabItems? [message #564344] Wed, 04 November 2009 21:39 Go to next message
Dave Combs is currently offline Dave CombsFriend
Messages: 21
Registered: July 2009
Junior Member
I'm working on a UI with various tab folders and tab items, and our graphic designers would like to control the look and feel of the tab items. I was able to set the font (size, color) and the tab item background, but not the padding (left, right, top or bottom). I saw an example in a Kevin McGuire blog post ( where he talks about styling a stack and some tab items. He mentions padding-top, padding-bottom, margin-top and margin, and I've been unable to get any of these to actually do anything. I checked out the swt.css tests I found mentioned in another post, but there is no mention of padding anywhere in any of those test files.

Does anybody have any idea how much CSS support there will be in e4 for ETabItems--is what's there now all that we'll get, or are things like padding and margins coming at some point (if so, any idea when?)

Re: CSS styling of ETabItems? [message #564544 is a reply to message #564344] Thu, 05 November 2009 19:19 Go to previous message
Bogdan Gheorghe is currently offline Bogdan GheorgheFriend
Messages: 23
Registered: July 2009
Junior Member
Hi Dave -

Currently there are some property handlers that work on both CTabFolder/ETabFolder + CTabItem/ETabItem and others that work exclusively on ETabFolder + ETabItem. Padding and margins both belong in the latter category - plus you need to enable webby-style on ETabFolder to get this working. If you check out org.eclipse.e4.ui.examples.css and run CSSEditorSWTWidgets, you'll be able to try this out. In that example, the shell contains a bunch of widgets on the left hand side (the bottom 2 are a CTabFolder and an ETabFolder). The example start off with the contents of Example.css in the text area. Uncheck the 'apply style when textarea change' button and paste the following after the CTabFolder styling:

ETabFolder {
webby-style: true;
# tab-margin-offset: 4px;

ETabItem {
#padding-top: 4px;
#padding-bottom: 4px;
#margin-top: 13px;
#margin-left: 2px;
#margin-right: 0px;

Click the "Apply Style" button and notice the change. Uncomment the other lines and hit the Apply Style button to see the effects of the other properties.

In terms of future CSS support and plans for ETabItem: we plan to absorb ETabItem back into CTabItem and would like to provide as much support for customization in CTabItem as possible (much more than is currently available today).

- B
Previous Topic:CSS styling of ETabItems?
Next Topic:Developin e4 in Eclipse 3.6M3
Goto Forum:

Current Time: Sat Jun 23 20:17:31 GMT 2018

Powered by FUDForum. Page generated in 0.02143 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top