So gestalten Sie die Liste und das Erscheinungsbild des Uploaders

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;
}

9 Gedanken zu „So gestalten Sie die Liste und das Erscheinungsbild des Uploaders“

    • 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.

      antworten
  1. 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?

    antworten

Hinterlasse einen Kommentar

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.