3.4.4.2. Style variables and icons/images

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

This section describes all the variables that can be changed in src/main/webapp/skin/less/customVariables.less when creating a new skin.

Basic variables

There are 4 main color variables. These are used to define color for majority of component.

Variable	Value	Description
@baseColor	#000000	Color of text, border, and other UI elements.
@baseBackground	#ffffff	Color of background displaying content.
@primaryColor	#2f5e92	Color of primary buttons and links.
@primaryBackground	#f0f0f0	Color of main background, for example, of header popup and tab items.

The other colors are dependant on the 4 main colors above and can automatically adapt to the value of the @baseColor variable (dark or light). In particular:

Variable	Inheritance/Value if base color (@baseColor) is dark (lightness(@baseColor) < 50%)	Inheritance/Value if base color (@baseColor) is light (lightness(@baseColor) >= 50%)	Description
@baseColorDark	lighten(@baseColor, 20%) (#333333)	lighten(@baseColor, 60%);	Default color of title, text, text input, and label.
@baseColorMedium	lighten(@baseColor, 50%) (#808080)	lighten(@baseColor, 50%)	Text color of navigation links when being selected.
@baseColorLight	lighten(@baseColor, 60%) (#999999)	darken(@baseColor, 20%)	Default color of small text, subtitle, and text field explanation.
@borderColor	lighten(@baseColor, 80%) (#cccccc)	darken(@baseColor, 20%)	Default border color of box, container, and text input.
@primaryBackgroundHover	darken(@primaryBackground, 4%)	darken(@primaryBackground, 3%)	Background color of table row, disabled input field, ready-only form, gray tab in a page when being hovered.
@primaryBackgroundLight	lighten(@primaryBackground, 3%)	lighten(@primaryBackground, 4%)	Background color of table accent, hr line, well, and active pagination.
@revealBackgroundHover	lighten(@baseColor, 98%)	darken(@baseColor, 98%)	Background color of reveal component hover status.
@revealBackgroundSelected	lighten(spin(@primaryColor, -10%), 52%)	darken(spin(@primaryColor, -10%), 52%)	Background color of reveal component selected status.
@primaryDarkColor	darken(@primaryColor, 10.5%) (#224469)	darken(@primaryColor, 18.5%) (#578dc9)	Border color of primary button, and left navigation.
@primaryLightColor	lighten(@primaryColor, 18.5%) (#578dc9)	lighten(@primaryColor, 10.5%) (#224469)	Background color of primary button, and dropdown when being hovered.
@btnBackground	@baseBackground	@primaryBackground	Background color of default button.
@btnBackgroundHighlight	@primaryBackground	@baseBackground	Background color of highlight button.
@dropdownArrowRight	darken(@baseBackground, 20%) (#aac5e3)	lighten(@baseBackground, 90%)	Background color of arrow on the right of dropdown.
@quotePrimaryBackground	lighten(@quotePrimaryBorder, 18%) (#aac5e3)	darken(@primaryColor, 10%) (#aac5e3)	Background color of primary quote.

Advanced variables

For each component, some own variables are defined. They may be new values, or be inherited from base variables. To modify these components, change value of these ones, or change the variables inherited (be careful if it impacts the others).

Icon Fonts

Variable	Inheritance/Value	Description
@colorIconDefault	#999999	Default color of action icons and action lists having dark grey labels.
@colorIconExtra	#626262	Default color of action icons having light or medium grey labels.
@colorIconPrimary	@primaryColor	Color of icons for hovered/pressed/selected effect on light or dark grey icons.
@colorIconSecondary	#ffffff	Hover icon in dropdown menu, icons in primary button or black/grey bar.
@sizeIcon24x24	22px	Size of medium icons.
@sizeIcon12x12	10px	Size of mini icons.
@sizeIcon64x64	60px	Size of extra-large icons.
@sizeIcon32x32	30px	Size of large icons.
@sizeIconDefault	14px	Size of default icons.
@font-path	"/eXoSkin/skin/fonts"	Path to the icon fonts folder.

Left Navigation

Variable	Inheritance/Value	Description
@plfNavigationTitleColor	@primaryColor	Color of left navigation's heading.
@plfNavigationBgBorderLeft	@primaryLightColor	Color of left border of the selected item in the left navigation.
@plfNavigationBorderLeft	@primaryDarkColor	Border color of left border of the selected item in the left navigation.
@plfNavigationColor	@baseColorMedium	Text color of items in the left navigation.
@plfNavigationBgSelected	@baseBackground	Background color of the selected item of the left navigation.
@plfNavigationBorderSelected	@borderColor	Color of top and bottom borders of the selected item in the left navigation.
@plfNavigationColorSelected	@baseColorMedium	Text color of the selected item in the left navigation.
@plfNavigationColorHover	@linkColorHover	Text color of the hovered item in the left navigation.

Breadcrumb

Variable	Inheritance	Description
@breadcrumbColor	@baseColorDark	Color of breadcrumb text.
@breadcrumbHoverColor	@primaryColor	Color of breadcrumb text when being hovered.
@breadcrumbActiveColor	@textLightColor	Color of breadcrumb text when being selected.

Default button

Variable	Inheritance/Value	Description
@btnColor	@baseColorDark	Text color of default button.
Gradient (@btnBackground, @btnBackgroundHighlight)	Gradient (@baseBackground,@primaryBackground)	Background color of default button (gradient background).
@btnBorder	@borderColor	Border color of default button.

Primary button

Variable	Inheritance/Value	Description
Gradient (@btnPrimaryBackground, @btnPrimaryBackgroundHighlight)	Gradient (@primaryLightColor, @primaryColor)	Background color of primary button (gradient background).
@btnBorder	@btnPrimaryBorder	Border color of primary button.
@btnColor	@btnPrimaryColor	Text color of primary button.

Calendar picker

Variable	Inheritance	Description
@calComponentDayTodayBackground	@primaryBackground	Background color of today.
@calComponentCurrentWeekBorder	@borderColor	Border color of current week.
@calComponentDaySelectedColor	@baseBackground	Text color of selected day.
@calComponentTimeInputBoxBackground	@primaryBackground	Background color of input value.
@calComponentDaySelectedBackground	@primaryColor	Background color of selected day.

Dropdown

Variable	Inheritance	Description
@dropdownBackground	@baseBackground	Background color of dropdown.
@dropdownLinkBackgroundHover	@primaryLightColor	Background color of hovered item.
@dropdownBorder	@borderColor	Border color of dropdown.

Form: input field, textarea, select box

Normal state

Variable	Inheritance	Description
@inputBackground	@baseBackground	Background color of input field, text area and select box.
@inputBorder	@borderColor	Border color of input field, text area and select box.
@inputColor	@baseColorDark	Text color of input field and text area.

Focus state
Variable
Inheritance/Value
Description
@inputFocusBorder
lighten(@infoColor, 30%)
Border color of hovered item.
@inputFocusColor
@inputColor
Text color of hovered item.
Disable state
Variable
Inheritance
Description
@inputDisabledBackground
@primaryBackgroundHover
Background color of disabled item.
@inputDisableColor
@textLightColor
Text color of disabled item.
Read-only state
Variable
Inheritance
Description
@formReadOnyBackground
@primaryBackgroundHover
Background color of read-only item.
@formReadOnyColor
@baseColorDark
Text color of read-only item.

Variable	Inheritance/Value	Description
@inputFocusBorder	lighten(@infoColor, 30%)	Border color of hovered item.
@inputFocusColor	@inputColor	Text color of hovered item.

Variable	Inheritance	Description
@inputDisabledBackground	@primaryBackgroundHover	Background color of disabled item.
@inputDisableColor	@textLightColor	Text color of disabled item.

Variable	Inheritance	Description
@formReadOnyBackground	@primaryBackgroundHover	Background color of read-only item.
@formReadOnyColor	@baseColorDark	Text color of read-only item.

Notifications

Variable	Inheritance	Description
@warningBackground @errorBackground @successBackground @infoBackground	@warningColorLight @errorColorLight @successColorLight @infoColorLight	Background color of notifications.
@warningBorder @errorBorder @successBorder @infoBorder	@warningColor @errorColor @successColor @infoColor	Border color of notifications.
@warningText @errorText @successText @infoText	@textColor @textColor @textColor @textColor	Text color of notifications.

Variable

Inheritance

Description

@warningBackground

@errorBackground

@successBackground

@infoBackground

@warningColorLight

@errorColorLight

@successColorLight

@infoColorLight

Background color of notifications.

@warningBorder

@errorBorder

@successBorder

@infoBorder

@warningColor

@errorColor

@successColor

@infoColor

Border color of notifications.

@warningText

@errorText

@successText

@infoText

@textColor

Text color of notifications.

Pagination

Variable	Inheritance	Description
@paginationBackground	@baseBackground	Background color of paginator.
@paginationBorder	@borderColor	Border color of paginator.
@paginationActiveBackground	@primaryBackgroundLight	Background color of selected item in the paginator.

Popover
Variable
Inheritance
Description
@popoverBackground
@baseBackground
Background color of popover.
@popoverArrowColor
@popoverBackground
Background color of popover arrow.

Variable	Inheritance	Description
@popoverBackground	@baseBackground	Background color of popover.
@popoverArrowColor	@popoverBackground	Background color of popover arrow.

Popup

Variable	Inheritance/Value	Description
@uiPopupBackground	@baseBackground	Background color of popup.
@uiPopupBorder	@borderColor	Border color of popup.
@uiPopupHeaderBackground	@primaryBackground	Background color of popup header.
@header-popup-bg	#484848	Background header of popup.
@header-popup-title	#c1c1c1;	Text color of header popup.

Table

Variable	Inheritance/Value	Description
@tableBackground	transparent	Background color of table.
@tableBorder	@borderColor	Border color of table.
@tableBackgroundHover	@primaryBackgroundHover	Background color of hovered row.
@tableBackgroundAccent	@primaryBackgroundLight	Background of accent table.

Tab

Variable	Inheritance	Description
@tabNormalLinkBackground	@primaryBackground	Background color of tab item.
@tabNormalActiveLinkBackground	@baseBackground	Background color of selected tab item.
@tabNormalLinkBorder	@borderColor	Border color of tab item.
@tabNormalLinkColor	@textColor	Text color of tab item.
@tabNormalContentBackground	@baseBackground	Background color of tab content.

Label

Variable	Inheritance	Description
@labelBackground	@baseColorLight	Background color of label.
@labelHoverBackground	@primaryLightColor	Background color of selected label.
@labelColor	@baseBackground	Text color of label.

Badget

Inheritance	Description
@primaryBackground	Background color of default badget.
@textColor	Text color of default badget.
@primaryColor	Background color of primary badget.
@baseBackground	Text color of primary badget.
@baseBackground	Background color of white badget.
@textColor	Text color of white badget.

Tooltip
Variable
Inheritance/Value
Description
@tooltipBackground
lighten(@black, 29%)
Background color of tooltip.
@tooltipArrowColor
@tooltipBackground
Background color of tooltip background.

Variable	Inheritance/Value	Description
@tooltipBackground	lighten(@black, 29%)	Background color of tooltip.
@tooltipArrowColor	@tooltipBackground	Background color of tooltip background.

Icons/images

PSD folder contains all psd files. If user wants to customize some icons (for example, color), he/she can change these files.
system folder contains icons, backgrounds, and images that are commonly used in all applications.
themes folder contains some themes of eXo Platform. The default theme is named "default". The others are themes that you can customize basing on the PSDs. You can also build your own theme by changing the PSD files.