How to Style the List and Uploader Appearance

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

However, if you wish to adjust the appearance you can use some simple CSS.

TIP – Be sure all of your caches are off or in development mode when testing CSS changes. Otherwise they may not be seen right away.

Main Container

Both the file list and uploader are enclosed in a <div id=”eeSFL”>. Use CSS in your own theme to effect your own styling

#eeSFL {
     background-color: black;
     color: white;  /* Text Color */

The File List

The File List is made up of an HTML table. You can use these styles to over-ride the default appearance.

/* Values Shown are the defaults */

/* The list container */
#eeSFL table.eeFiles {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #999;
	text-align: center;

/* Change the color of a row's background on hover */ 
#eeSFL .eeFiles tr:hover {
	background: #FFF;

/* The appearance of the table's header row */ 
#eeSFL .eeFiles th {
	text-align: center;
	background: #555;
	color: #EEE; 
	cursor: pointer;

/* The appearance of the table cells */ 
#eeSFL .eeFiles td {
	padding: .25em 0;
	border-bottom: 1px solid #999;
	text-overflow: clip;
	overflow: hidden;
        vertical-align: middle;
        text-align: center;

/* The appearance of the file name */ 
#eeSFL td.eeSFL_FileName {
	text-align: left;
	padding-left: 3px;

/* The appearance of the file link  */ 
#eeSFL .eeFiles td a {
	text-decoration: none;

/* The appearance of the file list actions area */ 
.eeSFL_ListFileActions {

/* The appearance of the file list actions link */
.eeSFL_ListFileActions a {

The Uploader

The Uploader is uses these styles:

/* Values Shown are the defaults */

/* The upload form container */
#eeUploadForm {


/* The appearance of the browser's file input */
#eeSFL input[type=file] {
	float: left;
	margin-right: 2em;
	font-size: 120%;

/* The visability of the spinner */
#eeSFL #eeUploadingNow {
	display: none;   /* Hide until an upload begins */

/* The appearance of the spinner */
.entry-content .eeSFL_UploadingImg {
	margin-right: 1em;
	box-shadow: none !important;
	border-radius: 32px;

/* The appearance of the upload information text */
#eeSFL p.sfl_instuctions {
	float: right;
	text-align: right;
	width: 50%;

Uploader Information Form

These styles control the optional Uploader Information form:

/* Values Shown are the defaults */

/* The upload form container */
#eeUploadInfoForm {


/* The appearance of form labels */
#eeSFL label {
	float: left;

/* The appearance of the form inputs */
#eeSFL input[type=text],
#eeSFL input[type=tel],
#eeSFL input[type=email],
#eeSFL input[type=file],
#eeSFL textarea {
	float: left;
	clear: left;
	width: 100%;
	margin-bottom: 20px;

/* The appearance of the form's submit button */
#eeSFL input[type=submit] {
	float: right;
	clear: both;
	margin-top: 30px;

13 thoughts on “How to Style the List and Uploader Appearance”

      • I am using the allowuploads=”NO” in my shortcode, but it still displays the uploading area on the frontend. I just want to use the list display, and not uploading for that page.


        • Sounds like you are using the File Access Manager extension and are viewing the list as Admin. With this extension, Admin always sees all available features regardless of the settings. Log in as the intended user to see what they see.

          Also, always use the plugins settings to determine what shows or not. Only use shortcode attributes for lists that are shown in a secondary location where the appearance needs to be different than the settings.

    • Use the class eeSFL_FileDesc to style the description text.

      TIP: Use your web browser’s “Inspect Element” feature to easily find which classes or IDs affect any specific element.

  1. Hi

    I found the thumbnails were far too large so had to add this

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
    width: 20px;
    height: 20px;

    to my theme css

    Could you add a setting for thumbnail size in the admin?


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.