Ghid de stil CSS

Lista simplă de fișiere este menită să ia în mod implicit aspectul temei site-ului dvs. web. Fără modificări ale stilului, ar trebui să arate prezentabil pe site-ul tău WordPress.

Cu toate acestea, dacă doriți să ajustați aspectul, puteți utiliza CSS în cadrul temei site-ului dvs. Prin direcționarea următoarelor elemente HTML, puteți înlocui stilurile încorporate cu propriul dvs. CSS.

Check out aceste Exemple CSS dacă aveți nevoie de ajutor pentru a începe.

Elemente comune pentru toate vizualizările listei de fișiere

Lista de fișiere Wrapper și Container

  • .eeSFL: containerul principal pentru listele de fișiere din toate vizualizările.
  • .eeFiles: Un container care conține elementele fișierului.

Structura articolului fișierului

  • .eeSFL_Item: reprezintă un fișier individual cu detalii, acțiuni și metadate.
  • .eeSFL_Thumbnail: Deține imaginea în miniatură a fișierului.
  • .eeSFL_FileName: Afișează numele fișierului și oferă un link.
  • .eeSFL_FileDetails: Conține metadate (dimensiunea fișierului, data încărcării).
  • .eeSFL_ListFileActions: Conține butoanele de acțiune pentru fiecare fișier (deschidere, descărcare, editare, ștergere).

Vizualizare tabel-Elemente specifice

Vizualizarea tabelului folosește un tabel HTML tradițional pentru a afișa fișierele. Această vizualizare este receptivă și se va trece la o vizualizare simplă în linie pe ecrane mici.

Container de masă și structură

  • .eeSFL acționează ca înveliș principal pentru vizualizarea tabelului.
  • .eeFiles formează structura tabelului.
  • Coloane de tabel
    • .eeSFL_Thumbnail reprezintă o coloană pentru miniatură.
    • .eeSFL_FileName coloana pentru numele fișierului.
    • .eeSFL_FileSize coloană pentru dimensiunea fișierului.
    • .eeSFL_FileDate coloana pentru dată.
  • Rând de masă
    • .eeSFL_Item reprezintă întregul rând pentru un fișier.
      Fiecare coloană (miniatură, nume, dimensiune, dată) este o celulă în interior .eeSFL_Item.

Tiles View-Elemente specifice

Vizualizarea plăcilor folosește un aspect grilă pentru a afișa fișierele, de la stânga sus la dreapta jos.

  • .eeFiles ține elementele de faianță.
  • .eeSFL_Tile acționează ca un singur înveliș al plăcilor, care conține fiecare fișier.
  • .eeSFL_FileLink pentru nume de fișiere pe care se poate face clic.
  • .eeSFL_ListFileActions în țiglă include acțiuni precum Deschidere, Descărcare, Copiere link.

Elemente specifice vizualizării Flex

Vizualizarea flexibilă este proiectată pentru a se răspândi uniform pe lățimea elementului de conținut.

  • .eeFiles folosește un aspect flexbox pentru alinierea receptivă a elementelor fișierului.
  • .eeSFL_Item reprezintă containerul de fișiere cu aspect flexibil.
  • .eeSFL_Thumbnail afișează miniatura fișierului într-un rând flexibil.
  • .eeSFL_FileInfo oferă detalii despre fișier lângă miniatură.
  • .eeSFL_FileDetails afișează dimensiunea și data fișierului.
  • .eeSFL_ListFileActions oferă linkuri pentru acțiuni precum descărcarea, copierea și ștergerea.

Încărcați elemente de formular

Structura formularului

  • #eeSFL_UploadForm împachetează întregul formular de încărcare.
  • .eeSFL_UploadFilesTitle este titlul formularului de încărcare.

Câmpuri de intrare

  • #eeSFL_Name Intrare pentru introducerea numelui utilizatorului care încarcă fișierul.
  • #eeSFL_Email Intrare pentru introducerea e-mailului utilizatorului care a încărcat.
  • #eeSFL_FileDesc introducerea textului pentru descrierea fișierului.

Zona de încărcare a fișierelor

  • #eeSFL_FileInput pentru selectarea fișierelor.
  • #eeSFL_FileDropZone pentru încărcarea fișierelor prin glisare și plasare.
  • #eeSFL_FileUploadQueue afișează fișierele aflate în coadă pentru încărcare.

Butoane și indicatori

  • #eeSFL_UploadGo Butonul care inițiază procesul de încărcare.
  • #eeSFL_UploadProgress arată progresul încărcării fișierelor.
  • .sfl_instuctions oferă instrucțiuni sau note pentru încărcarea fișierelor.

Lăsați un comentariu

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.