CSS-voorbeelden

U kunt de styling van de bestandslijst en het uploadformulier wijzigen door CSS toe te voegen aan uw themabestand. De truc is om de juiste HTML-elementen.

Hier zijn enkele basis-CSS-fragmenten die u eenvoudig kunt kopiëren en plakken.

Geef de breedte van de lijst op

Om de algehele breedte van de bestandslijst te bepalen, gebruikt u deze stijl om de wrappercontainer te targeten:

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

Wijzig de lettergrootte van de bestandsnaam

U kunt de lettergrootte van de bestandsnaam vergroten of verkleinen om de leesbaarheid te verbeteren.

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

De grootte van de miniatuur wijzigen

Om de miniatuurgrootte in de bestandslijst te wijzigen, gebruikt u deze stijl om de afmetingen te wijzigen:

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

Verplaats de uploadinstructies naar links

Als u de uploadinstructies links wilt uitlijnen, past u de volgende stijl toe:

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

Stijl de bestandsnaam als een knop

Om de bestandsnaam op een knop te laten lijken, voegt u wat opvulling, achtergrondkleur en randopmaak toe:

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

Welke nieuwe fragmenten zou je graag willen zien?

Laat een bericht achter

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.