CSS Styling with Merge Fields

This how-to article will explain how you would use merge fields to add a layer of styling that could be tied to an object.

Example Use Case

You have an object that has a specific field tied to a CSS element.

Example: An opportunity has a field you’d like to utilize as a CSS attribute. In this case, the opportunity has a Color field and a color associated with it.

Instructions

1

Create the field

• Go to Setup > Object Manager > the object you wish to update
• Go to Fields & Relationships and click the New button to create a new field
• Set as Text with a length of 255

2

Set the CSS attribute on the record

• Go to the record you wish to update
• Add the CSS attribute to the field you just created (ex: #C2BFA5)

3

Leverage the CSS attribute in a template

<div style="background-color:{{!Opportunity.test_color__c}};">TEST TEXT</div>

Output

There can be many other uses for CSS merge fields, this is just a single example.