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;
}
Hello,
Is it possible to add more fields to uploader? such as country ?
Not at this time.
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"]
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.
Jason
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.
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.