How To: Add CSS Style to the Clone, Edit, and Copy pages

Changing the way the Super Clone Pro pages look can be done by adding CSS styles into a page that wrap around the Clone, Copy, and Edit components. Use CSS selectors to specify columns or inputs that should be modified. This includes things like making an input text area wider, adding a minimum width, setting a background color, or other styling attributes.

1. Create a Visualforce page. This page will contain your custom CSS and the Super Clone Pro component.
2. Add the CSS styles, and test your changes to confirm the page looks as you need.
3. Add or change the existing custom button that will navigate to this custom Visualforce page instead of the pages provided with Super Clone Pro.

Below is an example of a style that modifies the first child relationship on the Edit page. The page increases the width of the input field in the first column, reduces the height of the rich-text input, and reduces the width of the last input field column.

<apex:page standardController="Assortment__c" lightningStylesheets="true" showHeader="{!$User.UIThemeDisplayed == 'Theme3'}" >
    <style>
        /* table.table-rec:nth-child(1) selects the first child relationship section */
        
        /* first column: set width of the first column */
        table.table-rec:nth-child(1) tr.data-row td:nth-child(1) {
        	width:375px;
        }
        /* first column: set width of the input field */
        table.table-rec:nth-child(1) tr.data-row td:nth-child(1) input {
        	width:370px;
        }
        /* second column: set height of the div that contains the rich-text input field */
        table.table-rec:nth-child(1) tr.data-row td:nth-child(2) div > div > div {
        	height:80px !important;
        	min-width:250px;
        }
        /* fourth column: set width of the input field */
        table.table-rec:nth-child(1) tr.data-row td:nth-child(4) input {
        	width: 75px;
        }
        
    </style>
    <lcrm_scp:ScpEdit />
</apex:page>