Highlight active MPart tab in Eclipse E4

Question

I'm trying to change the MPart tab background when an MPart is activated and selected. When another MPart from another MPartStack is selected, the style of the first MPart need to be changed back to its default.

When the MPart is selected is should looks like:

But when the MPart is not in focus is should looks like:

I tried different css styling but non of them works. Now all the MParts are always highlighted. My CSS looks like the following:

.MPartStack.active {
    swt-selected-tabs-background: #E5EDFC #99BAF3 100%;
    swt-unselected-tabs-background: #F0F0F0;
}

.MPartStack
{
    swt-selected-tabs-background: #E5EDFC #99BAF3 100%;
    swt-selected-tabs-background: #F0F0F0;
}

.MPartStack.active.noFocus {
    swt-selected-tabs-background: #F0F0F0;
    swt-unselected-tabs-background: #F0F0F0;
}

.MPartStack > CTabItem {
    color : black;
    swt-selected-tabs-background: #E5EDFC #99BAF3 100%;
    swt-selected-tabs-background: #F0F0F0;
}

CTabItem:selected { font-weight: bold; }

I tried everything from another StackOverFlow post but it doesn't work. Can someone help me with this? My customer asks this feature to make the UI more user friendly.

Answer 1

You must set the swt-tab-renderer to make the swt-* properties work:

.MPartStack {
    swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
}

These are the basic settings used by the standard Eclipse rendering:

.MPartStack {
    swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
    swt-selected-tab-fill: INACTIVE_TAB_BG_START INACTIVE_TAB_BG_END 100% 100%;
    swt-unselected-tabs-color: INACTIVE_UNSELECTED_TABS_COLOR_START INACTIVE_UNSELECTED_TABS_COLOR_END 100% 100%;
    swt-outer-keyline-color: INACTIVE_TAB_OUTER_KEYLINE_COLOR;
    swt-inner-keyline-color: INACTIVE_TAB_INNER_KEYLINE_COLOR;
    swt-tab-outline: INACTIVE_TAB_OUTLINE_COLOR;
    padding: 0px 2px 2px;
    swt-shadow-visible: false;
    swt-mru-visible: false;
    color: INACTIVE_TAB_TEXT_COLOR;
}

.MPartStack.active {
    swt-selected-tab-fill: ACTIVE_TAB_BG_START ACTIVE_TAB_BG_END 100% 100%;
    swt-unselected-tabs-color: ACTIVE_UNSELECTED_TABS_COLOR_START ACTIVE_UNSELECTED_TABS_COLOR_END 100% 100%;
    swt-outer-keyline-color: ACTIVE_TAB_OUTER_KEYLINE_COLOR;
    swt-inner-keyline-color: ACTIVE_TAB_INNER_KEYLINE_COLOR;
    swt-tab-outline: ACTIVE_TAB_OUTLINE_COLOR;
    swt-shadow-visible: false;
}

Replace values like INACTIVE_TAB_BG_START with the colors you want.