Customize Folder List and File List Styles

You can customize the styles of Folder List and File List components by adding selectors in the design.css file.

You can use a Folder List component to list the folders within a specified folder from your Oracle Content and Experience account. The folder list automatically communicates with a File List component and document manager on the page to display the files in a folder selected in the folder list.

You can use a File List component to provide a view of files from a specified folder in your Oracle Content and Experience account. The file list automatically communicates with a Folder List component on the page to display the files in a folder selected in the folder list.

Folder List CSS Selectors

Use these CSS selectors to customize the style of the Folder List component.

Selector name Description

.scs-folder-list-cust .scs-folder-list-container

Outmost DIV of the component

.scs-folder-list-cust .scs-folder-list-folder-title

Folder name

.scs-folder-list-cust .scs-folder-list-line-separator

Separator between the folder name and the list of subfolders

.scs-folder-list-cust .scs-folder-list-sub-folder-title

Subfolder name

.scs-folder-list-cust .scs-folder-list-sub-folder-title-active

Subfolder name when it’s selected

.scs-folder-list-cust .scs-folder-list-no-folder-msg

Message when there is no subfolder to display

File List CSS Selectors

Use these CSS selectors to customize the style of the File List component.

Selector name Description

.scs-file-list-cust .scs-file-list-container

Outmost DIV of the component

.scs-file-list-cust .scs-file-list-folder-title

Folder name

.scs-file-list-cust .scs-file-list-line-separator

Separator between the folder name and the list of files

.scs-file-list-cust .scs-file-list-row

Row that contains the information for a file

.scs-file-list-cust .scs-file-list-left-col

File’s thumbnail located in the left section of the component

.scs-file-list-cust .scs-file-list-mid-col

Middle section of the component, which contains the name, description, last modification, and size of a file

.scs-file-list-cust .scs-file-list-file-title

File name located in the middle section of the app

.scs-file-list-cust .scs-file-list-file-desc

File description located in the middle section of the app

.scs-file-list-cust .scs-file-list-file-lastModified

Last modification of the file

.scs-file-list-cust .scs-file-list-file-size

Size of the file with a vertical separator from the last modification

.scs-file-list-cust .scs-file-list-file-size-no-sep

Size of the file without a vertical separator (last modification not shown)

.scs-file-list-cust .scs-file-list-right-col

Right section of the app

.scs-file-list-cust .scs-file-list-file-download-icon

Download icon located in the right section of the app

.scs-file-list-cust .scs-file-list-no-file-msg

Message when there is no file to display

See File Lists and Folder Lists in Building Sites with Oracle Content and Experience.