Sample S-Drive Component CSS for Custom Lightning Component

This page shows how to use CSS to customize your S-Drive component beyond what is configurable. You can hid buttons, actions and other elements.

In Case of Having More Than One SDrive Component in the Custom Lightning Component

Although we do not recommend this method, if such use is requested, each SDrive component should be placed in a separate div as below:

Custom Lightning Component:

HTML

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <div id="SDriveDiv1">
        <cg:SDrive
            customObjectName="Account"
            customObjectFileName="AccountFile__c"
            fileNamespacePrefix="cg__"
            relationshipName="Account__r"
            componentId="AccountFilesCmp1"
            recordId="0013z00002PJMfoAAH"
            enableCompactView="true"
            logo="true"
            enableEdit="true"
            enableEmail="true"
            enableUpload="true"
            enableCopyUrl="false"
            isShortcutEnabled="true"
            enableChatter="false"
            title="S-Drive Component 1"
        />
    </div>
    <div id="SDriveDiv2">    
        <cg:SDrive
            customObjectName="Account"
            customObjectFileName="AccountFile__c"
            fileNamespacePrefix="cg__"
            relationshipName="Account__r"
            componentId="AccountFilesCmp2"
            recordId="0013z00002PJMfoAAH"
            enableCompactView="false"
            logo="true"
            enableEdit="true"
            enableEmail="true"
            enableUpload="true"
            enableCopyUrl="false"
            isShortcutEnabled="true"
            enableChatter="false"
            title="S-Drive Component 2"
        />
    </div>
</aura:component>

In this case, the style configuration for each SDrive component should be done by specifying the id of the div surrounding it.

Stylesheet (CSS) File

CSS

/*IMPORTANT NOTE: Deleting or hiding elements associated with each other 
or making multiple changes to a single element may disrupt the appearance of the SDrive component.*/


/* Set a certain image to all thumbnails */
.THIS#SDriveDiv2 .thumbnail-container > .thumbnail-img{
  content:url("https://www.sdriveapp.com/wp-content/uploads/2015/03/sDriveLogoSquareHighRes.png");
}

/*****************************************************************************************************/
/* Hide a column in S-Drive component. Don't forget to hide both TH and TD elements for each column! */

/* Hide a table header cell by index*/
.THIS#SDriveDiv2 .cgFileItemList .file-list-table th:nth-child(2) { /*Hide th of Thumbnail column */
  		display: none !important;
}

/* Hide a table data cell by index*/
.THIS#SDriveDiv2 .cgFileItemList .file-list-table td:nth-child(2) { /*Hide td of Thumbnail column */
  		display: none !important;
}
/*****************************************************************************************************/

/* Hide dropdown items of "Settings" toolbar button by index */
.THIS#SDriveDiv2 .slds-dropdown-trigger[title='Settings'] .slds-dropdown__item:nth-child(2) {
  		display: none !important;
}

/* Hide dropdown items of "Import X-File(s)" toolbar button by index */
.THIS#SDriveDiv2 .slds-dropdown-trigger[title='Import X-File(s)'] .slds-dropdown__item:nth-child(2) {
  		display: none !important;
}


/*Hide dropdown items of "ACTIONS column > down arrow icon" by index*/
.THIS#SDriveDiv2 .cgActions .slds-dropdown__item :nth-child(1) { /* Removes the first item, "Open" */
  		display: none !important;
}


/* Hide breadcrumb */
.THIS#SDriveDiv2 .cgBreadcrumb #breadcrumbNav .sd-breadcrumb-a {
    	display: none !important;
}


/* Order "ACTIONS" column icons, you can use this mechanism for all child level sorting operations */
.THIS#SDriveDiv2 .cgActions {
          display: flex;
          flex-direction: row;
        }
.THIS#SDriveDiv2 .cgActions :nth-child(1) { order: 3; } 
.THIS#SDriveDiv2 .cgActions :nth-child(2) { order: 2; }
.THIS#SDriveDiv2 .cgActions :nth-child(3) { order: 1; } 

/* Hide "ACTIONS" column icons by index */
.THIS#SDriveDiv2 .cgActions :nth-child(2) { 
		display: none !important; 
} 


/* Hide whole folder tree section */
.THIS#SDriveDiv2 .cgSDrive #folderTreeDiv {
       display: none !important;
}


/* Hide search bar*/
.THIS#SDriveDiv2 .cgSDrive .slds-global-header__item_search {
       display: none !important;
}

/* Hide card header*/
.THIS#SDriveDiv2 .slds-card__header {
      display: none !important;
}

/* Hide Checked Out Files folder icon in folder tree section*/
.THIS#SDriveDiv2 .cgFolder .coutFiles-li { 
        display: none !important;
}

/* Hide Legal Hold Files icon in folder tree section*/
.THIS#SDriveDiv2 .cgFolder .legalHoldFiles-li { 
        display: none !important;
}

