How to Control the CSS of Screen Flows

Screen Flow in Salesforce is a powerful automation tool that enables users to create dynamic experiences with its intuitive drag-and-drop interface. Users can easily build screens using standard components, with the option to employ custom ones for specific use cases. While screen flow offers endless possibilities, as an automation tool, it prioritizes functionality over visually appealing screens. It is possible to employ CSS in order to enhance the UI of screen flows.

What is CSS?

Cascading Style Sheets (CSS) is a fundamental web technology that defines the presentation and layout of HTML documents. It allows developers to control the appearance of web pages by styling elements such as fonts, colors, and spacing.

Although it is not a standard option, it is possible to use custom solutions to control the CSS of screen flows.

In this post, you can find a custom component that lets you control the CSS of screen flows.

How to Use the Component

1- Install the component using the installation links below.

2- Add the "Style Overwrite" component to your screen element.

3- This component has only one input parameter: CSS String.

You have to enter a CSS to this parameter. It is possible to enter the CSS or use a text template. For instance, here is the Style Overwrite component with a text template called {!CSS}.

Here is the {!CSS} text template used in the component. It adds a background image to the flow screen.

This specific CSS code will apply a background image only to screen flows opened from a quick action - in a modal.

Here is the final result using this CSS code.

What can you do using CSS?

There are endless things that you can achieve using CSS. For instance, you can change the size of the screen, remove the close button (X), change the size/color of the fields, etc.

On the other hand, it is possible to use this component on Lightning pages as well. For instance, here is a case record page. This component makes the priority field bold, colorful, and bigger.

Here is the CSS used for this. You can replace the object name and field name in order to use it with other objects/fields.

div[data-target-selection-name="sfdc:RecordField.Case.Priority"] .slds-form-element__label {
    font-weight: bold;
    color: red;
    font-size: 14px;
}

Considerations

This component has access to the CSS styling of the entire page. So, when used on a screen flow, If there are multiple screen flows on the page, it uniformly applies the CSS. However, when launching a screen flow via an action (and the screen flow opens in a modal), the CSS is exclusive to that particular flow. It is because the screen flow opens in a modal and only one screen flow can be opened at a time.

If you want to apply the CSS only for modal, you have to add a specific text to the CSS. Make sure that you add .uiModal to the beginning. You can see examples below (for instance, background image CSS code).

This component may require CSS knowledge. However, you can utilize the sample CSS codes provided in this post. Additionally, tools like ChatGPT can generate new ones for your specific use case.

Sample CSS Codes for Screen Flow

Increase the Modal Height

.uiModal flowruntime-flow {
    max-height: 100% !important;
}

Set the Modal Width

.uiModal--medium .modal-container {
    max-width: 400px !important;
}

Hide the Close Button

button.slds-modal__close.closeIcon {
    display: none;
}

Increase the Text Area Fields' Height

textarea {
    min-height: 300px !important;
}

Change the Color of Text Area Fields

textarea {
    color: green !important;
    font-weight: 800;
    min-height: 200px !important;
}

Change the Navigation Bar's Color

.uiModal flowruntime-navigation-bar {
    background-color: lightblue !important;
    border-width: 0 !important;
}

Add a Background Image

.uiModal flowruntime-flow {
    background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: cover;
}

.slds-modal__header {
    margin-bottom: 0 !important;
}

Remove the Borders of the Flow

article.flowRuntimeForFlexipage {
 border: none;
}

Change the Height of a Data Table

flowruntime-datatable .restrict-scroll {
    max-height: 200px !important;
}

As mentioned above, if you want to apply the CSS to screen flows on the Lightning page, you can remove .uiModal from these CSS codes.

It is possible to apply multiple CSS codes at once. For instance, here is a flow screen with a background image and a grey navigation bar.

Here is the text template used for the CSS of this screen.

.uiModal flowruntime-flow {
    background-image: url("https://salesforcetime.com/wp-content/uploads/2021/04/sfba3.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: cover;
}

.slds-modal__header {
    margin-bottom: 0 !important;
}
.uiModal flowruntime-navigation-bar {
    background-color: grey !important;
    border-width: 0 !important;
}

You can even use gif as a background image. For instance, here is a screen flow that creates a contact record from account.

Installation Links

Use this link to install in production or developer edition environments.

Use this link to install in sandbox environments.