De lijst en het uiterlijk van de uploader vormgeven

Simple File List is bedoeld om standaard het thema van uw website over te nemen. Zonder enige aanpassing aan de stijl, zou het er presentabel uit moeten zien op uw WordPress-website.

Als u echter het uiterlijk wilt aanpassen, kunt u wat eenvoudige CSS gebruiken.

TIP - Zorg ervoor dat al uw caches zijn uitgeschakeld of in ontwikkelmodus zijn wanneer u CSS-wijzigingen test. Anders worden ze misschien niet meteen gezien.

Hoofdcontainer

Zowel de bestandslijst als de uploader zijn ingesloten in een . Gebruik CSS in uw eigen thema om uw eigen stijl te bewerkstelligen

#eeSFL {
     background-color: black;
     color: white;  /* Text Color */
}

De bestandenlijst

De bestandslijst bestaat uit een HTML-tabel. U kunt deze stijlen gebruiken om het standaard uiterlijk te overschrijven.

/* 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 {
         
}

De uploader

De Uploader gebruikt deze stijlen:


/* 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 informatieformulier

Deze stijlen bepalen het optionele uploader-informatieformulier:

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

11 gedachten over "De vormgeving van de lijst en het uiterlijk van de uploader"

    • Gebruik de klasse eeSFL_FileDesc om de beschrijvingstekst op te maken.

      TIP: Gebruik de "Inspect Element" -functie van uw webbrowser om gemakkelijk te achterhalen welke klassen of ID's van invloed zijn op een specifiek element.

      Antwoorden
  1. Hi

    Ik vond dat de miniaturen veel te groot waren, dus moest ik dit toevoegen

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
    breedte: 20px;
    hoogte: 20px;
    }

    aan mijn thema css

    Kunt u een instelling voor miniatuurformaat toevoegen in de admin?

    Antwoorden

Laat een bericht achter

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.