# Custom styles

You can enter additional styles in the <style> part of the header data of the form (Edit form header scripts component). The usual CSS rules apply.

Information

In the extra text of the Classes folder, you can also add these styles to the list of default styles. These styles are automatically available by means of the keyword list.

The following sections explain how to define your own style class and use it in a form.

# Define style settings

'Edit form header scripts' component; custom style

The style settings are defined in the form designer. The styles must be entered in the corresponding header area (Edit form header scripts component) of the form. The class used in the example is named formblack. It is assigned the background color value black.

It would be possible to use the style in the form now. However, you would need to enter the style manually (in the respective Form designer > Desired template > Properties of the selected cell > Display form field).

In order to be able to select the style from the drop-down menu of the Display field, follow the steps below.

# Configure class in ELO

There are several default display classes in ELO. An administrator is able to add additional classes.

  1. Navigate to the folder Classes (Administration//ELOwf Base) in ELO.

  2. Open the Metadata dialog box for the Classes folder.

  3. Click the Extra text tab.

    'Classes' folder; extra text

    You see all display classes defined so far on the Extra text tab.

    Extra text; added class

  4. Enter the new class at the end of the list. Use the following syntax:

    <class name>=<class display name>
    
  5. Select OK to save changes and close the dialog box.

  6. Open the form designer.

    'Refresh' button

  7. Select the Refresh button on the toolbar.

    The new display class is now available.

# Apply style

If you have defined a new style and created the corresponding class, you can use the style in the form.

  1. Open the form designer.

  2. Select the form you want to use the style in.

  3. Open the template you want to use the style in.

  4. Select the form field you want to assign the style to.

  5. Open the drop-down menu of the Display field (Properties of the selected cell).

    Drop-down menu of the 'Display' field; added style

  6. Select the new style from the list.

    Information

    You cannot preview added styles in the form designer. Use the Save and preview function to check whether the style you selected is displayed as required.

  7. Select Save.

    Form with the added style

The new style is assigned to the selected field.

# Integrate CSS files

If you want to use CSS styles in multiple forms, it makes sense to save the styles in CSS files. You can then manage the CSS files in ELO and load them to forms.

  1. Save the CSS files to ELO. Use the following path:

    ELO repository; 'Classes' folder

    Administration//ELOwf Base//Classes

    'Refresh' button

  2. Open the form designer.

  3. To load the CSS files, select Refresh in the form designer.

  4. Open a form.

  5. Select Edit form header scripts.

  6. Select a CSS file from the Select CSS drop-down menu.

    'Edit form header scripts' component; 'Add' button

  7. Select Add.

    The selected CSS file is embedded in the header part of the form.

  8. Select OK to save the changes.

Last updated: March 13, 2024 at 8:25 AM