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

Nebula CSS CDateTime

Revision as of 09:42, 9 March 2020 by Laurent.caron.gmail.com (Talk | contribs) (Created page with "< Back to Nebula Main Page ==Introduction== File:Cdt3.png This page explains how to use the CSS theming for the '''CDateTime''' widget. __TOC__ ==Installat...")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

< Back to Nebula Main Page

Introduction

Cdt3.png

This page explains how to use the CSS theming for the CDateTime widget.

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

Cdt1.png

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
cdt-font-weight

cdt-font-family
CDateTime { font-style: italic;

          cdt-font-size: 12;
          cdt-font-weight: bold;

          cdt-font-family: "Terminal"; }


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
cdt-picker-font-weight

cdt-picker-font-family
TableCombo { cdt-picker-font-style: italic;

          cdt-picker-font-size: 12;
          cdt-picker-font-weight: bold;

          cdt-picker-font-family: "Terminal"; }
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

Cdt2.png

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

Back to the top