Configuring CSS styles

There are lot of places where CSS styles can be applied.

CSS styles can be configured with several ways:

CSS Editor (Old View)

It consists of text area and "More" button. This button when clicked calls a dialog window.

• Click "Add" link here to add a line for CSS property (rule)

• Enter CSS property name in "Rule Name" field, and value in "Rule Value" field:

Note: you should not type any CSS separators (semicolon) or brackets.

Add more rules if needed. Click "Apply" button to get rules applied to element being styled.

After clicking "Apply" button you will see styles (combined as properties set) in text area:

You can copy styles from this text area, but you are not allowed to edit them here directly.

CSS styles can be added to element by pasting them into the text area.

1. Copy styles in proper format (e.g. from web inspector in your browser)

2. Click on text area (to make it focused) and paste styles here (press keyboard shortcut)

A dialog window will be opened. It will contain as previously set CSS properties, as just pasted (distributed by separate lines):

Click "Apply" button to save new styles.

Combined Fields with Rules (New View)

CSS editor allows to do the same things as an old view one. User can add CSS rules one by one or several at one time as CSS code.

Click "+" button to add rule lines:

Enter rule name and rule value into proper fields and save changes by clicking "Save" button:

To edit CSS as stylesheet data, click "edit" button to show a textarea where you can add/remove/copy/paste styles:

In the old view you can not remove or change CSS properties in textarea, only copy or add by pasting. In the new view you can.

CSS styles can be added to element by pasting them into the text area.

1. Copy styles in proper format (e.g. from web inspector in your browser).

2. Click on text area and paste styles here.

CSS properties form the textarea will be added as separate rule lines:

Formulas, Functions and Merge Fields in Styles

CSS properties can be dynamically set based on different system and object data using built-in features.

Refer to Functions section, to Merge Field Picker, and Formula Editor articles to know how to work with them.

For example CSS properties that can be configured with formulas and merge fields as shown below.

CSS property can be set to "color" or "background-color" depending on record "IsClosed" field value:

And value of this property can be set to different color depending on record "Type" field value:

• #808000 if it is set to "electrical";

• #78904B if "mechanical";

• and #4488CC for other values:

So, CSS rule will look like this:

And it will mean "If case is closed, card text color will be set to one of 3 colors depending on case type; if case is not closed, this color will be applied as background".