Guida allo stile CSS

Simple File List è pensato per assumere l'aspetto del tema del tuo sito web di default. Senza alcuna modifica allo stile, dovrebbe apparire presentabile sul tuo sito web WordPress.

Tuttavia, se desideri modificare l'aspetto, puoi usare CSS all'interno del tema del tuo sito web. Prendendo di mira i seguenti elementi HTML, puoi sovrascrivere gli stili incorporati con il tuo CSS.

Dai un'occhiata a queste Esempi CSS se hai bisogno di aiuto per iniziare.

Elementi comuni in tutte le visualizzazioni dell'elenco dei file

Wrapper e contenitore dell'elenco dei file

.eeSFL: Contenitore principale per gli elenchi di file in tutte le viste.
.eeFiles: Un contenitore che contiene gli elementi del file.

Struttura dell'elemento del file

.eeSFL_Item: Rappresenta un singolo file con dettagli, azioni e metadati.
.eeSFL_Thumbnail: Contiene l'immagine in miniatura del file.
.eeSFL_FileName: Visualizza il nome del file e fornisce un collegamento.
.eeSFL_FileDetails: Contiene metadati (dimensione del file, data di caricamento).
.eeSFL_ListFileActions: Contiene i pulsanti di azione per ciascun file (apri, scarica, modifica, elimina).

Elementi specifici della vista tabella

La visualizzazione tabella utilizza una tabella HTML tradizionale per visualizzare i file. Questa visualizzazione è reattiva e passerà a una semplice visualizzazione in-line su schermi piccoli.

Contenitore e struttura della tabella

.eeSFL funge da wrapper principale per la visualizzazione della tabella.
.eeFiles costituisce la struttura della tabella.
Colonne della tabella
- .eeSFL_Thumbnail rappresenta una colonna per la miniatura.
- .eeSFL_FileName colonna per il nome del file.
- .eeSFL_FileSize colonna per la dimensione del file.
- .eeSFL_FileDate colonna per la data.
Riga della tabella
- .eeSFL_Item rappresenta l'intera riga di un file.
  Ogni colonna (Miniatura, Nome, Dimensione, Data) è una cella all'interno .eeSFL_Item.

Elementi specifici della vista Tile

La visualizzazione a riquadri utilizza una disposizione a griglia per visualizzare i file, dall'alto a sinistra al basso a destra.

.eeFiles contiene gli elementi delle tessere.
.eeSFL_Tile funge da involucro di un singolo riquadro, contenente ciascun file.
.eeSFL_FileLink per nomi di file cliccabili.
.eeSFL_ListFileActions all'interno del riquadro sono incluse azioni come Apri, Scarica, Copia collegamento.

Elementi specifici della vista Flex

La vista flessibile è progettata per distribuirsi uniformemente su tutta la larghezza dell'elemento contenitore.

.eeFiles utilizza un layout flexbox per l'allineamento reattivo degli elementi del file.
.eeSFL_Item rappresenta il contenitore dei file con un layout flessibile.
.eeSFL_Thumbnail visualizza la miniatura del file in una riga flessibile.
.eeSFL_FileInfo fornisce i dettagli del file accanto alla miniatura.
.eeSFL_FileDetails visualizza la dimensione e la data del file.
.eeSFL_ListFileActions fornisce link per azioni come download, copia ed eliminazione.

Carica elementi del modulo

Struttura del modulo

#eeSFL_UploadForm racchiude l'intero modulo di caricamento.
.eeSFL_UploadFilesTitle è l'intestazione del modulo di caricamento.

Campi di input

#eeSFL_Name Campo per immettere il nome di chi carica il file.
#eeSFL_Email Campo per immettere l'email dell'autore del caricamento.
#eeSFL_FileDesc input di testo per la descrizione del file.

Area di caricamento file

#eeSFL_FileInput per selezionare i file.
#eeSFL_FileDropZone per caricare file tramite trascinamento della selezione.
#eeSFL_FileUploadQueue visualizza i file in coda per il caricamento.

Pulsanti e indicatori

#eeSFL_UploadGo Il pulsante che avvia il processo di caricamento.
#eeSFL_UploadProgress mostra l'avanzamento del caricamento dei file.
.sfl_instuctions fornisce linee guida o note per il caricamento dei file.