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.

Connect Azure DevOps Repo to SourceTree

 

Connect Azure DevOps Repo to SourceTree

In this article, we will be going to learn how to connect Azure DevOps Repos with SourceTree.

Sourcetree is a tool that simplifies connecting your Git repositories. Using SourceTree you can visualize and manage your repositories through GUI.

 

Generate git credentials

 

For connecting SourceTree, we need credentials of Azure DevOps repo. Follow the steps to generate credentials:

Step 1) Go to your branch

 

 

Step 2) Click the clone button

 

 

Step 3) Click Generate Git Credentials (we are using https instead of ssh)

 

Step 4) Copy your username and password and save them somewhere because you won't get it again.

 

 

Add Azure DevOps git account to SourceTree

 

Step 1) Open SourceTree and click on Account.

 

 

Step 2) Click Add to attach the new account and then add the following details

 

Host	Choose Azure DevOps
url	https://[[yourdomain]].visualstudio.com/ Where [[yourdomain]] is your DevOps domain
Auth Type	Keep default value
Username	Your username
Password	Your password
Protocol	https

 

 

Clone repo to SourceTree

We have multiple ways to clone the repo. The first method is to clone by adding URL manually. In this method, we clone the repo by providing a repo URL.

Step 1) Open SourceTree and click on new and then select "Clone from URL"

 

Step 2) Enter the source URL which we get from DevOps

Note: If your cloned URL is in the format of https://<<yourdomain>>@dev.azure.com then use https://<<yourusername>>@dev.azure.com.

 

 

It will ask you to provide your username and password to authenticate.

Step 3)  After authentication, click clone.

 

 

 

The second method to clone the repo is as follows:

Step 1) Open SourceTree and click on Remote

 

 

Step 2) Click clone

Your cloned repo is ready to create a branch,  do push, pull and commit.