/*****************************************************************************************************/
/* Hide a button in toolbar by title. Titles for the same component may differ in compact view, as below. */
.THIS#SDriveDiv2 .slds-button[title='Delete selected file(s)']{
      display: none !important ;
}

/* Hide Rcycle Bin button in toolbar by title for "Compact View" */
.THIS#SDriveDiv1 .slds-button[title='Open Recycle Bin']{
      display: none !important ;
}
/*****************************************************************************************************/

/* Hide a dropdown component in toolbar by title.*/
.THIS#SDriveDiv2 .cgToolbar .slds-dropdown-trigger[title='Import X-File(s)']{
      display: none !important ;
}

2 - In Case of Having Only One SDrive Component in the Custom Lightning Component

Custom Lightning Component:

HTML

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
        <cg:SDrive
            customObjectName="Account"
            customObjectFileName="AccountFile__c"
            fileNamespacePrefix="cg__"
            relationshipName="Account__r"
            componentId="AccountFilesCmp1"
            recordId="0013z00002PJMfoAAH"
            enableCompactView="true"
            logo="true"
            enableEdit="true"
            enableEmail="true"
            enableUpload="true"
            enableCopyUrl="false"
            isShortcutEnabled="true"
            enableChatter="false"
            title="S-Drive Component 1"
        />
</aura:component>

In this case, there is no need to specify an id as there is no element surrounding the SDrive component.

Stylesheet (CSS) File

CSS

/*IMPORTANT NOTE: Deleting or hiding elements associated with each other 
or making multiple changes to a single element may disrupt the appearance of the SDrive component.*/


/* Set a certain image to all thumbnails */
.THIS .thumbnail-container > .thumbnail-img{
  content:url("https://www.sdriveapp.com/wp-content/uploads/2015/03/sDriveLogoSquareHighRes.png");
}

/*****************************************************************************************************/
/* Hide a column in S-Drive component. Don't forget to hide both TH and TD elements for each column! */

/* Hide a table header cell by index*/
.THIS .cgFileItemList .file-list-table th:nth-child(2) { /*Hide th of Thumbnail column */
  		display: none !important;
}

/* Hide a table data cell by index*/
.THIS .cgFileItemList .file-list-table td:nth-child(2) { /*Hide td of Thumbnail column */
  		display: none !important;
}
/*****************************************************************************************************/

/* Hide dropdown items of "Settings" toolbar button by index */
.THIS .slds-dropdown-trigger[title='Settings'] .slds-dropdown__item:nth-child(2) {
  		display: none !important;
}

/* Hide dropdown items of "Import X-File(s)" toolbar button by index */
.THIS .slds-dropdown-trigger[title='Import X-File(s)'] .slds-dropdown__item:nth-child(2) {
  		display: none !important;
}


/*Hide dropdown items of "ACTIONS column > down arrow icon" by index*/
.THIS .cgActions .slds-dropdown__item :nth-child(1) { /* Removes the first item, "Open" */
  		display: none !important;
}


/* Hide breadcrumb */
.THIS .cgBreadcrumb #breadcrumbNav .sd-breadcrumb-a {
    	display: none !important;
}


/* Order "ACTIONS" column icons, you can use this mechanism for all child level sorting operations */
.THIS .cgActions {
          display: flex;
          flex-direction: row;
        }
.THIS .cgActions :nth-child(1) { order: 3; } 
.THIS .cgActions :nth-child(2) { order: 2; }
.THIS .cgActions :nth-child(3) { order: 1; } 

/* Hide "ACTIONS" column icons by index */
.THIS .cgActions :nth-child(2) { 
		display: none !important; 
} 


/* Hide whole folder tree section */
.THIS .cgSDrive #folderTreeDiv {
       display: none !important;
}


/* Hide search bar*/
.THIS .cgSDrive .slds-global-header__item_search {
       display: none !important;
}

/* Hide card header*/
.THIS .slds-card__header {
      display: none !important;
}

/* Hide Checked Out Files folder icon in folder tree section*/
.THIS .cgFolder .coutFiles-li { 
        display: none !important;
}

/* Hide Legal Hold Files icon in folder tree section*/
.THIS .cgFolder .legalHoldFiles-li { 
        display: none !important;
}

/*****************************************************************************************************/
/* Hide a button in toolbar by title. Titles for the same component may differ in compact view, as below. */
.THIS .slds-button[title='Delete selected file(s)']{
      display: none !important ;
}

/* Hide Rcycle Bin button in toolbar by title for "Compact View" */
.THIS .slds-button[title='Open Recycle Bin']{
      display: none !important ;
}
/*****************************************************************************************************/

/* Hide a dropdown component in toolbar by title.*/
.THIS .cgToolbar .slds-dropdown-trigger[title='Import X-File(s)']{
      display: none !important ;
}