Creating an Interface Theme

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:

MyTheme
css	.less file directory.
images	Image resources for the theme (suggestion).
theme.properties	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.

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).

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).

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).

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.

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.

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.

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.

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.

Creating an Interface Theme

Save a theme

Theme description file

Theme CSS

Basic variables

Variables allowing to define basic colours

Window and tabs

Static control borders

Tooltips

Highlighted text

Menus

Input fields

Static controls

Panels

Radio buttons

Accordion object

Calendars