Cum să modelați aspectul listei și încărcătorului

Lista de fișiere simplă este menită să preia în mod implicit tema site-ului dvs. web. Fără nicio modificare a stilului, ar trebui să arate prezentabil pe site-ul dvs. WordPress.

Cu toate acestea, dacă doriți să ajustați aspectul, puteți utiliza unele CSS simple.

SFAT - Asigurați-vă că toate cache-urile sunt dezactivate sau în modul de dezvoltare atunci când testați modificările CSS. În caz contrar, acestea nu pot fi văzute imediat.

Recipientul principal

Atât lista de fișiere, cât și încărcătorul sunt incluse într-un . Utilizați CSS în propria temă pentru a vă efectua propriul stil

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

Lista de fișiere

Lista de fișiere este alcătuită dintr-un tabel HTML. Puteți utiliza aceste stiluri pentru a depăși aspectul implicit.

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

Încărcătorul

Încărcătorul folosește aceste stiluri:


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

Formular de informații pentru încărcător

Aceste stiluri controlează formularul opțional Informații pentru încărcător:

/* 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 gânduri despre „Cum să stilizezi lista și aspectul încărcătorului”

    • Utilizați clasa eeSFL_FileDesc pentru a stiliza textul descrierii.

      SFAT: Utilizați funcția „Inspectare element” a browserului dvs. web pentru a găsi cu ușurință ce clase sau ID-uri afectează orice element specific.

      răspuns
  1. Hi

    Am descoperit că miniaturile erau mult prea mari, așa că a trebuit să adaug acest lucru

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
    latime: 20px;
    inaltime: 20px;
    }

    la tema mea css

    Ați putea adăuga o setare pentru dimensiunea miniaturii în administrator?

    răspuns

Lăsați un comentariu

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.