Så utformar du listan och uppladdningsutseendet

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

13 tankar om "Hur man utformar listan och utseende för uppladdare"

      • 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

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

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

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

    Svara

Lämna en kommentar

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.