Die einfache Dateiliste übernimmt standardmäßig das Thema Ihrer Website. Ohne Änderung des Stils sollte es auf Ihrer WordPress-Website präsentabel aussehen.
Wenn Sie jedoch das Erscheinungsbild anpassen möchten, können Sie ein einfaches CSS verwenden.
TIPP - Stellen Sie sicher, dass alle Caches deaktiviert sind oder sich im Entwicklungsmodus befinden, wenn Sie CSS-Änderungen testen. Andernfalls werden sie möglicherweise nicht sofort gesehen.
Hauptbehälter
Sowohl die Dateiliste als auch der Uploader sind in a eingeschlossen . Verwenden Sie CSS in Ihrem eigenen Thema, um Ihr eigenes Styling zu bewirken
#eeSFL {
background-color: black;
color: white; /* Text Color */
}Die Dateiliste
Die Dateiliste besteht aus einer HTML-Tabelle. Mit diesen Stilen können Sie das Standard-Erscheinungsbild überschreiben.
/* 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 {
}Der Uploader
Der Uploader verwendet folgende Stile:
/* 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
Diese Stile steuern das optionale 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;
}
Hallo,
Ist es möglich, dem Uploader weitere Felder hinzuzufügen? wie zum Beispiel Land?
Nicht zu dieser Zeit.
Ist es möglich, den Uploader unter der Dateiliste zu platzieren?
Ja, Sie müssen zwei Shortcodes wie diesen verwenden ...
[eeSFL showlist = "YES" allowuploads = "NO"]
[eeSFL showlist = "NO" allowuploads = "YES"]
Ich verwende allowuploads=“NO“ in meinem Shortcode, aber es zeigt immer noch den Upload-Bereich im Frontend an. Ich möchte nur die Listenanzeige verwenden und nicht für diese Seite hochladen.
Horst
Klingt so, als würden Sie die File Access Manager-Erweiterung verwenden und die Liste als Administrator anzeigen. Mit dieser Erweiterung sieht der Administrator unabhängig von den Einstellungen immer alle verfügbaren Funktionen. Melden Sie sich als beabsichtigter Benutzer an, um zu sehen, was er sieht.
Verwenden Sie auch immer die Plugin-Einstellungen, um festzulegen, was angezeigt wird oder nicht. Verwenden Sie Shortcode-Attribute nur für Listen, die an einem sekundären Ort angezeigt werden, an dem sich das Erscheinungsbild von den Einstellungen unterscheiden muss.
Wie können Sie den Beschreibungstext gestalten?
Basierend auf der Dokumentation kann ich den Dateinamen und die Aktionslinks formatieren.
Wie gestalten Sie die Paginierungsschaltflächen?
Verwenden Sie die Klasse eeSFL_FileDesc, um den Beschreibungstext zu formatieren.
TIPP: Verwenden Sie die Funktion "Element überprüfen" Ihres Webbrowsers, um leicht zu ermitteln, welche Klassen oder IDs sich auf ein bestimmtes Element auswirken.
Hi
Ich fand die Thumbnails viel zu groß und musste dies hinzufügen
#eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
Breite: 20px;
Höhe: 20px;
}
zu meinem thema css
Könnten Sie im Administrator eine Einstellung für die Größe der Miniaturansichten hinzufügen?
Ja, das wird funktionieren.
Ich plane, demnächst eine Registerkarte für das Styling in den Einstellungen hinzuzufügen. Mehr als Daumengröße.
Ich habe die folgende Website verwendet, um Anweisungen zu erhalten, wie die Tabelle reagiert: https://css-tricks.com/responsive-data-tables/
Hier ist die Regel, die ich meinem CSS hinzugefügt habe:
@media only screen und (max-width: 1024px) {
.eeFiles Tabelle, .eeFiles thead, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
Bildschirmsperre;
}
}
Hallo
Ist es möglich, Telefone zu benutzen? Ich kann keine reaktionsfähige Einstellung finden. VIELEN DANK!
Ja, dieses Plugin funktioniert auf Mobilgeräten, obwohl es kein eingebautes Styling dafür gibt. Die einfache Dateiliste verwendet die Regeln Ihres Themas.