Jak stylizować wygląd listy i przesyłającego

Prosta lista plików ma domyślnie przyjmować motyw Twojej witryny. Bez żadnych modyfikacji stylu powinien wyglądać dobrze na Twojej witrynie WordPress.

Jeśli jednak chcesz zmienić wygląd, możesz użyć prostego CSS.

WSKAZÓWKA - Upewnij się, że wszystkie twoje pamięci podręczne są wyłączone lub w trybie programistycznym podczas testowania zmian CSS. W przeciwnym razie mogą nie być od razu widoczne.

Główny pojemnik

Zarówno lista plików, jak i program do przesyłania są zawarte w pliku . Użyj CSS w swoim własnym motywie, aby nadać własny styl

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

Lista plików

Lista plików składa się z tabeli HTML. Możesz użyć tych stylów, aby zastąpić domyślny wygląd.

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

Udostępniający

Program do przesyłania wykorzystuje następujące style:


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

Formularz informacji o przesyłającym

Te style kontrolują opcjonalny formularz Informacje o przesyłającym:

/* 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 myśli na temat „Jak stylizować listę i wygląd przesyłającego”

    • Użyj klasy eeSFL_FileDesc, aby stylizować tekst opisu.

      WSKAZÓWKA: Skorzystaj z funkcji „Zbadaj element” przeglądarki internetowej, aby łatwo sprawdzić, które klasy lub identyfikatory wpływają na określony element.

      Odpowiedz
  1. Hi

    Odkryłem, że miniatury były zdecydowanie za duże, więc musiałem to dodać

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
    width: 20px;
    wysokość: 20px;
    }

    do mojego tematu css

    Czy możesz dodać ustawienie rozmiaru miniatury w adminie?

    Odpowiedz

Zostaw komentarz

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.