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;
}
Cześć,
Czy można dodać więcej pól do przesyłającego? np. kraj ?
Nie w tej chwili.
Czy można umieścić program do przesyłania pod listą plików?
Tak, musisz użyć dwóch takich skrótów…
[eeSFL showlist = "TAK" allowuploads = "NIE"]
[eeSFL showlist = "NIE" allowuploads = "TAK"]
Używam allowuploads = „NIE” w moim shortcode, ale nadal wyświetla obszar przesyłania na interfejsie użytkownika. Chcę tylko użyć wyświetlania listy i nie przesyłać dla tej strony.
Jason
Wygląda na to, że używasz rozszerzenia File Access Manager i przeglądasz listę jako administrator. Dzięki temu rozszerzeniu administrator zawsze widzi wszystkie dostępne funkcje, niezależnie od ustawień. Zaloguj się jako zamierzony użytkownik, aby zobaczyć, co widzą.
Ponadto zawsze używaj ustawień wtyczek, aby określić, co pokazuje, a co nie. Używaj atrybutów shortcode tylko dla list, które są wyświetlane w dodatkowej lokalizacji, w której wygląd musi być inny niż ustawienia.
Jak możesz zmienić styl tekstu opisu?
Na podstawie dokumentacji mogę stylizować nazwę pliku i łącza do akcji.
Jak stylizujesz przyciski paginacji?
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.
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?
Tak, to zadziała.
Planuję wkrótce dodać kartę stylizacji w ustawieniach. Więcej niż rozmiar kciuka.
Skorzystałem z następującej witryny, aby uzyskać instrukcje dotyczące dostosowania tabeli: https://css-tricks.com/responsive-data-tables/
Oto reguła, którą dodałem do mojego css:
@ ekran tylko dla mediów i (maksymalna szerokość: 1024px) {
Tabela .eeFiles, .eeFiles thead, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
display: block;
}
}
Cześć
Czy można używać telefonów? Nie mogę znaleźć responsywnego ustawienia. DZIĘKI!
Tak, ta wtyczka będzie działać na urządzeniach mobilnych, chociaż nie ma wbudowanej stylizacji. Prosta lista plików będzie używać reguł Twojego motywu.