Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Eclipse4/CSS/Bridge

The CSS bridge

The main goal of the bridge is supporting the 3.x themes in the CSS style sheets. We can use the 3.x theme element definitions in our CSS file in one of the following ways:

Important! Due to some SAC parser limitations we have to replace all 'dots' in the element ids supported by the bridge with 'dashes'
  • Using the ColorDefinition in the CSS file
The ColorDefinitions are processed as the custom color values and can be use in all color related CSS proproperties, that we support
   .MPartStack.active.noFocus {
	swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START' 
                               '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END' 100% 100%;
   }
Usage of color definition.png
  • Using the FontDefinition in the CSS file
The FontDefinitions are processed as the custom font family
   .MPartStack.active.noFocus {
	swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START' 
                               '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END' 100% 100%;
        font-family: '#org-eclipse-jface-bannerfont';
   }
Usage of font definition.png


By default all font parameters are retrieved from the FontDefinition, but user can override the font's parameters
   .MPartStack.active.noFocus {
	swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START' 
                               '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END' 100% 100%;
        font-family: '#org-eclipse-jface-bannerfont';
        font-size: 7px;
        font-style: italic;
   }
Usage of font definition overriding font params.png
  • Overriding the ColorDefinition in the CSS file
   ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START {
	color: white;
   }
 
   .MPartStack.active.noFocus {
	swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START' 
                               '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END' 100% 100%;
   }
Basic overriding of color definition.png


The user can also modify the category, label or description of the definition. Currently we don't support the globalization of labels and descriptions
   ColorDefinition#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START {
	color: white;
	category: '#org-eclipse-debug-ui-presentation';
	label: 'The brand new label';
	description: 'Some description';
   }
 
   .MPartStack.active.noFocus {
	swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_START' 
                               '#org-eclipse-ui-workbench-ACTIVE_NOFOCUS_TAB_BG_END' 100% 100%;
   }
Advanced overriding of color definition.png

Back to the top