A Lista de Arquivos Simples se destina a assumir o tema do seu site por padrão. Sem qualquer modificação no estilo, ele deve parecer apresentável em seu site WordPress.
No entanto, se você deseja ajustar a aparência, pode usar um CSS simples.
DICA - Certifique-se de que todos os seus caches estejam desligados ou em modo de desenvolvimento ao testar as alterações de CSS. Caso contrário, eles podem não ser vistos imediatamente.
Container Principal
Tanto a lista de arquivos quanto o uploader estão incluídos em um . Use CSS em seu próprio tema para criar seu próprio estilo
#eeSFL {
background-color: black;
color: white; /* Text Color */
}
A lista de arquivos
A lista de arquivos é composta de uma tabela HTML. Você pode usar esses estilos para substituir a aparência padrão.
/* 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 {
}
O Uploader
O Uploader usa esses estilos:
/* 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%;
}
Formulário de informações do remetente
Esses estilos controlam o formulário opcional Informações do carregador:
/* 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;
}
Olá,
É possível adicionar mais campos ao uploader? como país?
Não agora.
É possível colocar o uploader abaixo da lista de arquivos?
Sim, você precisará usar dois códigos de acesso como este ...
[eeSFL showlist = "SIM" allowuploads = "NÃO"]
[eeSFL showlist = "NÃO" allowuploads = "SIM"]
Estou usando allowuploads=”NO” no meu shortcode, mas ele ainda exibe a área de upload no frontend. Eu só quero usar a exibição de lista e não fazer upload para essa página.
Jason
Parece que você está usando a extensão File Access Manager e está visualizando a lista como Admin. Com esta extensão, o administrador sempre vê todos os recursos disponíveis, independentemente das configurações. Faça login como o usuário pretendido para ver o que ele vê.
Além disso, sempre use as configurações de plugins para determinar o que é exibido ou não. Use apenas atributos de código de acesso para listas que são mostradas em um local secundário onde a aparência precisa ser diferente das configurações.
Como você pode estilizar o texto de descrição?
Com base na documentação, posso definir o estilo do nome do arquivo e dos links de ação.
Além disso, como você estiliza os botões de paginação?
Use a classe eeSFL_FileDesc para estilizar o texto da descrição.
DICA: Use o recurso “Inspecionar Elemento” do seu navegador para encontrar facilmente quais classes ou IDs afetam qualquer elemento específico.
Hi
Eu achei as miniaturas muito grandes, então tive que adicionar isso
#eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
width: 20px;
altura: 20px;
}
para o meu tema css
Você poderia adicionar uma configuração para o tamanho da miniatura no administrador?
Sim, isso vai funcionar.
Pretendo adicionar uma guia de estilo nas configurações em breve. Mais do que tamanho do polegar.
Usei o site a seguir para obter instruções para tornar a tabela responsiva: https://css-tricks.com/responsive-data-tables/
Esta é a regra que adicionei ao meu css:
Apenas a tela @media e (max-width: 1024px) {
Tabela .eeFiles, .eeFiles thbody, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
bloco de exibição;
}
}
Olá
É possível usar telefones? Não consigo encontrar uma configuração responsiva. VALEU!
Sim, este plugin funcionará em dispositivos móveis, embora não haja um estilo integrado para ele. A Lista de Arquivos Simples usará as regras do seu tema.