CSS Styling Guide

Simple File List är tänkt att ta på din webbplatss temautseende som standard. Utan några modifieringar av stilen bör den se presentabel ut på din WordPress-webbplats.

Men om du vill justera utseendet kan du använda CSS inom din webbplatss tema. Genom att rikta in dig på följande HTML-element kan du åsidosätta de inbyggda stilarna med din egen CSS.

Kolla in dessa Exempel på CSS om du behöver hjälp att komma igång.

Vanliga element i alla fillistvyer

Fillista Wrapper & Container

.eeSFL: Huvudbehållaren för fillistor över alla vyer.
.eeFiles: En behållare som innehåller filobjekten.

Filobjektstruktur

.eeSFL_Item: Representerar en enskild fil med detaljer, åtgärder och metadata.
.eeSFL_Thumbnail: Håller filens miniatyrbild.
.eeSFL_FileName: Visar filnamnet och ger en länk.
.eeSFL_FileDetails: Innehåller metadata (filstorlek, uppladdningsdatum).
.eeSFL_ListFileActions: Innehåller åtgärdsknapparna för varje fil (öppna, ladda ner, redigera, ta bort).

Tabellvyspecifika element

Tabellvyn använder en traditionell HTML-tabell för att visa filerna. Den här vyn är lyhörd och kommer att ändras till en enkel in-line-vy på små skärmar.

Bordsbehållare och struktur

.eeSFL fungerar som huvudomslaget för tabellvyn.
.eeFiles bildar tabellstrukturen.
Tabellkolumner
- .eeSFL_Thumbnail representerar en kolumn för miniatyrbilden.
- .eeSFL_FileName kolumn för filnamnet.
- .eeSFL_FileSize kolumn för filstorlek.
- .eeSFL_FileDate kolumnen för datumet.
Tabellrad
- .eeSFL_Item representerar hela raden för en fil.
  Varje kolumn (miniatyrbild, namn, storlek, datum) är en cell inom .eeSFL_Item.

Plattor Visa-specifika element

Brickvyn använder en rutnätslayout för att visa filerna, från övre vänster till nedre höger.

.eeFiles håller kakelelementen.
.eeSFL_Tile fungerar som en enda brickas omslag, som innehåller varje fil.
.eeSFL_FileLink för klickbara filnamn.
.eeSFL_ListFileActions i brickan innehåller åtgärder som Öppna, Ladda ner, Kopiera länk.

Flex View-specifika element

Flexvyn är utformad för att spridas jämnt över det innehållande elementets bredd.

.eeFiles använder en flexbox-layout för responsiv justering av filobjekt.
.eeSFL_Item representerar filbehållaren med en flexibel layout.
.eeSFL_Thumbnail visar filens miniatyrbild i en flexibel rad.
.eeSFL_FileInfo ger filinformation bredvid miniatyren.
.eeSFL_FileDetails visar filstorlek och datum.
.eeSFL_ListFileActions ger länkar för åtgärder som ladda ner, kopiera och ta bort.

Ladda upp formulärelement

Formstruktur

#eeSFL_UploadForm omsluter hela uppladdningsformuläret.
.eeSFL_UploadFilesTitle är rubriken för uppladdningsformuläret.

Inmatningsfält

#eeSFL_Name Inmatning för att ange filuppladdarens namn.
#eeSFL_Email Inmatning för att ange uppladdarens e-postadress.
#eeSFL_FileDesc textinmatning för filbeskrivning.

Filuppladdningsområde

#eeSFL_FileInput för att välja filer.
#eeSFL_FileDropZone för dra-och-släpp-filuppladdningar.
#eeSFL_FileUploadQueue visar filer i kö för uppladdning.

Knappar och indikatorer

#eeSFL_UploadGo Knappen som startar uppladdningsprocessen.
#eeSFL_UploadProgress visar förloppet för filuppladdningar.
.sfl_instuctions ger riktlinjer eller anteckningar för filuppladdningar.