Como estilizar a aparência da lista e do carregador

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;
}

13 ideias sobre “Como definir o estilo da lista e a aparência do uploader”

      • 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

        Resposta
        • 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.

    • 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.

      Resposta
  1. 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?

    Resposta

Deixe um comentário

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.