U kunt de styling van de bestandslijst en het uploadformulier wijzigen door CSS toe te voegen aan uw themabestand. De truc is om de juiste HTML-elementen.
Hier zijn enkele basis-CSS-fragmenten die u eenvoudig kunt kopiëren en plakken.
Geef de breedte van de lijst op
Om de algehele breedte van de bestandslijst te bepalen, gebruikt u deze stijl om de wrappercontainer te targeten:
body .eeSFL { /* Use body to ensure specificity */
max-width: 80%; /* Adjust this value as needed */
margin: 0 auto; /* Centers the list horizontally */
}
Wijzig de lettergrootte van de bestandsnaam
U kunt de lettergrootte van de bestandsnaam vergroten of verkleinen om de leesbaarheid te verbeteren.
.body eeSFL_FileName {
font-size: 1.2em; /* Increase to 1.2 times the base size */
}
De grootte van de miniatuur wijzigen
Om de miniatuurgrootte in de bestandslijst te wijzigen, gebruikt u deze stijl om de afmetingen te wijzigen:
body .eeSFL_Thumbnail img {
width: 128px; /* Double the size */
height: auto; /* Maintain aspect ratio */
}
Verplaats de uploadinstructies naar links
Als u de uploadinstructies links wilt uitlijnen, past u de volgende stijl toe:
body .sfl_instuctions {
text-align: left; /* Align text to the left */
margin-left: 0; /* Remove any existing left margin */
}
Stijl de bestandsnaam als een knop
Om de bestandsnaam op een knop te laten lijken, voegt u wat opvulling, achtergrondkleur en randopmaak toe:
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 */
}