Sådan styles listen og Uploader-udseende

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

13 tanker om “Sådan styler du listen og Uploader-udseende”

      • 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

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

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

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

    Svar

Efterlad en kommentar

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.