Simple File List is bedoeld om standaard het thema-uiterlijk van uw website over te nemen. Zonder enige aanpassing aan de stijl zou het er presentabel uit moeten zien op uw WordPress-website.

Als u echter het uiterlijk wilt aanpassen, kunt u CSS gebruiken binnen het thema van uw website. Door de volgende HTML-elementen te targeten, kunt u de ingebouwde stijlen overschrijven met uw eigen CSS.

Bekijk deze CSS-voorbeelden als u hulp nodig heeft om aan de slag te gaan.

Algemene elementen in alle bestandslijstweergaven

Bestandslijstwrapper en -container

• .eeSFL: De hoofdcontainer voor bestandslijsten in alle weergaven.
• .eeFiles: Een container die de bestandsitems bevat.

Bestand Item Structuur

• .eeSFL_Item: Vertegenwoordigt een afzonderlijk bestand met details, acties en metagegevens.
• .eeSFL_Thumbnail: Bevat de miniatuurafbeelding van het bestand.
• .eeSFL_FileName: Geeft de bestandsnaam weer en biedt een link.
• .eeSFL_FileDetails: Bevat metagegevens (bestandsgrootte, uploaddatum).
• .eeSFL_ListFileActions: Bevat de actieknoppen voor elk bestand (openen, downloaden, bewerken, verwijderen).

---

Tabelweergave-specifieke elementen

De tabelweergave gebruikt een traditionele HTML-tabel om de bestanden weer te geven. Deze weergave is responsief en zal op kleine schermen overschakelen naar een eenvoudige in-line weergave.

Tabelcontainer en structuur

• .eeSFL fungeert als de belangrijkste wrapper voor de tabelweergave.
• .eeFiles vormt de tabelstructuur.
• Tabelkolommen
  • .eeSFL_Thumbnail vertegenwoordigt een kolom voor de miniatuur.
  • .eeSFL_FileName kolom voor de bestandsnaam.
  • .eeSFL_FileSize kolom voor bestandsgrootte.
  • .eeSFL_FileDate kolom voor de datum.
• Tabelrij
  • .eeSFL_Item vertegenwoordigt de volledige rij voor een bestand.
    Elke kolom (Miniatuur, Naam, Grootte, Datum) is een cel binnen .eeSFL_Item.

---

Tegels Weergave-specifieke elementen

In de tegelweergave worden de bestanden in een raster weergegeven, van linksboven naar rechtsonder.

• .eeFiles bevat de tegelelementen.
• .eeSFL_Tile fungeert als een enkele tegelwrapper, die elk bestand bevat.
• .eeSFL_FileLink voor klikbare bestandsnamen.
• .eeSFL_ListFileActions Binnen de tegel zijn acties opgenomen zoals Openen, Downloaden, Link kopiëren.

---

Flex View-specifieke elementen

De flexweergave is zo ontworpen dat deze gelijkmatig over de breedte van het bevattende element wordt verdeeld.

• .eeFiles maakt gebruik van een flexbox-indeling voor responsieve uitlijning van bestandsitems.
• .eeSFL_Item vertegenwoordigt de bestandscontainer met een flexibele lay-out.
• .eeSFL_Thumbnail geeft de miniatuur van het bestand weer in een flexibele rij.
• .eeSFL_FileInfo geeft bestandsdetails weer naast de miniatuur.
• .eeSFL_FileDetails geeft bestandsgrootte en datum weer.
• .eeSFL_ListFileActions biedt koppelingen voor acties zoals downloaden, kopiëren en verwijderen.

---

Upload formulierelementen

Formulierstructuur

• #eeSFL_UploadForm omsluit het gehele uploadformulier.
• .eeSFL_UploadFilesTitle is de kop voor het uploadformulier.

Invoervelden

• #eeSFL_Name Invoer voor de naam van de bestandsuploader.
• #eeSFL_Email Hier kunt u het e-mailadres van de uploader invoeren.
• #eeSFL_FileDesc tekstinvoer voor bestandsbeschrijving.

Bestandsuploadgebied

• #eeSFL_FileInput voor het selecteren van bestanden.
• #eeSFL_FileDropZone voor het uploaden van bestanden via slepen en neerzetten.
• #eeSFL_FileUploadQueue Geeft bestanden weer die in de wachtrij staan ​​om te worden geüpload.

Knoppen en indicatoren

• #eeSFL_UploadGo De knop waarmee het uploadproces wordt gestart.
• #eeSFL_UploadProgress toont de voortgang van het uploaden van bestanden.
• .sfl_instuctions geeft richtlijnen of opmerkingen voor het uploaden van bestanden.