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 */
.eeSFL_UploadingImg,
.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;
}
Is it possible to place the uploader below the file list?
Yes, you’ll need to use two shortcodes like this…
[eeSFL showlist="YES" allowuploads="NO"]
[eeSFL showlist="NO" allowuploads="YES"]
How can you style the description text?
Based on the documentation, I can style the filename, and the action links.
Also how do you style the Pagination buttons?
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.
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?
Yes, that’ll work.
I plan on adding a styling tab in the settings soon. More than thumb size.
I used the following website to get instructions for making the table responsive: https://css-tricks.com/responsive-data-tables/
Here’s the rule I added to my css:
@media only screen and (max-width: 1024px) {
.eeFiles table, .eeFiles thead, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
display: block;
}
}
Hello
Is it possible for using phones? I can’t find a responsive setting. THX!
Yes, this plugin will work on mobile devices, although there is no built in styling for it. Simple File List will use your theme’s rules.