Exemples CSS

Vous pouvez modifier le style de la liste de fichiers et du formulaire de téléchargement en ajoutant du CSS à votre fichier de thème. L'astuce consiste à cibler le bon Éléments HTML.

Voici quelques extraits CSS de base pour un copier-coller facile.

Spécifier la largeur de la liste

Pour contrôler la largeur globale de la liste de fichiers, utilisez ce style pour cibler le conteneur wrapper :

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

Modifier la taille de la police du nom du fichier

Vous pouvez augmenter ou diminuer la taille de la police du nom du fichier pour améliorer la lisibilité.

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

Modifier la taille de la vignette

Pour modifier la taille de la miniature dans la liste des fichiers, utilisez ce style pour modifier les dimensions :

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

Déplacer les instructions de téléchargement vers la gauche

Si vous souhaitez aligner à gauche les instructions de téléchargement, appliquez le style suivant :

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

Styliser le nom du fichier comme un bouton

Pour que le nom du fichier ressemble à un bouton, ajoutez un remplissage, une couleur d'arrière-plan et un style de bordure :

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

Quels nouveaux extraits aimeriez-vous voir ?

Laisser un commentaire

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..