Kuinka tyyliä luettelo ja lähettäjän ulkoasu

Yksinkertainen tiedostoluettelo on tarkoitettu ottamaan verkkosivustosi teema oletuksena. Ilman muutoksia tyyliin sen pitäisi näyttää edustavalta WordPress-verkkosivustollasi.

Jos haluat säätää ulkonäköä, voit kuitenkin käyttää joitain yksinkertaisia ​​CSS-tiedostoja.

VIHJE - Varmista, että kaikki välimuistisi ovat pois päältä tai kehitystilassa testattaessa CSS-muutoksia. Muuten niitä ei ehkä nähdä heti.

Pääsäiliö

Sekä tiedostoluettelo että lataaja ovat liitteenä a . Käytä CSS: ää omassa teemassasi oman tyylisi aikaansaamiseksi

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

Tiedostoluettelo

Tiedostoluettelo koostuu HTML-taulukosta. Voit käyttää näitä tyylejä ohittaaksesi oletuksena olevan ulkoasun.

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

Lähettäjä

Lähettäjä käyttää näitä tyylejä:


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

Lähettäjän tietolomake

Nämä tyylit ohjaavat valinnaista lähettäjän tietolomaketta:

/* 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 ajatusta aiheesta "Luettelon tyyli ja lähettäjän ulkoasu"

    • Käytä luokan eeSFL_FileDesc muotoilua kuvaustekstiin.

      VIHJE: Käytä verkkoselaimesi "Tarkasta elementti" -ominaisuutta löytääksesi helposti mitkä luokat tai tunnukset vaikuttavat tiettyyn elementtiin.

      vastata
  1. Hi

    Löysin pikkukuvat olivat aivan liian suuria, joten piti lisätä tämä

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Tumbumb img {
    leveys: 20px;
    korkeus: 20px;
    }

    minun teema CSS

    Voisitko lisätä pikkukuvan koon järjestelmänvalvojaan?

    vastata

Jätä kommentti

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.