Simple File List soll standardmäßig das Design Ihrer Website übernehmen. Ohne Änderungen am Stil sollte es auf Ihrer WordPress-Website ansprechend aussehen.
Wenn Sie das Erscheinungsbild jedoch anpassen möchten, können Sie CSS im Design Ihrer Website verwenden. Indem Sie die folgenden HTML-Elemente ansprechen, können Sie die integrierten Stile mit Ihrem eigenen CSS überschreiben.
Schauen Sie sich diese CSS-Beispiele wenn Sie Hilfe beim Einstieg benötigen.
Gemeinsame Elemente in allen Dateilistenansichten
Dateilisten-Wrapper und -Container
.eeSFL: Der Hauptcontainer für Dateilisten über alle Ansichten hinweg..eeFiles: Ein Container, der die Dateielemente enthält.
Dateielementstruktur
.eeSFL_Item: Stellt eine einzelne Datei mit Details, Aktionen und Metadaten dar..eeSFL_Thumbnail: Enthält das Miniaturbild der Datei..eeSFL_FileName: Zeigt den Dateinamen an und stellt einen Link bereit..eeSFL_FileDetails: Enthält Metadaten (Dateigröße, Upload-Datum)..eeSFL_ListFileActions: Enthält die Aktionsschaltflächen für jede Datei (öffnen, herunterladen, bearbeiten, löschen).
Tabellenansichtsspezifische Elemente
Die Tabellenansicht verwendet eine herkömmliche HTML-Tabelle zur Anzeige der Dateien. Diese Ansicht ist responsiv und wechselt auf kleinen Bildschirmen zu einer einfachen Inline-Ansicht.
Tabellencontainer und -struktur
.eeSFLfungiert als Haupt-Wrapper für die Tabellenansicht..eeFilesbildet die Tabellenstruktur.- Tabellenspalten
.eeSFL_Thumbnailstellt eine Spalte für die Miniaturansicht dar..eeSFL_FileNameSpalte für den Dateinamen..eeSFL_FileSizeSpalte für die Dateigröße..eeSFL_FileDateSpalte für das Datum.
- Tabellenzeile
.eeSFL_Itemstellt die gesamte Zeile für eine Datei dar.
Jede Spalte (Miniaturbild, Name, Größe, Datum) ist eine Zelle innerhalb.eeSFL_Item.
Kacheln Ansichtsspezifische Elemente
Die Kachel-Ansicht verwendet ein Rasterlayout, um die Dateien von oben links nach unten rechts anzuzeigen.
.eeFileshält die Kachelelemente..eeSFL_Tilefungiert als Wrapper einer einzelnen Kachel, der jede Datei enthält..eeSFL_FileLinkfür anklickbare Dateinamen..eeSFL_ListFileActionsinnerhalb der Kachel sind Aktionen wie „Öffnen“, „Herunterladen“ und „Link kopieren“ enthalten.
Flex View-spezifische Elemente
Die Flex-Ansicht ist so konzipiert, dass sie sich gleichmäßig über die Breite des enthaltenden Elements ausbreitet.
.eeFilesverwendet ein Flexbox-Layout für die reaktionsschnelle Ausrichtung von Dateielementen..eeSFL_Itemstellt den Dateicontainer mit einem flexiblen Layout dar..eeSFL_Thumbnailzeigt die Miniaturansicht der Datei in einer flexiblen Zeile an..eeSFL_FileInfobietet Dateidetails neben der Miniaturansicht..eeSFL_FileDetailszeigt Dateigröße und Datum an..eeSFL_ListFileActionsbietet Links für Aktionen wie Herunterladen, Kopieren und Löschen.
Formularelemente hochladen
Formularstruktur
#eeSFL_UploadFormumschließt das gesamte Upload-Formular..eeSFL_UploadFilesTitleist die Überschrift zum Upload-Formular.
Eingabefelder
#eeSFL_NameEingabe zum Eingeben des Namens des Datei-Uploaders.#eeSFL_EmailEingabe zum Eingeben der E-Mail des Uploaders.#eeSFL_FileDescTexteingabe für die Dateibeschreibung.
Datei-Upload-Bereich
#eeSFL_FileInputzur Auswahl von Dateien.#eeSFL_FileDropZonefür Drag-and-Drop-Dateiuploads.#eeSFL_FileUploadQueuezeigt die zum Hochladen in die Warteschlange gestellten Dateien an.
Tasten & Indikatoren
#eeSFL_UploadGoDie Schaltfläche, die den Upload-Vorgang startet.#eeSFL_UploadProgresszeigt den Fortschritt des Datei-Uploads..sfl_instuctionsbietet Richtlinien oder Hinweise zum Hochladen von Dateien.
