Sample S-Drive Component CSS for Communities

This CSS can be used to hide buttons, actions and other elements of an S-Drive component in Experience Cloud (community.)

/* Set a certain image to all thumbnails */
.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*/
.cgFileItemList .file-list-table th:nth-child(2) { /*Hide th of Thumbnail column */
  		display: none !important;
}

/* Hide a table data cell by index*/
.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 */
.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 */
.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*/
.cgActions .slds-dropdown__item:nth-child(1) { /* Removes the first item, "Open" */
  		display: none !important;
}


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


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

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


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


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

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

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

/* Hide Legal Hold Files icon in folder tree section*/
.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. */
button .slds-button[title='Delete selected file(s)']{
      display: none !important ;
}

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

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