Automate

In Evolve, you can customize your organization's visual style by assigning a CSS (Cascading Style Sheet). CSS files dictate the arrangement and design of web pages, influencing aspects like colors, font families, and font sizes. Specifically for Evolve, a CSS provides a way to define and apply styles consistently across multiple web forms.

Evolve comes with a default style.  However, you can overwrite the default style using your organization's unique style a custom CSS file. 

In this tip of the week, we'll walk through how to add a CSS file to an Evolve File Library (you only have to do this once per CSS file), how to add a CSS to a web form solution, and we'll end with a few helpful hints for developers who are new to CSS.

Add a CSS file to an Evolve file library

Before you can use a CSS file in Evolve, you need to add it to a file library.

Steps:

• Open any web form solution in Evolve
1. Go to Solutions
2. Forms
3. Click on the check box before a web form solution
4. Click Edit Solution

• In the Libraries section on the Solutions tab, click File

Import a CSS file to a library

1. Choose a library from the Scope drop down list. 
• Note:  The global library will make your CSS available across apps.
2. Click a folder name
3. Click View Files

• Click upload

• Select the CSS file you would like to upload and then click OK

• If you want to add the CSS to an Evolve form click the link button next to the CSS.
• Copy the CSS URL to the clipboard.
• Click Close when finished.

Add a CSS to an Evolve web form

1. In the properties window of the Solution tab in a web form solution
2. Right click on Custom Styles
3. Click on Edit CSS…

• In the Edit CSS window, click on Add…

• Paste the link to your CSS file (or type in the URL) and then click OK

• Click OK when finished

• Deploy your solution
• You should see the formatting changes in your web form.

Helpful hints

• If you are new to CSS, there are several helpful training sites on the Internet.  You can search for things like "how to create a CSS file" to find options.
• A sample CSS file is attached to help you get started.  This CSS file was designed as an example and is offered as is and may not work out-of-the-box in your environment.
• You may want to consider setting up a "starter" web form template that includes a CSS and other objects your organization wants included as part every web form solution (header, footer, logo, etc.).
• In your CSS file
• If you would like to enter comments in your CSS file enter "/*" before the comment and "*/" after the comment.  Comments can provide helpful tips about information in the CSS file.
• Entering "!important" at the end of a line will override default format settings in Evolve.

Enjoy creating CSS files!

In Evolve, you can customize your organization's visual style by assigning a CSS (Cascading Style Sheet). CSS files dictate the arrangement and design of web pages, influencing aspects like colors, font families, and font sizes. Specifically for Evolve, a CSS provides a way to define and apply styles consistently across multiple web forms.

Evolve comes with a default style.  However, you can overwrite the default style using your organization's unique style a custom CSS file. 

In this tip of the week, we'll walk through how to add a CSS file to an Evolve File Library (you only have to do this once per CSS file), how to add a CSS to a web form solution, and we'll end with a few helpful hints for developers who are new to CSS.

Add a CSS file to an Evolve file library

Before you can use a CSS file in Evolve, you need to add it to a file library.

Steps:

• Open any web form solution in Evolve
1. Go to Solutions
2. Forms
3. Click on the check box before a web form solution
4. Click Edit Solution

• In the Libraries section on the Solutions tab, click File

Import a CSS file to a library

1. Choose a library from the Scope drop down list. 
• Note:  The global library will make your CSS available across apps.
2. Click a folder name
3. Click View Files

• Click upload

• Select the CSS file you would like to upload and then click OK

• If you want to add the CSS to an Evolve form click the link button next to the CSS.
• Copy the CSS URL to the clipboard.
• Click Close when finished.

Add a CSS to an Evolve web form

1. In the properties window of the Solution tab in a web form solution
2. Right click on Custom Styles
3. Click on Edit CSS…

• In the Edit CSS window, click on Add…

• Paste the link to your CSS file (or type in the URL) and then click OK

• Click OK when finished

• Deploy your solution
• You should see the formatting changes in your web form.

Helpful hints

• If you are new to CSS, there are several helpful training sites on the Internet.  You can search for things like "how to create a CSS file" to find options.
• A sample CSS file is attached to help you get started.  This CSS file was designed as an example and is offered as is and may not work out-of-the-box in your environment.
• You may want to consider setting up a "starter" web form template that includes a CSS and other objects your organization wants included as part every web form solution (header, footer, logo, etc.).
• In your CSS file
• If you would like to enter comments in your CSS file enter "/*" before the comment and "*/" after the comment.  Comments can provide helpful tips about information in the CSS file.
• Entering "!important" at the end of a line will override default format settings in Evolve.

Enjoy creating CSS files!

Thank you, very interesting! How do you move these files between environments? Will they be moved with form export/import?

------------------------------
Alexey Skotnikov
GPO, Data Governance
ABBOTT RAPID DX INTERNATIONAL LIMITED

Original Message:
Sent: 04-22-2025 15:17
From: Tammy Lake
Subject: Tip of the Week - Adding a CSS (Cascading Style Sheet) to an Evolve web form

In Evolve, you can customize your organization's visual style by assigning a CSS (Cascading Style Sheet). CSS files dictate the arrangement and design of web pages, influencing aspects like colors, font families, and font sizes. Specifically for Evolve, a CSS provides a way to define and apply styles consistently across multiple web forms.

Evolve comes with a default style.  However, you can overwrite the default style using your organization's unique style a custom CSS file. 

In this tip of the week, we'll walk through how to add a CSS file to an Evolve File Library (you only have to do this once per CSS file), how to add a CSS to a web form solution, and we'll end with a few helpful hints for developers who are new to CSS.

Add a CSS file to an Evolve file library

Before you can use a CSS file in Evolve, you need to add it to a file library.

Steps:

• Open any web form solution in Evolve
1. Go to Solutions
2. Forms
3. Click on the check box before a web form solution
4. Click Edit Solution

• In the Libraries section on the Solutions tab, click File

Import a CSS file to a library

1. Choose a library from the Scope drop down list. 
• Note:  The global library will make your CSS available across apps.
2. Click a folder name
3. Click View Files

• Click upload

• Select the CSS file you would like to upload and then click OK

• If you want to add the CSS to an Evolve form click the link button next to the CSS.
• Copy the CSS URL to the clipboard.
• Click Close when finished.

Add a CSS to an Evolve web form

1. In the properties window of the Solution tab in a web form solution
2. Right click on Custom Styles
3. Click on Edit CSS…

• In the Edit CSS window, click on Add…

• Paste the link to your CSS file (or type in the URL) and then click OK

• Click OK when finished

• Deploy your solution
• You should see the formatting changes in your web form.

Helpful hints

• If you are new to CSS, there are several helpful training sites on the Internet.  You can search for things like "how to create a CSS file" to find options.
• A sample CSS file is attached to help you get started.  This CSS file was designed as an example and is offered as is and may not work out-of-the-box in your environment.
• You may want to consider setting up a "starter" web form template that includes a CSS and other objects your organization wants included as part every web form solution (header, footer, logo, etc.).
• In your CSS file
• If you would like to enter comments in your CSS file enter "/*" before the comment and "*/" after the comment.  Comments can provide helpful tips about information in the CSS file.
• Entering "!important" at the end of a line will override default format settings in Evolve.

Enjoy creating CSS files!

------------------------------
Tammy Lake
Sales Engineer
*Precisely Software Inc.
------------------------------