Themes

Custom Themes can be defined for applications by creating css file css/<theme-name>/theme.css under src/main/webapp directory of the application source.

An example theme css/blue-simple/theme.css is provided with the Axelor Open Platform.

The base theme is based on the bootstrap2 css. You can customize most aspect of the theme by overriding default bootstrap css rules.

Other Axelor Open Platform related css rules mostly follows the standard bootstrap design so most of the time overriding bootstrap css rules automatically applies to the custom css rules.

Rules

The most important custom css rules are related to form view widgets. They are defined in view.form.css file.

The most import rules are:

  • form-item-container - applied to widget container

  • form-item - applied to field widget

  • form-label - applied to label widget

  • display-text - applied to field text on readonly widget

  • <widget-name>-item - css class for a widget (e.g. string-item)

  • readonly - if field is readonly

  • required - if field is required

Highlight

The highlight feature can be used to apply custom css dynamically based on some condition. The feature can be used to highlight grid view row/cell or form view fields.

The view.form.hilite.css defines rules for hilite classes. The following are the predefined highlight classes:

  • hilite-primary

  • hilite-warning

  • hilite-success

  • hilite-danger

  • hilite-error

  • hilite-info

New in version 5.4:

  • hilite-red

  • hilite-pink

  • hilite-purple

  • hilite-deeppurple

  • hilite-indigo

  • hilite-blue

  • hilite-lightblue

  • hilite-cyan

  • hilite-teal

  • hilite-green

  • hilite-lightgreen

  • hilite-lime

  • hilite-yellow

  • hilite-amber

  • hilite-orange

  • hilite-deeporange

  • hilite-brown

  • hilite-grey

  • hilite-bluegrey

  • hilite-black

  • hilite-white

Beside the dynamic hilite support, widget can also apply custom css using the css attribute.

Following custom rules are defined:

Following styles added:

  • bold - bold fonts

  • italic - italic fonts

  • underline - underline text

  • overline - overline text

  • line-through - strike through text

  • small - small text size (10px)

  • big - big text size (16px)

  • large - large text size (18px)

  • left - left align text

  • right - right align text

  • center - center align text

  • justify - justify text

  • red - red color text

  • blue - blue color text

  • green - green color text

  • muted - grayed out text (a shade of gray)

  • primary - highlight as primary (a shade of blue)

  • success - highlight as success (a shade of green)

  • info - highlight as info (a shade of sky blue)

  • warning - highlight as warning (a shade of yellow)

  • danger - highlight as danger (a shade of red)

  • bg-primary - highlight as primary (a shade of blue)

  • bg-success - highlight as success (a shade of green)

  • bg-info - highlight as info (a shade of sky blue)

  • bg-warning - highlight as warning (a shade of yellow)

  • bg-danger - highlight as danger (a shade of red)