Guide d'utilisation pour personnaliser les widgets avec du CSS

Pour s'assurer que les widgets s'intègrent parfaitement dans votre site, vous avez la possibilité d'ajouter du CSS personnalisé afin de modifier leur apparence. 🎨
📖 Ce guide vous explique comment procéder pour personnaliser les styles des widgets.

1. Inspection du HTML et CSS existants 🔎

Avant de commencer à personnaliser les styles, il est important de comprendre la structure HTML et le CSS existants des widgets. 🧠
Voici comment vous pouvez procéder :

Ouvrir les outils de développement :
- Dans votre navigateur, faites un clic droit sur le widget que vous souhaitez personnaliser, puis sélectionnez "Inspecter" ou "Inspecter l'élément".
Cela ouvrira les outils de développement. ⚙️



Explorer le HTML et CSS :
- Dans les outils de développement, vous pouvez voir la structure HTML du widget.
Lorsque vous survolez les éléments, ils sont mis en surbrillance dans la fenêtre du navigateur. Cela vous permet d'identifier les différentes parties du widget.

- Dans la section des styles (souvent à droite), vous pouvez voir les règles CSS appliquées à chaque élément. Cela vous aide à comprendre comment les styles actuels fonctionnent.

2. Utiliser les classes pour personnaliser le style

Pour modifier le style d'un widget, vous utiliserez les classes CSS associées aux éléments que vous souhaitez personnaliser.
Voici comment procéder :

Identifier la classe :
- Dans les outils de développement, notez les classes CSS des éléments que vous voulez modifier.
Par exemple, si vous voulez changer le style du titre du widget, trouvez l'élément correspondant et notez sa classe.

Écrire du CSS personnalisé :
- Dans votre fichier CSS personnalisé, utilisez les classes identifiées pour appliquer vos styles.
Par exemple, pour changer la couleur du texte du titre, vous pouvez écrire :

.nom-de-classe-du-titre {
       color: blue;
}

3. Utilisation de la balise !important

Parfois, il peut être nécessaire de forcer l'application d'un style, même si d'autres règles CSS sont en conflit.

La balise !important peut être utilisée pour donner priorité à votre règle.
Utilisez cette balise avec précaution pour éviter des conflits inattendus.

Exemple :

.nom-de-classe {
    color: red !important;
}

4. Importer des polices personnalisées

Pour personnaliser encore plus vos widgets, vous pouvez utiliser des polices hébergées en ligne, comme celles disponibles sur Google Fonts.
Pour ce faire, ajoutez un @import au début de votre CSS :

Choisir une police sur Google Fonts :
- Rendez-vous sur Google Fonts, sélectionnez une police et copiez le lien @import.



Ajouter le @import à votre CSS :
- Collez le lien en haut de votre fichier CSS :

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
   
.nom-de-classe {
    font-family: 'Roboto', sans-serif;
}

5. Cacher le footer Score'n'co

Si vous souhaitez masquer une partie du widget, comme le footer, vous pouvez le faire en utilisant la règle suivante :

.footer {
    display: none !important;
}

Cette règle CSS sélectionne tous les éléments avec la classe footer et les cache en utilisant display: none;.
ℹ️ La balise !important assure que cette règle aura priorité sur toutes les autres règles CSS définies ailleurs.

Mis à jour le : 23/08/2024