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 !
Re : Améliorations du site
Allez,
un petit ajout qui permettra de naviguer plus facilement dans un sujet dans les forum.
J'ai ajouté la barre de navigation des pages d'un sujet en haut.
Cette barre n'était présente qu'en bas, et je pense que l'ajouter également en haut n'est pas superflue.
Voila, c'est tout !
un petit ajout qui permettra de naviguer plus facilement dans un sujet dans les forum.
J'ai ajouté la barre de navigation des pages d'un sujet en haut.
Cette barre n'était présente qu'en bas, et je pense que l'ajouter également en haut n'est pas superflue.
Voila, c'est tout !
Re : imagehover
Heuuuuu.... NON.
Tu vires le dossier xswatch4 que tu avais auparavant et tu le remplaces par celui que tu viens de récupérer.
Ensuite, tu en fais une copie de travail genre ldf-v1
Puis tu refais tout ce que tu as fait auparavant sur ton thème de travail.
Ainsi, tu repars sur une base PROPRE et maîtrisée.
Bien sur, c'est plus long de reprendre ton travail précédent mais tu maitrises ce que tu fais.
Un écrasement implique de savoir que cela n'impacte pas la version source, donc moins maitrisé et trop d'aléa pour moi.
Est-ce que je suis compréhensible ?
Pas sur - lol - que ma prose soit claire...
Tu vires le dossier xswatch4 que tu avais auparavant et tu le remplaces par celui que tu viens de récupérer.
Ensuite, tu en fais une copie de travail genre ldf-v1
Puis tu refais tout ce que tu as fait auparavant sur ton thème de travail.
Ainsi, tu repars sur une base PROPRE et maîtrisée.
Bien sur, c'est plus long de reprendre ton travail précédent mais tu maitrises ce que tu fais.
Un écrasement implique de savoir que cela n'impacte pas la version source, donc moins maitrisé et trop d'aléa pour moi.
Est-ce que je suis compréhensible ?
Pas sur - lol - que ma prose soit claire...
Re : imagehover
Citation :
A ce jour, elle est identique... (sauf dans sa construction, pour que ce thème puisse fonctionner aussi sur XOOPS 2.5.10)
puisque je viens de reporter toutes les modifs, ajouts et correction de xswatch4 vers xswatch4-enabled.
Mais il faut bien récupérer le dossier depuis la version en cours de dev pour avoir la dernière version, pas depuis une version taguée.
J'ai donné le lien un peu plus haut.
N'est-elle pas moins récente que la version enabled ?
A ce jour, elle est identique... (sauf dans sa construction, pour que ce thème puisse fonctionner aussi sur XOOPS 2.5.10)
puisque je viens de reporter toutes les modifs, ajouts et correction de xswatch4 vers xswatch4-enabled.
Mais il faut bien récupérer le dossier depuis la version en cours de dev pour avoir la dernière version, pas depuis une version taguée.
J'ai donné le lien un peu plus haut.
