How do I style Super Clone Pro for Lightning Experience (LEX)

The clone, copy, and edit pages are built with Salesforce’s Visualforce technology, and by default the pages inherit the Classic page style. There are two ways to apply Lightning styles.

The easiest way is to add the URL parameter “lss=1”. Super Clone Pro looks for this parameter, and it will turn on the Visualforce lightningStylesheets tag to true. Here is an example of the custom button.

/lcrm_scp__scpClone?lss=1&rid={!MyObject__c.Id}&cfg=MyConfig

The second way is to wrap Super Clone Pro components in a Visualforce page that turns on the page’s Lightning style sheet attribute. Super Clone Pro Visualforce components “lcrm_scp:ScpClone”, “lcrm_scp:ScpCopy”, and “lcrm_scp:ScpClone” are available to be embedded in other pages. The benefit of embedding the components is it allows you to add additional styles if you need something different than what the “lss=1” parameter provides.

1. Create a custom Visualforce page, and enter the below Visualforce code. This example contains the clone component, and we will name it “ScpLexClone”.

<apex:page lightningStylesheets="true" showHeader="{!$User.UIThemeDisplayed != 'Theme4t'}">
<lcrm_scp:ScpClone  />
</apex:page>

• lightningStylesheets=”true” – This turns on the styling for Lightning when a user is viewing the page in Lightning Experience or the mobile app.
• showHeader=”{!$User.UIThemeDisplayed != ‘Theme4t’}” – This removes the header for better styling in mobile.

2. Create a custom button or update your existing button to reference the new Visualforce page “ScpLexClone” instead of the pages that are part of the Super Clone Pro package.

/apex/ScpLexClone?rid={!MyObject__c.Id}&cfg=MyConfig

3. You’re done if you’ve updated your existing Super Clone Pro custom button. Otherwise, add the custom button to your page layout if this is a new button.

4. Now try it out. When you clone your records, the page will have LEX styles applied when viewing it in Lightning Experience or the mobile app.