You can change the styling of the file list and upload form by adding CSS to your theme file. The trick is to target the proper HTML elements.
Here are some basic CSS snippets for easy copy-pasting.
Specify the Width of the List
To control the overall width of the file list, use this style to target the wrapper container:
body .eeSFL { /* Use body to ensure specificity */
max-width: 80%; /* Adjust this value as needed */
margin: 0 auto; /* Centers the list horizontally */
}Change the File Name Font Size
You can increase or decrease the font size for the file name to enhance readability.
.body eeSFL_FileName { font-size: 1.2em; /* Increase to 1.2 times the base size */
}Change the Size of the Thumbnail
To change the thumbnail size within the file list, use this style to change the dimensions:
body .eeSFL_Thumbnail img {
width: 128px; /* Double the size */
height: auto; /* Maintain aspect ratio */
}Move the Upload Instructions to the Left
If you wish to left-align the upload instructions, apply the following style:
body .sfl_instuctions {
text-align: left; /* Align text to the left */
margin-left: 0; /* Remove any existing left margin */
}Style the File Name Like a Button
To make the file name look like a button, add some padding, background color, and border styling:
body .eeSFL_FileName {
display: inline-block;
padding: 10px 15px; /* Add padding around the text */
background-color: #0073aa; /* Set background color */
color: #fff; /* Set text color */
text-decoration: none; /* Remove underline */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s ease; /* Smooth hover transition */
}
body .eeSFL_FileName:hover {
background-color: #005177; /* Darker shade on hover */
}