Products Downloads


French version


 

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.


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


↑ Top of page


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.


↑ Top of page

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:

  • of the text of day numbers
  • of the horizontal line separating the day numbers from the days of the week
  • the vertical line separating day numbers from week numbers (if WEEK_NUMBER is *TRUE)
  • of the text describing the current date

@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


  • Aucune étiquette