Exemple CSS

Puteți schimba stilul listei de fișiere și să încărcați formularul adăugând CSS la fișierul dvs. temă. Trucul este să țintiți corect Elemente HTML.

Iată câteva fragmente CSS de bază pentru copiere și lipire ușoară.

Specificați lățimea listei

Pentru a controla lățimea totală a listei de fișiere, utilizați acest stil pentru a viza containerul wrapper:

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

Modificați dimensiunea fontului numelui fișierului

Puteți mări sau micșora dimensiunea fontului pentru numele fișierului pentru a îmbunătăți lizibilitatea.

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

Schimbați dimensiunea miniaturii

Pentru a modifica dimensiunea miniaturii din lista de fișiere, utilizați acest stil pentru a modifica dimensiunile:

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

Mutați instrucțiunile de încărcare la stânga

Dacă doriți să aliniați la stânga instrucțiunile de încărcare, aplicați următorul stil:

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

Stilați numele fișierului ca pe un buton

Pentru ca numele fișierului să arate ca un buton, adăugați o umplutură, culoare de fundal și stil pentru chenar:

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 */
}