Eclipse Community Forums: Eclipse 4 » CSS styling of ETabItems?

Help

Home

Home » Eclipse Projects » Eclipse 4 » CSS styling of ETabItems?

Show: Today's Messages :: Show Polls :: Message Navigator

CSS styling of ETabItems? [message #495440]

Wed, 04 November 2009 21:39

Dave Combs

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 (http://dev.eclipse.org/blogs/kevinmcguire/) 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?)

Thanks!
Dave

Report message to a moderator

Re: CSS styling of ETabItems? [message #495698 is a reply to message #495440]

Thu, 05 November 2009 19:19

Bogdan Gheorghe

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;
background-color:orange;
# 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

Report message to a moderator

Previous Topic:	problems in e4 with opening debug perspective?
Next Topic:	CSS styling of ETabItems?

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Fri Apr 26 20:33:48 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter