An interface theme is used to configure the appearance of Adelia Cloud applications. The interface themes are written in LESS and dynamically compiled during use.
A user theme is an extension of the basic theme supplied with Adelia Studio. It can be modified via global variables which change the colour, gradation and appearance of control borders and through the introduction of more complex rules requiring a mastery of CSS language and the structure of Adelia CSS.
An interface theme is provided in a tree structure containing the following items:
|
|
|
|
|
.less file directory. |
|
|
Image resources for the theme (suggestion). |
|
|
Theme description file. |
The required items are the "theme.properties" file which contains the description of the theme and the "css" sub-tree structure which contains the files added when compiling the default theme css resources. The rest of the tree structure is free.
The main principle is to copy all the default Adelia theme resources into a temporary directory, overlay the theme resources and compile the resulting theme. Normally speaking, a user theme should only provide one or two files: "custom_variables.less" grouping the default redefinitions of the basic variables (colours/borders) of the theme, and as an option "custom_rules.less" grouping the explicit css rules created after the default theme rules.
Save a theme
The interface themes are saved in the "themes.properties" file (adeliaThemeConfig JNDI resource) which is a java properties file containing key/value pairs (internal theme name/basic directory relating to the application root).
Example:
windows=themes/windows
adelia=themes/adelia
hardis=themes/hardis
reflex=themes/reflex
blue=themes/blue
rounded=themes/rounded
Theme description file
The theme description file contains the internationalised theme resources (designation, description) and can also reference the parameters of the desktop background image.
This file must be called "theme.properties" and be installed at the root of the theme's tree structure.
Name of key |
Description |
name[_countrycode] |
External name of the theme as displayed in the interface. The key can be suffixed by a country code to internationalise the file. |
description[_countrycode] |
Theme description. |
background |
File name of image used as desktop background. The file name must be provided in relation to the theme tree structure root (optional). |
backgroundPos |
Background position. The possible values are "cover", "contain", "mosaic", "centre" and "stretch" - "stretch" by default. (optional). |
↑ Top of page
Theme CSS
The CSS sub-directory contains all the resources which will be copied over the Adelia default resources before theme compilation.
The Adelia themes are written in LESS-CSS language. The user themes are compiled dynamically after being reconstituted by merging the theme resources with the basic theme supplied with Adelia.
Despite the theme software engineer having a free rein here, it is recommended that the Adelia theme be expanded by supplying one or both of the resource files for this purpose, i.e.:
File |
Description |
custom_variables.less |
File intended to reference theme variable overloads (mainly colours and border descriptions). This file can also reference specific CSS rules which will be interpreted before the basic rules associated with Adelia controls. |
custom_rules.less |
File intended to reference specific CSS rules which will be interpreted after the basic rules associated with Adelia controls (and will therefore take priority over them). |
These two files are present but blank in the theme by default. Their planned destination is only a recommendation. You can define your choice of destination. One of the files is included at the beginning during compilation, the other at the end.
Caution:
The final CSS is provided by a specific provider and not loaded from the theme tree structure. This means that if the theme references image resources in "url"-type rules, this URL must not be provided relating to the CSS file as is ordinarily the case.
The @AdeliaResourcePath and @ThemeResourcePath variables are provided and point to the default theme resources root (/js/adelia) and to the theme resources root respectively (depending on how it is installed, if you follow the recommendations: /themes/internalthemename).
For example, a <background-image: url("../images/img.gif")> classic rule must be expressed in <background-image: url("@{ThemeResourcePath}/images/img.gif")> format.
Basic variables
These variables define the access to the theme resources.
Variable |
Default value |
Description |
@AdeliaResourcePath |
/js/adelia |
Access to the Adelia default basic theme resources. |
@ThemeResourcePath |
n/a |
Access to the theme resources (points to the root directory). |
Variables allowing to define basic colours
This reduced set of variables globally defines the colours of the major element classes.
Variable |
Default value |
Description |
@Adel3DBackground |
#f0f0f0 |
3D element background colour (dialogues, buttons, static controls, etc.) |
@Adel3DText |
#030303 |
3D element text colour. |
@AdelWindowBackground |
#ffffff |
Input-type elements background colour (entry fields, combo, lists, etc.) |
@AdelWindowText |
#030303 |
Input-type element text colour. |
@AdelInfoBackground |
#ffffe1 |
Tooltip background colour. |
@AdelInfoText |
#030303 |
Tooltip text colour. |
@AdelHilight |
#3399ff |
Selected text background colour. |
@AdelHilightText |
#ffffff |
Selected text colour. |
@AdelGrayText |
#2d2d2d |
Greyed out control text colour. |
All the browser system colours (colours sent by VaToolBxGetSysColor) are redefined in the form of a LESS variable. The default theme maintains consistency between the basic Adelia colours and these variables (which no longer necessarily follow the system but the Adelia theme). For example, GrayText is replaced by @GrayText.
It is not guaranteed that a theme redefining the colours of a particular control group will maintain consistency between the colours sent by GetSysColor and the colours actually displayed. If only the basic colours are changed, this consistency will be maintained.
Variables for defining the colors of the selected elements.
This set of variables globally defines the colors of the elements selected in the controls displaying element lists (MENU, LIST, COMBO_BOX, TREE_VIEW, TREE_LIST, MENU_BAR, ACCORDION_MENU).
Variable |
Default value |
Description |
@AdelSelectionBorderRadius |
2px |
Defines a radius on the selections/hover effects. |
@AdelInactiveSelectionBackground |
#d9d9d9 |
Background color of selected elements in inactive controls (no focus). |
@AdelInactiveSelectionText |
#030303 |
Text color of selected elements in inactive controls. |
@AdelPopupSelectionBackground |
#91C9F7 |
Background color of selected elements in popups (MENU, COMBO_BOX). |
@AdelPopupSelectionText |
#030303 |
Text color of selected elements in popups. |
@AdelSelectionBackground |
#CCE8FF |
Background color of selected elements in lists and tree views (LIST, TREE_VIEW, TREE_LIST, ACCORDION_MENU). |
@AdelSelectionText |
#030303 |
Text background color of selected elements in lists and tree views. |
@AdelHoverBackground |
#E5F3FF |
Background color of highlighted elements in lists and tree views. |
@AdelHoverText |
#030303 |
Text color of highlighted elements in lists and tree views. |
| @AdelMenuPadding | 6px | Default inner margins (padding) of MENU_BAR and ACCORDION_MENU object menu elements. |
Note: variables used to overload the color of the selected elements in the LIST and ACCORDION_MENU remain supported and are pre-filled with the global values. Using them, however, is not recommended for interface consistency reasons.
The variables described below allow to change the appearance of the following elements:
Window and tabs
These variables allow to modify the basic colours of a window (active or inactive).
Variable |
Default value |
Description |
@ActiveBorder |
darken(@Adel3DBackground, 20) |
Border colour of active window. |
@ActiveCaption |
#99b4d1 |
Caption background colour of active window. |
@CaptionText |
#030303 |
Caption text colour of active window. |
@ActiveCaptionGradient |
0 |
Angle of the gradient applied to the active window caption. |
@ActiveCaptionLighten |
5 |
Percentage applied to the gradient lightening. |
@InactiveBorder |
lighten(@Adel3DBackground, 5) |
Border colour of inactive window. |
@InactiveCaption |
#bfcddb |
Caption background colour of inactive window. |
@InactiveCaptionText |
#434e54 |
Caption text colour of inactive window. |
@InactiveCaptionGradient |
0 |
Angle of the gradient applied to the inactive window caption. |
@InactiveCaptionLighten |
5 |
Percentage applied to the gradient lightening. |
@Window |
@AdelWindowBackground |
Window background colour. |
@WindowFrame |
@ActiveBorder |
Border colour of active window. |
@WindowText |
@AdelWindowText |
Window text colour. |
@WindowGradient |
none |
Angle of the gradient applied to the window background. |
@WindowLighten |
5 |
Percentage applied to the gradient lightening. |
@Dialog |
@Adel3DBackground |
Dialog box background colour. |
@DialogMDIFrame |
@AdelAppWorkspace |
MDI frame background colour. |
@DialogText |
@Adel3DText |
Dialog box text colour. |
@DialogGradient |
none |
Angle of the gradient applied to the dialog box background. |
@DialogLighten |
5 |
Percentage applied to the gradient lightening. |
@PhantomResizeBorderWidth |
4px |
Frame width when resizing a window in phantom mode. |
@PhantomResizeBorderStyle |
solid |
Line style when resizing a window in phantom mode. |
@PhantomResizeBorderColor |
darken(@ActiveBorder, 30) |
Line color when resizing a window in phantom mode. |
@TabButton |
@Adel3DBackground |
Tab button background colour. |
@TabButtonText |
@Adel3DText |
Tab button text colour. |
@TabButtonGradient |
none |
Angle of the gradient applied to the tab button background. |
@TabButtonLighten |
10 |
Percentage applied to the gradient lightening. |
@TabButtonBorderRadius |
0.2em |
Tab button border radius. |
@TabButtonBorderColor |
@ThreeDFace |
Tab button border colour. |
@TabButtonBorderSize |
2px |
Tab button border size. |
@TabButtonBorderStyle |
outset |
Tab button border style. |
@TabButtonBoxShadow |
none |
Tab button shadow. |
@Tab |
@Adel3DBackground |
Tab background colour. |
@TabText |
@Adel3DText |
Tab text colour. |
@TabGradient |
none |
Angle of the gradient applied to the tab background. |
@TabLighten |
10 |
Percentage applied to the gradient lightening. |
@TabBorderRadius |
0.2em |
Tab border radius. |
@TabBorderColor |
@ThreeDHighlight |
Tab border colour. |
@TabBorderSize |
2px |
Tab border size. |
@TabBorderStyle |
outset |
Tab border style. |
@TabBoxShadow |
none |
Tab shadow. |
↑ Top of page
Static control borders
These variables provide basic values for the borders of Windows static controls. The default value corresponds to the control which has the "WS_EX_STATICEDGE" style. These variables serve as a basis for implementation of borders for the controls which have the "Border" and "Static border" styles or equivalent styles.
Variable |
Default value |
Description |
@BaseBorderRadius |
0 |
Static control border radius. |
@BaseBorderStyle |
ridge groove groove ridge |
Static control border style. |
@BaseBorderColor |
@ThreeDShadow @ThreeDHighlight @ThreeDHighlight @ThreeDShadow |
Static control border colour. |
↑ Top of page
Tooltips
These variables allows to modify tooltip colours.
Variable |
Default value |
Description |
@Info |
@AdelInfoBackground |
Tooltip background colour. |
@InfoGradient |
0 |
Angle of the gradient applied to the tooltip background. |
@InfoLighten |
5 |
Percentage applied to the gradient lightening. |
@InfoText |
@AdelInfoText |
Tooltip text colour. |
@InfoBorderRadius |
0.2em |
Tooltip border radius. |
@InfoBorderColor |
@ThreeDDarkShadow |
Tooltip border colour. |
@InfoBorderSize |
1px |
Tooltip border size. |
@InfoBorderStyle |
Solid |
Tooltip border style. |
@InfoBoxShadow |
none |
Tooltip shadow. |
↑ Top of page
Highlighted text
Variable |
Default value |
Description |
@Highlight |
@AdelHighlight |
Highlighted text background colour (selected text or menu). |
@HighlightText |
@AdelHighlightText |
Highlighted text colour (selected text or menu). |
@HighlightGradient |
0 |
Angle of the gradient applied to the highlighted text background. |
@HighlightLighten |
5 |
Percentage applied to the gradient lightening. |
↑ Top of page
Menus
These variables allow to modify menu colours.
Variable |
Default value |
Description |
@Menu |
@Adel3DBackground |
Menu background colour. |
@MenuText |
@Adel3DText |
Menu text colour. |
@MenuGradient |
0 |
Angle of the gradient applied to the menu background. |
@MenuLighten |
10 |
Percentage applied to the gradient lightening. |
@MenuBoxShadow |
none |
Context-sensitive menu shadow. |
↑ Top of page
Input fields
These variables allow to modify the appearance of input fields.
Variable |
Default value |
Description |
@Input |
@AdelWindowBackground |
Input field background colour. |
@InputDisabled |
@Adel3DBackground |
Input field text colour. |
@InputDisabledText |
@AdelGrayText |
Background colour of disabled input field. |
@InputText |
@AdelWindowText |
Text colour of disabled input field. |
@InputBorderRadius |
0 |
Input field border radius. |
@InputBorderColor |
#030303 |
Input field border colour. |
@InputGradient |
0 |
Angle of the gradient applied to the input field background. |
@InputLighten |
1 |
Percentage applied to the gradient lightening. |
@InputBoxShadow |
none |
Input field shadow. |
↑ Top of page
Static controls
These variables allow to modify the appearance of static controls.
Variable |
Default value |
Description |
@Static |
@Adel3DBackground |
Static control background colour. |
@StaticText |
@Adel3DText |
Static control text colour. |
@StaticBorderRadius |
0 |
Static control border radius. |
@StaticGradient |
none |
Angle of the gradient applied to the static control background. |
@StaticLighten |
5 |
Percentage applied to the gradient lightening. |
@StaticBoxShadow |
none |
Static control shadow. |
↑ Top of page
Panels
These variables allow to modify the appearance of panels.
Variable |
Default value |
Description |
@Panel |
@Adel3DBackground |
Panel background colour. |
@PanelText |
@Adel3DText |
Panel text colour. |
@PanelBorderSize |
2px |
Panel border size. |
@PanelBorderRadius |
0 |
Panel border radius. |
@PanelBorderStyle |
groove |
Panel border style. |
@PanelBorderColor |
@Adel3DBackground |
Panel border colour. |
@PanelGradient |
none |
Angle of the gradient applied to the panel background. |
@PanelLighten |
5 |
Percentage applied to the gradient lightening. |
@PanelBoxShadow |
none |
Panel shadow. |
↑ Top of page
Radio buttons
These variables allow to modify the appearance of radio buttons.
Variable |
Default value |
Description |
@ButtonFace |
@Adel3DBackground |
Button background colour. |
@ButtonText |
@Adel3DText |
Button text colour. |
@ButtonHighlight |
lighten(@Adel3DBackground, 10) |
Button highlighted border colour. |
@ButtonShadow |
darken(@Adel3DBackground, 10) |
Button shadowed border colour. |
@ButtonBorderRadius |
0.2em |
Button border radius. |
@ButtonBorderColor |
darken(@ButtonShadow, 20) |
Button border colour. |
@ButtonBorderSize |
1px |
Button border size. |
@ButtonBorderStyle |
solid |
Button border style. |
@ButtonGradient |
0 |
Angle of the gradient applied to the button background . |
@ButtonLighten |
10 |
Percentage applied to the gradient lightening. |
@ButtonBoxShadow |
none |
Button shadow. |
↑ Top of page
Accordion object
These variables allow to modify the appearance of the Accordion object.
Variable |
Default value |
Description |
@AccordionTreePanelBackgroundColor |
#efefef |
Backround colour of non selected panels. |
@AccordionTreePanelSelectedBackgroundColor |
darken(@Adel3DBackground, 10) |
Background colour of selected panel. |
@AccordionTreePanelBorderColor |
#b5bcc7 |
Border colour of non selected panels. |
@AccordionTreePanelSelectedBorderColor |
darken(@Adel3DBackground, 30) |
Border colour of selected panel. |
@AccordionTreeBackgroundColor |
#FFFFFF |
Panel content background colour. |
@AccordionTreeTreeTreeNodeSelectedBackgroundColor |
@Adel3DBackground |
Background colour of tree node when it is selected or moved over with the mouse pointer. Using this variable is not recommended. |
@AccordionTreeTreeTreeNodeSelectedColor |
#000000 |
Text colour of tree node when it is selected or moved over with the mouse pointer. Using this variable is not recommended. |
@ AccordionTreeContainerBackgroundColor |
none |
Accordion background colour. |
@AccordionTreeTreeTreeNodeSelectedBorderColor |
#759dc0 |
Border colour of tree node when it is selected or moved over with the mouse pointer. Using this variable is not recommended. |
Lastly, the four following variables allow to replace images for the tree's nodes and sheets without using the SET_ELEMENT_IMAGE method :
Variable |
Description |
@AccordionTreeFolderImage |
URL of the image for the trees directories. Example: url("../themes/blue/css/newFolder.gif"). |
@AccordionTreeFolderImagePosition |
Position of the @AccordionTreeFolderImage image where the folder image can be found. For example: initial; |
@AccordionTreeFileImage |
URL of the image for the trees sheets. |
@AccordionTreeFileImagePosition |
Position of the @AccordionTreeFileImage image where the sheet image can be found. |
↑ Top of page
Graphical lists
These variables can be used to modify certain parameters of graphic lists.
Variable |
Default value |
Description |
@TableListBackground |
@AdelWindowBackground |
|
| @TableListCellBackground | @AdelWindowBackground | |
| @TableListCellText | @AdelWindowText | |
| @TableListRowSelectionBackground | @AdelSelectionBackground | |
| @TableListRowSelectionText | @AdelSelectionText; | |
| @TableListCellSelectionBackground | none | |
| @TableListCellSelectionText | none | |
| @TableListCellSelectionOutlineColor | @TableListCellText | |
| @TableListCellSelectionOutlineStyle | solid | |
| @TableListCellSelectionOutlineWidth | 2px | |
| @TableListInfoNoteImgSize | 10px | |
| @TableListInfoNoteImgUrl | url("@{AdeliaResourcePath}/images/note_indicator.gif") | By default shows an "i |
↑ Top of page
Calendars
These variables are used to change the colors of calendars.
Variable |
Default value |
Description |
@CalendarContainerBackgroundColor |
@Window |
Background color of the background of the object. |
@CalendarMonthBackgroundColor |
@Window |
Background color of the background of display areas or months. |
@CalendarHeaderBackgroundColor |
@ActiveCaption |
Color of the title bar, the names of the days of the week, the week numbers (if WEEK_NUMBER is *TRUE ) and the background of day numbers of the selected dates |
@CalendarDayNumberColor |
@WindowText |
Color:
|
@CalendarPreviousNextMonthDayNumberColor |
@GrayText |
Text color for day numbers that are not part of the month(s) displayed by the object. |
@CalendarHeaderColor |
@Window |
Text color for the title and day numbers of the selected dates. |
↑ Top of page
Menu bar
These variables allow to modify the appearance of the MENU BAR object.
Variable |
Default value |
Description |
@MenuBarBorderColor |
transparent |
Border color |
| @MenuBarBackgroundColorStart | @ThreeDHighlight | Bar background gradient start color. |
| @MenuBarBackgroundColorEnd | @ThreeDLightShadow | Bar background gradient end color. |
| @MenuBarSeparatorColor | black | Separator color. |
| @MenuBarButtonBackgroundColor | @Adel3DBackground | Button object background color. |
| @MenuBarButtonBorderRadius | 0.2em | Button border radius. |
| @MenuBarButtonBorderColor | @ThreeDDarkShadow | Button border color. |
| @MenuBarButtonGradient | 0 | Gradient angle applied to a button background. |
| @MenuBarButtonLighten | 10 | Percentage applied to gradient lightening. |
| @MenuBarTextColor | @Adel3DText | Element text color. |
↑ Top of page