Simple File List è pensato per assumere il tema del tuo sito web per impostazione predefinita. Senza alcuna modifica allo stile, dovrebbe apparire presentabile sul tuo sito Web WordPress.
Tuttavia, se si desidera regolare l'aspetto, è possibile utilizzare alcuni semplici CSS.
SUGGERIMENTO: assicurati che tutte le tue cache siano spente o in modalità di sviluppo durante il test delle modifiche CSS. Altrimenti potrebbero non essere visti subito.
Contenitore principale
Sia l'elenco dei file che l'uploader sono racchiusi in un file . Usa CSS nel tuo tema per creare il tuo stile
#eeSFL {
background-color: black;
color: white; /* Text Color */
}L'elenco dei file
L'elenco dei file è costituito da una tabella HTML. È possibile utilizzare questi stili per scavalcare l'aspetto predefinito.
/* Values Shown are the defaults */
/* The list container */
#eeSFL table.eeFiles {
width: 100%;
border-collapse: collapse;
border: 1px solid #999;
text-align: center;
}
/* Change the color of a row's background on hover */
#eeSFL .eeFiles tr:hover {
background: #FFF;
}
/* The appearance of the table's header row */
#eeSFL .eeFiles th {
text-align: center;
background: #555;
color: #EEE;
cursor: pointer;
}
/* The appearance of the table cells */
#eeSFL .eeFiles td {
padding: .25em 0;
border-bottom: 1px solid #999;
text-overflow: clip;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
/* The appearance of the file name */
#eeSFL td.eeSFL_FileName {
text-align: left;
padding-left: 3px;
}
/* The appearance of the file link */
#eeSFL .eeFiles td a {
text-decoration: none;
}
/* The appearance of the file list actions area */
.eeSFL_ListFileActions {
}
/* The appearance of the file list actions link */
.eeSFL_ListFileActions a {
}Il caricatore
Uploader utilizza questi stili:
/* Values Shown are the defaults */
/* The upload form container */
#eeUploadForm {
}
/* The appearance of the browser's file input */
#eeSFL input[type=file] {
float: left;
margin-right: 2em;
font-size: 120%;
}
/* The visability of the spinner */
#eeSFL #eeUploadingNow {
display: none; /* Hide until an upload begins */
}
/* The appearance of the spinner */
.eeSFL_UploadingImg,
.entry-content .eeSFL_UploadingImg {
margin-right: 1em;
box-shadow: none !important;
border-radius: 32px;
}
/* The appearance of the upload information text */
#eeSFL p.sfl_instuctions {
float: right;
text-align: right;
width: 50%;
}Modulo di informazioni sull'autore del caricamento
Questi stili controllano il modulo Informazioni sull'uploader opzionale:
/* Values Shown are the defaults */
/* The upload form container */
#eeUploadInfoForm {
}
/* The appearance of form labels */
#eeSFL label {
float: left;
}
/* The appearance of the form inputs */
#eeSFL input[type=text],
#eeSFL input[type=tel],
#eeSFL input[type=email],
#eeSFL input[type=file],
#eeSFL textarea {
float: left;
clear: left;
width: 100%;
margin-bottom: 20px;
}
/* The appearance of the form's submit button */
#eeSFL input[type=submit] {
float: right;
clear: both;
margin-top: 30px;
}
Ciao,
È possibile aggiungere più campi all'uploader? come paese?
Non ora.
È possibile posizionare l'uploader sotto l'elenco dei file?
Sì, dovrai utilizzare due codici brevi come questo ...
[eeSFL showlist = "YES" allowuploads = "NO"]
[eeSFL showlist = "NO" allowuploads = "YES"]
Sto usando allowuploads = "NO" nel mio shortcode, ma mostra ancora l'area di caricamento sul frontend. Voglio solo usare la visualizzazione dell'elenco e non caricare per quella pagina.
Jason
Sembra che tu stia utilizzando l'estensione File Access Manager e stai visualizzando l'elenco come amministratore. Con questa estensione, l'amministratore vede sempre tutte le funzionalità disponibili indipendentemente dalle impostazioni. Accedi come utente previsto per vedere cosa vedono.
Inoltre, usa sempre le impostazioni dei plugin per determinare cosa mostrare o meno. Utilizzare gli attributi dello shortcode solo per gli elenchi visualizzati in una posizione secondaria in cui l'aspetto deve essere diverso dalle impostazioni.
Come puoi modellare il testo della descrizione?
Sulla base della documentazione, posso definire lo stile del nome del file e dei collegamenti delle azioni.
Inoltre come si disegnano i pulsanti di impaginazione?
Utilizzare la classe eeSFL_FileDesc per definire lo stile del testo della descrizione.
SUGGERIMENTO: utilizza la funzione "Ispeziona elemento" del tuo browser web per trovare facilmente quali classi o ID influenzano un elemento specifico.
Hi
Ho scoperto che le miniature erano troppo grandi, quindi ho dovuto aggiungere questo
#eeSFL td.eeSFL_Miniatura, #eeSFL td.eeSFL_Miniatura img {
larghezza: 20px;
altezza: 20px;
}
al mio tema css
Potresti aggiungere un'impostazione per le dimensioni dell'anteprima nell'amministratore?
Sì, funzionerà.
Ho intenzione di aggiungere presto una scheda di stile nelle impostazioni. Più della dimensione del pollice.
Ho usato il seguente sito Web per ottenere istruzioni su come rendere reattiva la tabella: https://css-tricks.com/responsive-data-tables/
Ecco la regola che ho aggiunto al mio css:
@media solo schermo e (larghezza massima: 1024px) {
.eeFiles tabella, .eeFiles thead, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
blocco di visualizzazione;
}
}
Ciao
È possibile utilizzare i telefoni? Non riesco a trovare un'impostazione reattiva. GRAZIE!
Sì, questo plug-in funzionerà su dispositivi mobili, anche se non esiste uno stile integrato per esso. Simple File List utilizzerà le regole del tuo tema.