Enkel fillista är tänkt att ta på din webbplats tema som standard. Utan någon modifiering av stilen bör den se presentabel ut på din WordPress-webbplats.
Men om du vill justera utseendet kan du använda några enkla CSS.
TIPS - Se till att alla dina cachar är avstängda eller i utvecklingsläge när du testar CSS-ändringar. Annars kanske de inte syns direkt.
Huvudbehållare
Både fillistan och uppladdaren finns i a . Använd CSS i ditt eget tema för att skapa din egen styling
#eeSFL {
background-color: black;
color: white; /* Text Color */
}
Fillistan
Fillistan består av en HTML-tabell. Du kan använda dessa stilar för att överköra standardutseendet.
/* 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 {
}
Uppladdaren
Uppladdaren använder dessa stilar:
/* 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%;
}
Uppladdningsinformationsformulär
Dessa stilar styr det valfria uppladdningsformuläret:
/* 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;
}
Hallå,
Är det möjligt att lägga till fler fält till uppladdaren? som land?
Inte just nu.
Är det möjligt att placera uppladdaren under fillistan?
Ja, du måste använda två kortkoder så här ...
[eeSFL showlist = "YES" allowuploads = "NO"]
[eeSFL showlist = "NO" allowuploads = "YES"]
Jag använder allowuploads=”NO” i min kortkod, men den visar fortfarande uppladdningsområdet på frontend. Jag vill bara använda listvisningen och inte ladda upp för den sidan.
Jason
Det låter som att du använder filåtkomsthanteraren och ser listan som admin. Med det här tillägget ser Admin alltid alla tillgängliga funktioner oavsett inställningarna. Logga in som avsedd användare för att se vad de ser.
Använd alltid pluginsinställningarna för att avgöra vad som visas eller inte. Använd endast kortkodsattribut för listor som visas på en sekundär plats där utseendet måste vara annorlunda än inställningarna.
Hur kan du utforma beskrivningstexten?
Baserat på dokumentationen kan jag utforma filnamnet och åtgärdslänkarna.
Hur utformar du Pagination-knapparna?
Använd klassen eeSFL_FileDesc för att utforma beskrivningstexten.
TIPS: Använd din webbläsares "Inspektera element" -funktion för att enkelt hitta vilka klasser eller ID som påverkar något specifikt element.
Hi
Jag tyckte att miniatyrerna var alldeles för stora så jag måste lägga till detta
#eeSFL td.
bredd: 20px;
höjd: 20px;
}
till mitt tema css
Kan du lägga till en inställning för miniatyrstorlek i administratören?
Ja, det fungerar.
Jag planerar att lägga till en styling-flik i inställningarna snart. Mer än tumstorlek.
Jag använde följande webbplats för att få instruktioner för att göra tabellen lyhörd: https://css-tricks.com/responsive-data-tables/
Här är regeln som jag lade till i min css:
@media endast skärm och (maxbredd: 1024px) {
.eeFiles tabell, .eeFiles thead, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
display: block;
}
}
Hej
Är det möjligt att använda telefoner? Jag kan inte hitta en lyhörd inställning. TACK!
Ja, detta plugin fungerar på mobila enheter, även om det inte finns någon inbyggd styling för det. Enkel fillista använder ditt temas regler.