(1) 2 »
Personnalisation des boutons (Bootstrap)
Pascal C.
Pascal C.

Personnalisation des boutons (Bootstrap)

Pascal C. 431
28/10/2021 08:22
#1
Pascal C. 431
28/10/2021 08:22
L'idée serait de pouvoir personnaliser des boutons avec des couleurs autres que celles définies par bootstrap (primary, ...)

Idéalement boutons, mais aussi onglets et navbar.

Dans mon cas précis, l'idée est de naviguer d'une page à l'autre via ces boutons/onglets.
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 08:24
#2
Alain T 610
28/10/2021 08:24
Ok, donne nous au moins 2 couleurs que tu veux utiliser, comme ça on avance en direct avec un vrai besoin !
Re : Personnalisation des boutons (Bootstrap)
Pascal C.
Pascal C.

Re : Personnalisation des boutons (Bootstrap)

Pascal C. 431
28/10/2021 08:45
#3
Pascal C. 431
28/10/2021 08:45
#8fbc13
#ff9f1a
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 08:49
#4
Alain T 610
28/10/2021 08:49
ok et un nom associé à chacune des couleurs ? (Couleur ?, Catégorie ?, Rubrique ? ...)
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 12:39
#5
Alain T 610
28/10/2021 12:39
Bon, ben voila ! C'est fini !
Héhéhé

Je te montre ce que cela donne avec ta couleur orange (#ff9f1a) que j'ai appelé borne.
Ensuite, je t'expliquerai la démarche que j'ai appliqué sur le post suivant.

Un aperçu + le code HTML + le code CSS ? C'est possible ! ICI
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 12:55
#6
Alain T 610
28/10/2021 12:55
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/4
Le 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-shadow0 0 0 0.2rem rgba(781782350.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-shadow0 0 0 0.2rem rgba(781782350.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 borne

La suite au prochain post.
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 13:29
#7
Alain T 610
28/10/2021 13:29
6 - Ensuite, tu remarques que la couleur officielle de primary dans ce fichier est :
--primary#2fa4e7;


7 - Détermination des variantes de couleurs
Or tu vois qu'il y a plusieurs couleurs, elles sont proches MAIS différentes :
#2fa4e7

#1992d7
#178acc
#1682c0
rgba(78, 178, 235, 0.5)
Il faut que tu vois si c'est plus clair ou non que la couleur de référence (#2fa4e7)

Clair =====> Sombre
rgba(78, 178, 235, 0.5) / #2fa4e7 / #1992d7 / #178acc / #1682c0

Donc maintenant, on prends ta référence de couleur : #ff9f1a
https://www.fgruber.ch/projects/50-colorScheme/?hexColor=ff9f1a

Tu vas prendre par exemple :
Clair =====> Sombre
-10% / #ff9f1a / +5% / +10% / +15%
donc
#ffb44d / #ff9f1a / #ff9400 / #e68600 / #cd7700
et #ffb44d à convertir donne (255, 180, 77) et on ajoute 50% de transparence.
On obtient au final
rgba(255, 180, 77, 0.5) / #ff9f1a / #ff9400 / #e68600 / #cd7700

Tu peux bien sur changer ces valeurs, trouver un autre site qui te propose plus de dégradé.
L'idée est de comprendre le principe et ensuite d'adapter.

Tu as maintenant tout les élements pour écrire tes css personnalisés.
Il faut évidement les placer aux bons endroits
Tu peux toujours prendre pour repère les définitions btn-primary

8 - reprends ton fichier my_xoops.css pour apposer les bonnes valeurs de couleurs.
On a donc ceci maintenant :
.btn-borne {
color#fff;
background-color#ff9f1a;
border-color#ff9f1a;
}

.
btn-borne:hover {
color#fff;
background-color#ff9400;
border-color#e68600;
}

.
btn-borne:focus, .btn-borne.focus {
color#fff;
background-color#ff9400;
border-color#e68600;
box-shadow0 0 0 0.2rem rgba(255168480.5);
}

.
btn-borne.disabled, .btn-borne:disabled {
color#fff;
background-color#ff9f1a;
border-color#ff9f1a;
}

.
btn-borne:not(:disabled):not(.disabled):active, .btn-borne:not(:disabled):not(.disabled).active,
.
show > .btn-borne.dropdown-toggle {
color#fff;
background-color#e68600c;
border-color#cd7700;
}

.
btn-borne:not(:disabled):not(.disabled):active:focus, .btn-borne:not(:disabled):not(.disabled).active:focus,
.
show > .btn-borne.dropdown-toggle:focus {
box-shadow0 0 0 0.2rem rgba(255180770.5);
}


Suite au prochain post
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 13:34
#8
Alain T 610
28/10/2021 13:34
Mince, mais ça ressemble grave à un tuto ça...
lol ok, faudra que je le convertisse en tuto.

9 - Allez, ensuite il te reste à ajouter quelques définitions utiles pour la couleur du texte, du fond ou des bordures :
.borne-color {
  
color #ff9f1a  ;
}

.
borne-border {
border-color #ff9f1a  ;
border-style solid;
border-width thin;
}

.
borne-bg {
background-color#ff9f1a   ;
}


10 - Il te reste à vider le cache XOOPS + navigateur pour que le navigateur puisse relire le fichier css personnalisé.

11 - Maintenant tu peux l'utiliser dans ton contenu.

Un exemple visible ici

Il faudra faire cela pour chaque bouton colorisé supplémentaire.
Ici je n'ai pas fait btn-outline-primary mais le principe reste exactement le même.

Je dirais... Je ne peux pas faire mieux, non ?
Re : Personnalisation des boutons (Bootstrap)
Pascal C.
Pascal C.

Re : Personnalisation des boutons (Bootstrap)

Pascal C. 431
28/10/2021 14:36
#9
Pascal C. 431
28/10/2021 14:36
Oula... j'ai pas eu le temps de consulter le post ce matin et je vois que tu as déjà tout terminé
Alain, toujours aussi efficace.

Juste une chose, c'est normal qu'il ne déroule pas le dropdown sur le lien codepen?

Bon, j'ai juste survolé car je n'ai pas le temps tout de suite, et ça semble un peu compliqué quand même... mais comme tu as tout bien détaillé et je pense que ça va le faire. Et oui, ça va faire un excellent tuto,..

J'espère arriver à tester dans l'aprèm', je te tiens au jus dans tous les cas.
Re : Personnalisation des boutons (Bootstrap)
Alain T
Alain T

Re : Personnalisation des boutons (Bootstrap)

Alain T 610
28/10/2021 15:38
#10
Alain T 610
28/10/2021 15:38
Citation :
Juste une chose, c'est normal qu'il ne déroule pas le dropdown sur le lien codepen?

arg, humm
Oui,
Pour le dropdown, comme indiqué ici : https://getbootstrap.com/docs/4.6/components/dropdowns/#overview
Il faut inclure du javascript (soit popper.js soit plus largement bootstrap.bundle.js)

Aucune inquiétude pour toi, Il est présent dans le thème xswatch4 donc ça va marcher.
Je vais tenter de l'intégrer dans codepen, mais ça n'a pas l'air de fonctionner pour l'instant.