Enkel filliste er beregnet til at tage dit websteds tema som standard. Uden nogen ændring af stilen skal den se præsentabel ud på dit WordPress-websted.
Men hvis du ønsker at justere udseendet, kan du bruge nogle enkle CSS.
TIP - Sørg for, at alle dine cacher er slået fra eller i udviklingstilstand, når du tester CSS-ændringer. Ellers ses de muligvis ikke med det samme.
Hovedbeholder
Både fillisten og uploader er vedlagt i a . Brug CSS i dit eget tema til at påvirke din egen styling
#eeSFL {
background-color: black;
color: white; /* Text Color */
}
Fillisten
Fillisten består af en HTML-tabel. Du kan bruge disse stilarter til at overkøre standardudseendet.
/* 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 {
}
Uploader
Uploader bruger disse stilarter:
/* 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%;
}
Uploader-informationsformular
Disse stilarter styrer den valgfri Uploader-informationsformular:
/* 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;
}
Hej,
Er det muligt at tilføje flere felter til uploader? såsom land?
Ikke på dette tidspunkt.
Er det muligt at placere uploaderen under fillisten?
Ja, du skal bruge to kortkoder som denne ...
[eeSFL showlist = "YES" allowuploads = "NEJ"]
[eeSFL showlist = "NO" allowuploads = "YES"]
Jeg bruger allowuploads=”NO” i min shortcode, men den viser stadig uploadområdet på frontend. Jeg vil bare bruge listevisningen og ikke uploade for den side.
Jason
Det lyder som om du bruger filadgangsadministrator-udvidelsen og ser listen som administrator. Med denne udvidelse ser Admin altid alle tilgængelige funktioner uanset indstillingerne. Log ind som den påtænkte bruger for at se, hvad de ser.
Brug også altid plugins-indstillingerne til at bestemme, hvad der vises eller ej. Brug kun shortcode-attributter til lister, der vises på en sekundær placering, hvor udseendet skal være anderledes end indstillingerne.
Hvordan kan du style beskrivelsesteksten?
Baseret på dokumentationen kan jeg formatere filnavnet og handlingslinkene.
Hvordan styler du også Pagination-knapperne?
Brug klassen eeSFL_FileDesc til at style beskrivelsesteksten.
TIP: Brug din webbrowsers “Inspect Element” -funktion til nemt at finde ud af, hvilke klasser eller ID'er der påvirker et bestemt element.
Hi
Jeg fandt, at miniaturebillederne var alt for store, så måtte tilføje dette
#eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
bredde: 20px;
højde: 20px;
}
til mit tema css
Kan du tilføje en indstilling for miniaturestørrelse i administratoren?
Ja, det fungerer.
Jeg planlægger snart at tilføje en stylingfane i indstillingerne. Mere end tommelfingerstørrelse.
Jeg brugte følgende websted for at få instruktioner til at gøre tabellen lydhør: https://css-tricks.com/responsive-data-tables/
Her er den regel, jeg tilføjede til min css:
@media kun skærm og (maks. bredde: 1024 px) {
.eeFiles tabel, .eeFiles hoved, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
display: block;
}
}
Hej
Er det muligt at bruge telefoner? Jeg kan ikke finde en lydhør indstilling. THX!
Ja, dette plugin fungerer på mobile enheder, selvom der ikke er nogen indbygget styling til det. Enkel filliste bruger dit temas regler.