CSS Styling Guide

Simple File List er beregnet til at antage dit websteds temaudseende som standard. Uden ændringer af stilen, bør den se præsentabel ud på din WordPress-hjemmeside.

Men hvis du ønsker at justere udseendet, kan du bruge CSS inden for dit websteds tema. Ved at målrette mod følgende HTML-elementer kan du tilsidesætte de indbyggede stilarter med din egen CSS.

Tjek disse CSS eksempler hvis du har brug for hjælp til at komme i gang.

Fælles elementer på tværs af alle fillistevisninger

Fillisteindpakning og container

.eeSFL: Hovedbeholderen til fillister på tværs af alle visninger.
.eeFiles: En beholder, der indeholder filelementerne.

Filelementstruktur

.eeSFL_Item: Repræsenterer en individuel fil med detaljer, handlinger og metadata.
.eeSFL_Thumbnail: Indeholder filens miniaturebillede.
.eeSFL_FileName: Viser filnavnet og giver et link.
.eeSFL_FileDetails: Indeholder metadata (filstørrelse, uploaddato).
.eeSFL_ListFileActions: Indeholder handlingsknapperne for hver fil (åbn, download, rediger, slet).

Tabelvisningsspecifikke elementer

Tabelvisningen bruger en traditionel HTML-tabel til at vise filerne. Denne visning er responsiv og skifter til en simpel in-line visning på små skærme.

Bord Container & Struktur

.eeSFL fungerer som hovedindpakningen for bordvisningen.
.eeFiles danner tabelstrukturen.
Tabelkolonner
- .eeSFL_Thumbnail repræsenterer en kolonne for miniaturebilledet.
- .eeSFL_FileName kolonne for filnavnet.
- .eeSFL_FileSize kolonne for filstørrelse.
- .eeSFL_FileDate kolonne for datoen.
Bordrække
- .eeSFL_Item repræsenterer hele rækken for en fil.
  Hver kolonne (miniaturebillede, navn, størrelse, dato) er en celle indeni .eeSFL_Item.

Tiles View-specifikke elementer

Flisevisningen bruger et gitterlayout til at vise filerne fra øverst til venstre til nederst til højre.

.eeFiles holder fliseelementerne.
.eeSFL_Tile fungerer som en enkelt flises indpakning, der indeholder hver fil.
.eeSFL_FileLink for klikbare filnavne.
.eeSFL_ListFileActions i flisen indeholder handlinger som Åbn, Download, Kopier link.

Flex View-specifikke elementer

Flexvisningen er designet til at spredes jævnt over bredden af det indeholdende element.

.eeFiles bruger et flexbox-layout til responsiv justering af filelementer.
.eeSFL_Item repræsenterer filbeholderen med et fleksibelt layout.
.eeSFL_Thumbnail viser filens thumbnail i en fleksibel række.
.eeSFL_FileInfo giver filoplysninger ved siden af miniaturebilledet.
.eeSFL_FileDetails viser filstørrelse og dato.
.eeSFL_ListFileActions giver links til handlinger som download, kopiering og sletning.

Upload formularelementer

Formstruktur

#eeSFL_UploadForm omslutter hele uploadformularen.
.eeSFL_UploadFilesTitle er overskriften til uploadformularen.

Indtastningsfelter

#eeSFL_Name Input til indtastning af filuploaderens navn.
#eeSFL_Email Input til indtastning af uploaderens e-mail.
#eeSFL_FileDesc tekstinput til filbeskrivelse.

Filoverførselsområde

#eeSFL_FileInput til valg af filer.
#eeSFL_FileDropZone til træk-og-slip filuploads.
#eeSFL_FileUploadQueue viser filer i kø til upload.

Knapper og indikatorer

#eeSFL_UploadGo Den knap, der starter uploadprocessen.
#eeSFL_UploadProgress viser forløbet af filuploads.
.sfl_instuctions giver retningslinjer eller bemærkninger til filupload.