CSS Styling Guide

by

Simple File List is meant to take on your website’s theme appearance by default. Without any modifications to the style, it should look presentable on your WordPress website.

However, if you wish to adjust the appearance you can use CSS within your website’s theme. By targeting the following HTML elements, you can over-ride the built-in styles with your own CSS.

Check out these CSS Examples if you need help getting started.

Common Elements Across All File List Views

File List Wrapper & Container

  • .eeSFL: The main container for file lists across all views.
  • .eeFiles: A container holding the file items.

File Item Structure

  • .eeSFL_Item: Represents an individual file with details, actions, and metadata.
  • .eeSFL_Thumbnail: Holds the file’s thumbnail image.
  • .eeSFL_FileName: Displays the file name and provides a link.
  • .eeSFL_FileDetails: Contains metadata (file size, upload date).
  • .eeSFL_ListFileActions: Contains the action buttons for each file (open, download, edit, delete).

Table View-Specific Elements

The table view uses a traditional HTML table to display the files. This view is responsive and will shift to a simple in-line view on small screens.

Table Container & Structure

  • .eeSFL acts as the main wrapper for the table view.
  • .eeFiles forms the table structure.
  • Table Columns
    • .eeSFL_Thumbnail represents a column for the thumbnail.
    • .eeSFL_FileName column for the file name.
    • .eeSFL_FileSize column for file size.
    • .eeSFL_FileDate column for the date.
  • Table Row
    • .eeSFL_Item represents the entire row for a file.
      Each column (Thumbnail, Name, Size, Date) is a cell within .eeSFL_Item.

Tiles View-Specific Elements

The tiles view uses a grid layout to display the files, from top left to bottom right.

  • .eeFiles holds the tile elements.
  • .eeSFL_Tile acts as a single tile’s wrapper, containing each file.
  • .eeSFL_FileLink for clickable file names.
  • .eeSFL_ListFileActions within the tile includes actions like Open, Download, Copy Link.

Flex View-Specific Elements

The flex view is designed to spread evenly across the width of the containing element.

  • .eeFiles uses a flexbox layout for responsive alignment of file items.
  • .eeSFL_Item represents the file container with a flex layout.
  • .eeSFL_Thumbnail displays the file’s thumbnail in a flexible row.
  • .eeSFL_FileInfo provides file details next to the thumbnail.
  • .eeSFL_FileDetails displays file size and date.
  • .eeSFL_ListFileActions provides links for actions like download, copy, and delete.

Upload Form Elements

Form Structure

  • #eeSFL_UploadForm wraps the entire upload form.
  • .eeSFL_UploadFilesTitle is the heading for the upload form.

Input Fields

  • #eeSFL_Name Input for entering the file uploader’s name.
  • #eeSFL_Email Input for entering the uploader’s email.
  • #eeSFL_FileDesc text input for file description.

File Upload Area

  • #eeSFL_FileInput for selecting files.
  • #eeSFL_FileDropZone for drag-and-drop file uploads.
  • #eeSFL_FileUploadQueue displays files queued for upload.

Buttons & Indicators

  • #eeSFL_UploadGo The button that initiates the upload process.
  • #eeSFL_UploadProgress shows the progress of file uploads.
  • .sfl_instuctions provides guidelines or notes for file uploads.

Leave a Comment