Puoi cambiare lo stile dell'elenco dei file e del modulo di caricamento aggiungendo CSS al file del tuo tema. Il trucco è di puntare al corretto Elementi HTML.
Ecco alcuni frammenti CSS di base per un facile copia-incolla.
Specificare la larghezza dell'elenco
Per controllare la larghezza complessiva dell'elenco dei file, utilizzare questo stile per indirizzare il contenitore wrapper:
body .eeSFL { /* Use body to ensure specificity */
max-width: 80%; /* Adjust this value as needed */
margin: 0 auto; /* Centers the list horizontally */
}Cambia la dimensione del carattere del nome del file
È possibile aumentare o diminuire la dimensione del carattere del nome del file per migliorarne la leggibilità.
.body eeSFL_FileName { font-size: 1.2em; /* Increase to 1.2 times the base size */
}Cambia la dimensione della miniatura
Per modificare le dimensioni delle miniature nell'elenco dei file, utilizzare questo stile per modificare le dimensioni:
body .eeSFL_Thumbnail img {
width: 128px; /* Double the size */
height: auto; /* Maintain aspect ratio */
}Sposta le istruzioni di caricamento a sinistra
Se desideri allineare a sinistra le istruzioni di caricamento, applica il seguente stile:
body .sfl_instuctions {
text-align: left; /* Align text to the left */
margin-left: 0; /* Remove any existing left margin */
}Imposta lo stile del nome del file come un pulsante
Per far sì che il nome del file assomigli a un pulsante, aggiungi un po' di spaziatura, un colore di sfondo e uno stile per il bordo:
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 */
}