Simple File List foi criado para assumir a aparência do tema do seu site por padrão. Sem nenhuma modificação no estilo, ele deve parecer apresentável no seu site WordPress.

No entanto, se você deseja ajustar a aparência, você pode usar CSS dentro do tema do seu site. Ao mirar nos seguintes elementos HTML, você pode sobrepor os estilos internos com seu próprio CSS.

Confira essas Exemplos de CSS se precisar de ajuda para começar.

Elementos comuns em todas as visualizações de lista de arquivos

Wrapper e contêiner de lista de arquivos

• .eeSFL: O contêiner principal para listas de arquivos em todas as visualizações.
• .eeFiles: Um contêiner que contém os itens do arquivo.

Estrutura do item de arquivo

• .eeSFL_Item: Representa um arquivo individual com detalhes, ações e metadados.
• .eeSFL_Thumbnail: Contém a imagem em miniatura do arquivo.
• .eeSFL_FileName: Exibe o nome do arquivo e fornece um link.
• .eeSFL_FileDetails: Contém metadados (tamanho do arquivo, data de upload).
• .eeSFL_ListFileActions: Contém os botões de ação para cada arquivo (abrir, baixar, editar, excluir).

---

Elementos específicos da visualização de tabela

A visualização de tabela usa uma tabela HTML tradicional para exibir os arquivos. Essa visualização é responsiva e mudará para uma visualização simples em linha em telas pequenas.

Recipiente de mesa e estrutura

• .eeSFL atua como o wrapper principal para a visualização da tabela.
• .eeFiles forma a estrutura da tabela.
• Colunas da tabela
  • .eeSFL_Thumbnail representa uma coluna para a miniatura.
  • .eeSFL_FileName coluna para o nome do arquivo.
  • .eeSFL_FileSize coluna para tamanho do arquivo.
  • .eeSFL_FileDate coluna para a data.
• Linha da tabela
  • .eeSFL_Item representa a linha inteira de um arquivo.
    Cada coluna (Miniatura, Nome, Tamanho, Data) é uma célula dentro .eeSFL_Item.

---

Elementos específicos da visualização de blocos

A visualização em blocos usa um layout de grade para exibir os arquivos, do canto superior esquerdo ao canto inferior direito.

• .eeFiles segura os elementos do ladrilho.
• .eeSFL_Tile atua como um único wrapper de bloco, contendo cada arquivo.
• .eeSFL_FileLink para nomes de arquivos clicáveis.
• .eeSFL_ListFileActions dentro do bloco inclui ações como Abrir, Baixar, Copiar Link.

---

Elementos específicos do Flex View

A visualização flexível foi projetada para se espalhar uniformemente pela largura do elemento contido.

• .eeFiles usa um layout flexbox para alinhamento responsivo de itens de arquivo.
• .eeSFL_Item representa o contêiner de arquivos com um layout flexível.
• .eeSFL_Thumbnail exibe a miniatura do arquivo em uma linha flexível.
• .eeSFL_FileInfo fornece detalhes do arquivo ao lado da miniatura.
• .eeSFL_FileDetails exibe o tamanho do arquivo e a data.
• .eeSFL_ListFileActions fornece links para ações como baixar, copiar e excluir.

---

Carregar elementos do formulário

Estrutura do formulário

• #eeSFL_UploadForm envolve todo o formulário de upload.
• .eeSFL_UploadFilesTitle é o título do formulário de upload.

Campos de entrada

• #eeSFL_Name Entrada para inserir o nome do carregador do arquivo.
• #eeSFL_Email Entrada para inserir o e-mail do remetente.
• #eeSFL_FileDesc entrada de texto para descrição do arquivo.

Área de upload de arquivo

• #eeSFL_FileInput para selecionar arquivos.
• #eeSFL_FileDropZone para uploads de arquivos de arrastar e soltar.
• #eeSFL_FileUploadQueue exibe arquivos na fila para upload.

Botões e indicadores

• #eeSFL_UploadGo O botão que inicia o processo de upload.
• #eeSFL_UploadProgress mostra o progresso do upload de arquivos.
• .sfl_instuctions fornece diretrizes ou notas para uploads de arquivos.