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.
Nebula CSS CDateTime
Introduction
This page explains how to use the CSS theming for the CDateTime widget.
Contents
Installation
In you e4 application you can install :
- The plugin org.eclipse.nebula.widgets.cdatetime.css OR
- The feature org.eclipse.nebula.widgets.cdatetime.css.feature
Properties
General Properties
These properties allow the developer to customize the "text" part of the widget.
SWT Method | Impact | CSS Property Name | CSS Example |
---|---|---|---|
setBackground(Color) | Set the bacgkround color of the text part | cdt-background-color | CDateTime { cdt-background-color: #cccccc; } |
setForeground(Color) | Set the foreground color of the text part | cdt-color | CDateTime { cdt-color: black; } |
setFont(Font) | Set the font of the text part | cdt-font | CDateTime { cdt-font: italic 12 bold "Terminal"; } |
cdt-font-style cdt-font-size |
CDateTime { font-style: italic; cdt-font-size: 12; |
Picker part Properties
These properties allow the developer to customize the "picker" part of the widget.
SWT Method | Impact | CSS Property Name | CSS Example |
---|---|---|---|
setPickerBackgroundColor(Color) | Set the bacgkround color of the picker | cdt-picker-background-color | CDateTime { cdt-picker-background-color: #cccccc; } |
setPickerForegroundColor(Color) | Set the foreground color of the picker | cdt-picker-color | CDateTime { cdt-picker-color: black; } |
setPickerFont(Font) | Set the font of the picker | cdt-picker-font | CDateTime { cdt-picker-font: italic 12 bold "Terminal"; } |
cdt-picker-font-style cdt-picker-font-size |
TableCombo { cdt-picker-font-style: italic; cdt-picker-font-size: 12; |
||
setPickerActiveDayColor(Color) | cdt-picker-active-day-color | Set the foreground color for the "active" days | CDateTime { cdt-picker-active-day-color:magenta; } |
setPickerInactiveDayColor(Color) | cdt-picker-inactive-day-color | Set the foreground color for the "inactive" days | CDateTime { cdt-picker-active-day-color: green; } |
setPickerTodayColor(Color) | cdt-picker-today-color | Set the foreground color for today | CDateTime { cdt-picker-today-color: darkblue; } |
Picker for hour selector
These properties allow the developer to customize the "hour selector".
SWT Method | Impact | CSS Property Name | CSS Example |
---|---|---|---|
setPickerMinutesBackgroundColor(Color) | Set the background color of the "minutes" part of the selector | cdt-picker-minutes-background-color | CDateTime { cdt-picker-minutes-background-color: #cccccc; } |
setPickerMinutesColor(Color) | Set the foreground color of the "minutes" part of the selector | cdt-picker-minutes-color | CDateTime { cdt-picker-minutes-background-color: black; } |
Button Properties
These properties allow the developer to customize the buttons of the picker.
SWT Method | Impact | CSS Property Name | CSS Example |
---|---|---|---|
setButtonHoverBackgroundColor(Color) | Set the background color of the buttons when the mouse is over the button | cdt-button-hover-background-color | CDateTime { cdt-button-hover-background-color: #cccccc; } |
setButtonHoverBorderColor(Color) | Set the border color of the buttons when the mouse is over the button | cdt-button-hover-border-color | CDateTime { cdt-button-hover-border-color: black; } |
setButtonSelectedBackgroundColor(Color) | Set the background color of the selected button | cdt-button-selected-background-color | CDateTime { cdt-button-selected-background-color: #cccccc; } |
setButtonSelectedBorderColor(Color) | Set the border color of the selected button | cdt-button-selected-border-color | CDateTime { cdt-button-selected-border-color: black; } |
Examples
An e4 example application called org.eclipse.nebula.widgets.cdatetime.example.e4 shows how to customize the CDateTime widget.
This example is also available here : org.eclipse.nebula.widgets.cdatetime.example.e4