CSS-Beispiele

Sie können das Styling der Dateiliste und des Upload-Formulars ändern, indem Sie CSS zu Ihrer Designdatei hinzufügen. Der Trick besteht darin, die richtigen HTML-Elemente.

Hier sind einige grundlegende CSS-Ausschnitte zum einfachen Kopieren und Einfügen.

Geben Sie die Breite der Liste an

Um die Gesamtbreite der Dateiliste zu steuern, verwenden Sie diesen Stil, um den Wrapper-Container anzusprechen:

body .eeSFL { /* Use body to ensure specificity */
    max-width: 80%; /* Adjust this value as needed */
    margin: 0 auto; /* Centers the list horizontally */
}

Ändern der Schriftgröße des Dateinamens

Sie können die Schriftgröße des Dateinamens vergrößern oder verkleinern, um die Lesbarkeit zu verbessern.

.body eeSFL_FileName {     font-size: 1.2em; /* Increase to 1.2 times the base size */ 
}

Ändern Sie die Größe der Miniaturansicht

Um die Größe der Miniaturansichten in der Dateiliste zu ändern, verwenden Sie diesen Stil zum Ändern der Abmessungen:

body .eeSFL_Thumbnail img {
    width: 128px; /* Double the size */
    height: auto; /* Maintain aspect ratio */
}

Verschieben Sie die Upload-Anweisungen nach links

Wenn Sie die Upload-Anweisungen linksbündig ausrichten möchten, wenden Sie den folgenden Stil an:

body .sfl_instuctions {
    text-align: left; /* Align text to the left */
    margin-left: 0; /* Remove any existing left margin */
}

Formatieren Sie den Dateinamen wie eine Schaltfläche

Damit der Dateiname wie eine Schaltfläche aussieht, fügen Sie etwas Polsterung, Hintergrundfarbe und Rahmenstil hinzu:

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 */
}