Customise native Salesforce components using CSS

 

Customise native Salesforce components using CSS

There are many instances where clients demand their own look and feel instead of native Salesforce UI. This varies from small changes to complete page changes. I have experienced such instances several times in my career and expect you to have encountered the same at some point in time. So, today I am going to cover a few methods of CSS tweaks that we can do on native instances of Salesforce UI.

 

 

 

Method 1

Use lightning aura:html component with style.

<aura:html tag="style">

/* Your css */

</aura:html>

 

To understand how we can utilize the power of this component, let's consider a use case where the Client wants to keep all the buttons on the account page should have background colour as orange.

Step 1) Grab the tag specification, here we will going to use the CSS class of the tag.

Step 2) Create an aura component and add style as mentioned in the image.

Also, make sure you have added the right interface under the component implements attribute.

 

Step 3) Visit the account detail page and then go to setup->edit page

Drag and drop your custom component over the page.

Activate and then save the page.

 

Step 4) Go back to the page and there you will see the changes.

Method 2

If you want to keep your CSS organized and minify you can use this second approach. In this method, we build one CSS file and attach it to a static resource.

 

Step 1) Create a new CSS file and add your CSS changes there.

Step 2) Add your css file to static resource

Step 3) Add style to your component

<ltng:require styles="{!$Resource.AccountCSS}" />

Step 4) Add component to your account detail page as mentioned in Method 1.