Customizing Styles

You can customize the look of Aurea CRM.Web such as color scheme, fonts etc. by creating new CSS files stylesheet.

The out-of-the-box style is called update and consists of the following files:

..\styles\update.theme\*.css containing constants like color scheme, fonts etc.

..\styles\update\*.css

..\images\update\*.png

The CSS files for pages and widgets are imported into the main CSS file using the @import rule:

@import url(" ../update/update.css ");

Note: Do not modify the CSS files delivered by Aurea software since these files may be replaced by newer versions when installing e.g. a hotfix.

The CSS files are automatically compiled and compressed whenever a CSS file changes. You can force the update by deleting the contents of the folder ..\styles\.compiled.

To apply your custom style to Aurea CRM.Web, set the Style Web Configuration parameter. For further information see Style.

You can set the color of the CRM.Web page header by setting the CSS property u8-color-brand to the required value. If you are using custom CSS setup, you can use this property in your CSS file to override the default page header color. For example, to get a blue color in the page header, you can set the following values:

!u8-color-accent = #6C97CE;

!u8-color-brand = !u8-color-accent

The resulting page header would look like this:

For details on creating custom styles and themes, CSS sprites, and how to change the color coding of calendar items contact the Aurea Support Portal at https://support.aurea.com.

Aurea CRM.Web on Tablet Devices

An additional derived theme update.touchable.theme allows Aurea CRM.Web to be used on tablets devices. It contains larger user interface elements, more spacing, etc.

If you already use your custom theme, use the following naming convention to create a custom touchable theme from it. Create a derived theme in the folder “..\styles” using the naming convention <standard theme>.touchable.theme. For example, mycustom.touchable.theme.

The touchable theme does not necessarily need to contain a complete set of CSS files. Instead, create a new constants.css containing different constants for margins and spacing, etc. Refer to ..\styles\update.touchable.theme for examples.

The touchable theme is automatically used on tablet devices, i.e., you do not need to set it via the Style Web Configuration parameter. If no <standard theme>.touchable style is available, <standard theme> is used as a fallback.

For devices supporting both mouse and touch gestures, users can choose which theme to use via the dynamic menu item D_ToggleTouchableTheme (Use touch layout) in $System. If no touchable style is found, D_ToggleTouchableTheme is not displayed. The user's selection is stored in the local settings. For further information see User Settings.

Alternatively you can set the theme via URL parameter:

http://<my web address>/crm/start?theme=update.touchable