/
Customizing the default CSS file for forms

Customizing the default CSS file for forms

When configured in the Form Wizard, the Universal Messenger delivers a default CSS file with your forms. You can replace this default CSS file with your own custom stylesheet to match the design of your website.

This tutorial describes how to configure a custom CSS file for your UM forms.

How it works

If the Form Wizard is configured to deliver a CSS file, the UM uses a built-in default stylesheet.

By creating a property file and setting a configuration property, you can point to your own CSS file instead.

This custom file will then be used for all forms — including newsletter forms, contact forms, and event forms.

Creating a custom CSS file

  1. Create a new CSS file with your custom styles, for example customWidgetCss.css.

  2. Place the file in a location within your UM installation directory, for example in cmsbs-conf/conf.d/.

It is recommended to place the file in the cmsbs-conf/conf.d/ directory so that it is kept together with other configuration files.

Creating the property file and configuring the property

  1. Create a new property file, for example cmsbs-conf/conf.d/picss.properties.

  2. Add the following property:

widget.formtpl.defaultCSSFilePath = "cmsbs-conf/conf.d/customWidgetCss.css"

  1. Save the property file.

  2. Restart the UM for the changes to take effect.

The file path must be relative to the UM installation directory. Do not use absolute paths.