Exemplos de CSS

Você pode alterar o estilo da lista de arquivos e do formulário de upload adicionando CSS ao seu arquivo de tema. O truque é direcionar o apropriado Elementos HTML.

Aqui estão alguns trechos básicos de CSS para fácil cópia e colagem.

Especifique a largura da lista

Para controlar a largura geral da lista de arquivos, use este estilo para direcionar o contêiner wrapper:

body .eeSFL { /* Use body to ensure specificity */
    max-width: 80%; /* Adjust this value as needed */
    margin: 0 auto; /* Centers the list horizontally */
}

Alterar o tamanho da fonte do nome do arquivo

Você pode aumentar ou diminuir o tamanho da fonte do nome do arquivo para melhorar a legibilidade.

.body eeSFL_FileName {     font-size: 1.2em; /* Increase to 1.2 times the base size */ 
}

Alterar o tamanho da miniatura

Para alterar o tamanho da miniatura na lista de arquivos, use este estilo para alterar as dimensões:

body .eeSFL_Thumbnail img {
    width: 128px; /* Double the size */
    height: auto; /* Maintain aspect ratio */
}

Mova as instruções de upload para a esquerda

Se desejar alinhar à esquerda as instruções de upload, aplique o seguinte estilo:

body .sfl_instuctions {
    text-align: left; /* Align text to the left */
    margin-left: 0; /* Remove any existing left margin */
}

Estilize o nome do arquivo como um botão

Para fazer com que o nome do arquivo pareça um botão, adicione algum preenchimento, cor de fundo e estilo de borda:

body .eeSFL_FileName {
    display: inline-block;
    padding: 10px 15px; /* Add padding around the text */
    background-color: #0073aa; /* Set background color */
    color: #fff; /* Set text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

body .eeSFL_FileName:hover {
    background-color: #005177; /* Darker shade on hover */
}

Que novos trechos você gostaria de ver?

Deixe um comentário

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