Maintenant la démarche.
Avant, je tiens à te dire que les pros du CSS ne feraient pas comme cela, mais utiliserait le SASS avec le fichier de paramètres _variables.scss mais ça demande bien plus de notions...
Nous allons donc appliquer la méthode de personnalisation d'un fichier css.
Comme ta base de thème est xswatch4, la toute dernière mise à jour,
tu vas pouvoir utiliser le fichier /themes/
mon-theme/css/my_xoops.css pour :
- un thème unique
- ou le thème claire si tu utilises le mode clair/mode sombre
...Sans même intervenir dans le fichier theme.tpl ! Tout est déjà intégré ! (Merci qui ? héhéhé)
Elle est pas belle la vie ?
1 - Il te faut récupérer le fichier css lisible utilisé dans ton thème
Tu peux le télécharger ici :
https://bootswatch.com/4/cerulean/ Attention, bien prendre le fichier en 4.6 donc sous
https://bootswatch.com/4Le lien
https://bootswatch.com/ donne les fichiers pour Bootstrap5
Donc tu récupères le fichier bootstrap.css (le fichier bootstrap.min.css est le même mais n'est pas très lisible).
2 - Surtout, tu n'intègres pas ce fichier dans ton site, tu le mets dans un dossier de travail.
Il va juste te servir de modèle pour copier certains éléments pour ton propre fichier personnalisé my_xoops.css
3 - Recherche dans ce fichier la chaine btn-primary par exemple.
Dans cet exemple, on cherche à trouver toutes les chaînes qui utilisent un bouton de couleur (ici primary).
On obtient :
.btn-primary {
color: #fff;
background-color: #2fa4e7;
border-color: #2fa4e7;
}
.btn-primary:hover {
color: #fff;
background-color: #1992d7;
border-color: #178acc;
}
.btn-primary:focus, .btn-primary.focus {
color: #fff;
background-color: #1992d7;
border-color: #178acc;
box-shadow: 0 0 0 0.2rem rgba(78, 178, 235, 0.5);
}
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: #2fa4e7;
border-color: #2fa4e7;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #178acc;
border-color: #1682c0;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(78, 178, 235, 0.5);
}
4 - Maintenant tu prends ce code, et tu le copies dans ton fichier my_xoops.css
5 - Tu changes ensuite partout la chaine
primary par la chaine
borneLa suite au prochain post.
