Address Verification Flow Component: Apply Custom CSS Using Additional Styles

Within the Address Verification Flow Component, you have the ability to edit all of the visual aspects allowing you to achieve a personalized final look.

How to Create a Custom Style Sheet

First, save and edit the code template which can be found below – ensure it is saved as a CSS file.
This template illustrates some of the basic changes that can be made, but any CSS functionality is supported.

.powersearch .form-element-label

{

color: Blue;

font-size: 15px;

}

.powersearch

{

font-size: 12px;

color: Green;

background: white;

}

powersearch .form-element-input,

powersearch .form-element-textarea,

powersearch .form-element-select

{

border: 1px solid Black;

}

.powersearch .form-element-button

{

color: Aquamarine;

}

.powersearch .form-element-input,

.powersearch .form-element-textarea,

.powersearch .form-element-select,

.powersearch .slds-input

{

border-color: DarkMagenta;

}

.powersearch .form-element-input:focus,

.powersearch .form-element-input:active,

.powersearch .form-element-textarea:focus,

.powersearch .form-element-textarea:active,

.powersearch .form-element-select:focus,

.powersearch .form-element-select:active,

.powersearch .slds-input:focus,

.powersearch .slds-input:active

{

border-color: Navy;

}

How to Upload the Custom Styling

Navigate to Salesforce Setup | Static Resources.
Create a new Static Resource, select Choose File and upload the CSS file.
After clicking Save, on the Record Page click View File

Copy the end of the URL from /resource onwards, for example: /resource/1686062712000/ExampleCSS
Navigate over to the flow that you would like to apply this styling to.
Open the Screen that you are editing and then select the Address Verification by ProvenWorks component that you have added.
Under Additional Styles paste the extract from the resource URL that you copied