Blog

Address Verification Flow Component: Apply Custom CSS Using Additional Styles

by Jai Mansford in Support

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

 

Before vs After

Before applying the custom styling:





After applying the custom styling:

Back to the Address Verification Flow Component installation walkthrough

Leave a Reply