Re : Personnalisation des boutons (Bootstrap)
Citation :
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.
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.
Re : Personnalisation des boutons (Bootstrap)
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 :
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 ?
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)
6 - Ensuite, tu remarques que la couleur officielle de primary dans ce fichier est :
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 :
Suite au prochain post
--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-shadow: 0 0 0 0.2rem rgba(255, 168, 48, 0.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-shadow: 0 0 0 0.2rem rgba(255, 180, 77, 0.5);
} Suite au prochain post
Re : Personnalisation des boutons (Bootstrap)
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 :
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.
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-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 borne
La suite au prochain post.
Re : Personnalisation des boutons (Bootstrap)
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
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 : Je me lance.
Et puis un grand Merci pour tes remerciements et ton retour positif sur le site, qui nous font très plaisir.
Je précise "Nous" car même si j'interviens plus souvent dans les forums que Greg, l'autre membre de l'équipe monxoops.fr, Greg est un pilier (Pas au Rugby lol).
C'est lui qui a développé le module xmtutorial exclusivement pour notre besoin ici sur ce site.
Il est bien évidemment l'auteur de la série des xmodules tels que xmnews, xmcontent, xmsocial notamment.
Il connait également assez bien la construction du noyau XOOPS.
Je précise "Nous" car même si j'interviens plus souvent dans les forums que Greg, l'autre membre de l'équipe monxoops.fr, Greg est un pilier (Pas au Rugby lol).
C'est lui qui a développé le module xmtutorial exclusivement pour notre besoin ici sur ce site.
Il est bien évidemment l'auteur de la série des xmodules tels que xmnews, xmcontent, xmsocial notamment.
Il connait également assez bien la construction du noyau XOOPS.
Re : Je me lance.
Cool !
Belle entrée en matière et bienvenue à toi.
Je vois que tu n'es pas en terre inconnue puisque tu as une expérience non négligeable de XOOPS.
Rien ne t'interdit de citer les 2 sites que tu as produits sous XOOPS, mais tu es libre aussi de ne pas les divulguer si tu veux les remanier grandement.
Le forum est là pour répondre à vos questions mais aussi échanger sur vos nouveaux besoins...
Alors n'hésite pas !
Belle entrée en matière et bienvenue à toi.
Je vois que tu n'es pas en terre inconnue puisque tu as une expérience non négligeable de XOOPS.
Rien ne t'interdit de citer les 2 sites que tu as produits sous XOOPS, mais tu es libre aussi de ne pas les divulguer si tu veux les remanier grandement.
Le forum est là pour répondre à vos questions mais aussi échanger sur vos nouveaux besoins...
Alors n'hésite pas !
