The user interface for Eclipse 4 is styled with CSS. Although this is loosely based on the CSS syntax used in browsers, the content that can be used is interpreted by the Eclipse 4 runtime. CSS stylesheets are composed of selectors and style rules. A selector can be one of a widget name (for example, Button
), a model class name (for example, .MPartStack
) or an identifier (for example, #PerspectiveSwitcher
).
css/default.css
. Open this file, and add the following rule:Shell { background-color: blue; }
Shell
) will be shown in blue.default.css
file as follows:Shell { background-color: #00FF00; }
default.css
as follows:Shell { background-color: yellow blue; }
default.css
as follows:Shell { background-color: yellow blue 25%; }
default.css
as follows:Shell { background-color: red orange yellow green blue indigo violet 15% 30% 45% 60% 75% 90%; }
com.packtpub.e4.application.part.0
if it is not explicitly specified at creation.Go to the Part in the application viewer to see the ID. To translate it to CSS, use the #
selector and replace .
with –
in the name. To place the rainbow only on that specific part, use this rule instead:
#com-packtpub-e4-application-part-0 { background-color: red orange yellow green blue indigo violet 15% 30% 45% 60% 75% 90%; }
.MPart
, which allows a rule to be targeted to all parts in the UI:.MPart { background-color: red orange yellow green blue indigo violet 15% 30% 45% 60% 75% 90%; }
The default.css
file, created with the application wizard, was modified to explore how to style properties declaratively. Although loosely based on the CSS specification, some differences are apparent. Style selectors can be:
Button
, Label
, and Shell
.MPart
, .MPartStack
, and .MTrimmedWindow
#IDEWindow
, #org-eclipse-jdt-ui-MembersViewMStack
, and #left
There is also a "pseudo selector" which can be used. These apply to certain subsets of the classes:
Shell:active
used for applying styles to the active Shell
Button:checked
used if a Button
is checked:selected
used if a tab folder/item is selectedIn addition, CSS selectors can be combined. For example, to have the same rules applied to .MPart
and an .MPartStack
, use .MPart
, .MPartStack
as a selector. The comma represents "either".
Dependencies can be combined; .MPart Label
will apply to Label
elements which are contained (anywhere) inside an .MPart
.
To restrict it to direct descendants, use Shell > Label
. This will apply only to those Label
elements which are immediately inside a Shell
, but not those Label
elements which exist in Container
instances in the Shell
.
In addition to background-color
, other CSS properties can be used, such as:
alignment
: Used for Buttons
(for example, up
) or Label
(for example left
/right
/center
)border-visible
: Is true
if the border should be shown for CTabFolder
background-image
: An image referenced as a URL url('platform:/plugin/com.packtpub.e4.application/icons/icon.gif')
color
: As with background-color
; names or hex valuesfont
: Used to specify font name (for example, Courier New
) and size (for example, 128px
)font-family
: The font name (for example, Courier New
)font-size
: The font size (for example, 128px
)font-adjust
: The font size adjustment, not supported in 4.2 (CSS3 name is font-size-adjust
, so this may change)font-stretch
: The font stretch size, not supported in 4.2font-style
: Can be italic
, or bold
font-variant
: The font variant, not supported in 4.2 (normal
, small-caps
, and inherit
)font-weight
: The font weight, not supported in 4.2 (normal
, bold
, bolder
, lighter
, and inherit
)—use font-style
insteadmargin
: The space (in pixels) around the content (-top
, -bottom
, -left
, and -right
)maximized
: If the widget is maximized or notminimized
: If the widget is minimized or notpadding
: The space (in pixels) between elements (-top
, -bottom
, -left
, and -right
)text–align
: Can be left
, right
, or center
text-transform
: Can be capitalize
, uppercase
, or lowercase
There are also some Eclipse-specific properties as well:
eclipse-perspective-keyline-color
: The color of perspective lines.swt-background-mode
: The background of the composite to be none
, default
, or force
, corresponding to the Java call Composite.setBackgroundMode(INHERIT_NONE/DEFAULT/FORCE
). This ensures the background of the children either override or inherit their parent's background.swt-corner-radius
: The size (in pixels) of the corner radius.swt-inner-keyline-color
: The color of the inside line of the tabs, drawn by the CTabRenderer
(see swt-tab-renderer
).swt-keyline-color
: The keyline color.swt-maximize-visible
: Is true
or false
if the maximize icon is shown.swt-maximized
: Is true
or false
if the view is maximized (used as a selector)swt-minimize-visible
: Is true
or false
if the minimize icon is shown.swt-minimized
: Is true
or false
if the view is minimized (used as a selector).swt-mru-visible
: Is true
(for "Indigo-like" tab behavior) or false
(default).swt-outer-keyline-color
: The color of the outside line of the tabs, drawn by the CTabRenderer
(see swt-tab-renderer
)swt-selected-tabs-background
: The background color of selected tabs.swt-selected-tab-fill
: The fill color of the selected tab.swt-show-close
: Is true
or false
if the close icon is shown.swt-shadow-visible
: Is true
or false
if the shadow is visible.swt-shadow-color
: The color of shadows, if visible.swt-simple
: Is true
(for "new style" tabs) or false
(for "old style" tabs, default).swt-tab-outline
: Is true
or false
if the tab should have an outline.swt-tab-renderer
: Is null
for classic style, or a class URL like url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/ org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering')
.swt-tab-height
: Height, in pixels, of the tabs.swt-text-align
: Can be left
, right
, up
, down
, center
, lead
, or trail
.swt-unselected-close-visible
: Is true
or false
if the close icon is shown on unselected tabs.swt-unselected-tabs-color
: The color of the unselected tabs.swt-unselected-image-visible
: Is true
or false
if the image is shown on unselected tabs.The reference to the default.css
file is specified in the plugin.xml
; the product property applicationCSS
points to the top-level CSS file. It can also be overridden with command line arguments -applicationCSS
and -applicationCSSResources
, both of which use a URL for identifying the location of the main CSS file and its associated resources.
Eclipse 4 ships with a "theme manager" which can be used to swap between themes (in essence, separate CSS files). The theme manager is available for inclusion in E4 based applications by adding the org.eclipse.e4.ui.css.swt
plug-in as a dependency to the application, and by adding one or more org.eclipse.e4.ui.css.swt.theme
extension points.
To switch between different themes, create a handler that has an org.eclipse.e4.ui.css.swt.theme.IThemeEngine
injected, and invoke engine.setTheme(id,persist)
, where id
is the reference to the theme defined in the extension point, and persist
is a boolean
denoting whether the theme switch should be saved and used by default in the next launch.