(1) 2 »
Notification message
Pascal C.
Pascal C.

Notification message

Pascal C. 431
18/03/2021 00:01
#1
Pascal C. 431
18/03/2021 00:01
J'aimerais pouvoir modifier la couleur cercle incluant le nb de messages afin de passer de bleu en rouge par exemple.

J'avais fais cela sur de vieux thèmes depuis les css si mes souvenirs sont corrects, mais ici je ne retrouve rien qui me permettrait de modifier cela.

Je me dis que cela se trouve alors peut être plutôt dans le fichier montheme/modules/pm/pm_readmsg.tpl mais en même temps ce ne serait pas bien logique de modifier ça hors d'un fichier css.
Vous l'aurez compris, je suis là aussi paumé et si vous avez une piste...

Je m'aperçois que même des modifs mineures qui me semblaient assez simples à l'époque me posent de gros soucis.
C'est un peu déroutant et décourageant. Je ne comprends pas comment sont foutu ces thèmes et je crois bien que je ne suis pas prêt à en créer un de toutes pièces
Re : Notification message
Alain T
Alain T

Re : Notification message

Alain T 608
18/03/2021 07:16
#2
Alain T 608
18/03/2021 07:16
Salut,
très simple... quand on le sait
Déjà, il s'agit du fichier /tpl/inboxAlert.tpl dans ton thème,
ensuite, c'est la ligne
<strong class="mr-auto">&nbsp;<{$smarty.const.THEME_INBOX_ALERT}> <span class="badge badge-primary badge-pill"><{$newPms}></span></strong>


La doc de Bootstap 4 te donne ces infos ici : Pill badges

et donc si tu veux par exemple utiliser une des 8 couleurs prédéfinies,
Tu peux utiliser par exemple "danger", donc ici "badge-danger"
donc tu auras :
<strong class="mr-auto">&nbsp;<{$smarty.const.THEME_INBOX_ALERT}> <span class="badge badge-primary badge-pill badge-danger"><{$newPms}></span></strong>
Re : Notification message
Alain T
Alain T

Re : Notification message

Alain T 608
18/03/2021 07:32
#3
Alain T 608
18/03/2021 07:32
Mais je vais répondre à tes 2 futures questions qui seront

"Pourquoi les couleurs prédéfinies ne sont pas toujours les même ?"
La réponse est ici : Themes bootswatch

On retrouve les 8 valeurs prédéfinies mais avec des couleurs différentes selon le thème choisi parmi les 21 thèmes
valeurs prédéfinies :
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark


Ta deuxième question sera :
"Et si je veux mettre une autre couleur ?"

Très simple mais avec un tout petit peu plus de travail.
Pour ce faire, tu vas ajouter un élément css dans ton fichier my_css.css (ici c'est un exemple, tu remplaceras la couleur et le nom de ton élément css comme tu le souhaites)

/* couleur pour le core */
.xoopscore-color {
color #139EE8  ;
}

/* couleur pour les themes */
.xoopsthemes-color {
color darkseagreen;
}


et ensuite, il te suffira d'écrire

<strong class="mr-auto">&nbsp;<{$smarty.const.THEME_INBOX_ALERT}> <span class="badge badge-primary badge-pill xoopscore-color"><{$newPms}></span></strong>


Attention, IMPORTANT : parfois, tu ne vois pas le changement, car tu as modifié ton fichier css mais ton navigateur utilise le cache et donc ne répercute pas les modifs des fichiers css. Dans ce cas, pour ces modifs, il te faut systématiquement vider le cache de ton navigateur

Je pense avoir bien devancé tes questions, non ?
Re : Notification message
Pascal C.
Pascal C.

Re : Notification message

Pascal C. 431
18/03/2021 08:23
#4
Pascal C. 431
18/03/2021 08:23
Citation :

Je pense avoir bien devancé tes questions, non ?


Très clairement, tu as vraiment réponse à tout Alain. Merci

Ca m'a fait ma soirée d'hier sans trouver l'esquisse d'une solution. J'ai pas le temps de regarder tout de suite mais tes explications semblent très claires.
Faut absolument que j'arrive a bloquer un moment pour tenter d'étudie cette doc si je veux m'en sortir
Re : Notification message
Pascal C.
Pascal C.

Re : Notification message

Pascal C. 431
18/03/2021 12:13
#5
Pascal C. 431
18/03/2021 12:13
Alors, la modif le fichier /tpl/inboxAlert.tpl permet uniquement de changer la couleur de la notification dans la fenêtre qui s'affiche en pop-up.

pour le menu, j'ai effectué la même modif dans /tpl/nav-menu.tpl

Maintenant faut que je trouve le fichier pour le "menu utilisateur", j'arrive pas à y mettre la main dessus.

Sinon, est-il normal que tout soit en vrac à la suite dans les fichiers "bootstrap.min" ?
Re : Notification message
Alain T
Alain T

Re : Notification message

Alain T 608
18/03/2021 13:23
#6
Alain T 608
18/03/2021 13:23
Citation :
Sinon, est-il normal que tout soit en vrac à la suite dans les fichiers "bootstrap.min" ?


C'est pour optimiser la taille du fichier css et donc un gain de chargement et de temps pour tes visiteurs.
Donc la version "min" est une version condensée quasi illisible mais ce n'est pas grave.
Tu peux utiliser sinon la version bootstrap.css

En résumé :
bootstrap.css : version lisible mais de plus grande taille
bootstrap.min.css : version condensée de plus petite taille mais avec un fonctionnement identique.

Attention, le fichier bootstrap.css (et .min.css) n'est pas celui sur le site Bootstrap4
car tu utilises un thème xswatch4.
Si tu veux la version lisible, il faut la récupérer ici : Bootswatch.
Evidemment, il faut prendre le fichier associé au thème que tu as choisis.

Je suis bien conscient que ma réponse peut te sembler obscure, (le fait de prendre le fichier sur le site bootswatch)
mais si tu prends un peu de recul (et un peu de temps), tu verras que ça te semblera évident.
Re : Notification message
Alain T
Alain T

Re : Notification message

Alain T 608
18/03/2021 13:33
#7
Alain T 608
18/03/2021 13:33
Citation :
Maintenant faut que je trouve le fichier pour le "menu utilisateur", j'arrive pas à y mettre la main dessus.

Surcharge du bloc utilisateur géré par le module system
Donc ?
Si tu as compris,
tu devrais te précipiter dans un sous-dossier de ton thème :
/modules/system/blocks/system_block_user.tpl (pas la racine du site web, la racine de ton thème, soit /themes/xswatch4-enabled...)

Ensuite, facile :
<{xoInboxCount assign='unread_count'}>
        <{if 
$unread_count 0}>
            <
li class="nav-item"><class="nav-link info" href="<{xoAppUrl viewpmsg.php}>" title="<{$block.lang_inbox}>"><span class="fa fa-envelope-o"></span><{$block.lang_inbox}>
                    <
span class="badge badge-primary"><{$unread_count}></span></a></li>
        <{else}>
            <
li class="nav-item"><class="nav-link" href="<{xoAppUrl viewpmsg.php}>" title="<{$block.lang_inbox}>"><span class="fa fa-envelope-open-o"></span><{$block.lang_inbox}></a>
            </
li>
        <{/if}>


Tu retrouves la ligne :
<span class="badge badge-primary"><{$unread_count}></span></a></li>


J'espère que tu apprécies ma façon de te guider mais surtout de te proposer une méthode pour trouver la solution.
Je n'ai pas toujours la réponse, mais je fais de cette façon là. J'espère que ça va t'aider pour la suite.

Remarque :
Si tu ne trouves pas la surcharge dans ton thème (pour un autre bloc ou template par exemple), il te suffit de COPIER ce fichier dans le dossier :
/themes/mon_theme/modules/mon-module/mon-ficher.tpl
et
/themes/mon_theme/modules/mon-module/blocks/mon-block.tpl

Ensuite, tu travailles sur cette surcharge.
Ainsi, tu ne touches à rien sur le module,
C'est magique, la surcharge, non ?
Re : Notification message
Pascal C.
Pascal C.

Re : Notification message

Pascal C. 431
18/03/2021 13:40
#8
Pascal C. 431
18/03/2021 13:40
En résumé :
bootstrap.css : version lisible mais de plus grande taille
bootstrap.min.css : version condensée de plus petite taille mais avec un fonctionnement identique.

donc je copie directement bootstrap.css dans mon dossier css et il est pris en compte par défaut?
Du coup, boostrap.min est relégué en second plan et je pourrais même le supprimer pour ne pas m'emmeler entre les 2?

Punaise, la démarche me semble vraiment compliquée à appréhender.
Je pense qu'une fois que l'on a acquis les grands principes on s'y retrouve, mais en attendant je suis vraiment heureux que tu m'accordes tant de temps
Re : Notification message
Alain T
Alain T

Re : Notification message

Alain T 608
18/03/2021 13:53
#9
Alain T 608
18/03/2021 13:53
Utilise Uniquement 1 seul fichier
Soit bootstrap.css
Soit bootstrap.minc.css

C'est le même donc tu ferais charger 2 fichiers à tes visiteurs avec un contenu identique !!!

Mon conseil :
Utilise le fichier bootstrap.minc.css car de toute façon, tu NE dois pas modifier le fichier lisible, il y a bien trop de paramètres qui vont t'échapper.
Si tu veux voir le contenu, garde de côté le fichier lisible, pour toi, sur ton pc, mais ne l'intègre pas sur ton serveur.

Non je t'assure que la "surcharge" est simple une fois que l'on comprends son fonctionnement!

Il existe un tuto sur l'ancien site, il est très ancien mais le principe est toujours là
La surcharge des templates
Surcharge des commentaires, pas à pas...
Re : Notification message
Pascal C.
Pascal C.

Re : Notification message

Pascal C. 431
18/03/2021 14:04
#10
Pascal C. 431
18/03/2021 14:04
Oui, j'apprécie vraiment ta manière. Tu me permets petit à petit de comprendre comment est conçu le thème.

Alors oui c'est très bien la surcharge, car cela permet de totalement paramétrer la partie visuelle sans avoir à intervenir dans le système ni ses modules...
Mais en même temps, dans un tel cas je n'ai a aucun moment la démarche de me dire qu'il faut que je regarde un block géré depuis module/system pour solutionner mon problème... et j'ai tendance à rester à gratter dans module/pm

Mais je crois que je commence à comprendre le fonctionnement petit à petit

Bref, ça a fonctionné à la perfection.
Maintenant, comme je travaille sur 2 thèmes en parallèles (un clair basé sur "cerulan" & un sombre basé sur "cyborg"), je vais tenter de tout refaire avec le second thème , mais cette fois en me basant sur ta seconde méthode en utilisant le code couleur en hexa, comme ça je serais sûr d'avoir bien tout compris.

Citation :

Alain T a écrit :
Citation :
Maintenant faut que je trouve le fichier pour le "menu utilisateur", j'arrive pas à y mettre la main dessus.

Surcharge du bloc utilisateur géré par le module system
Donc ?
Si tu as compris,
tu devrais te précipiter dans un sous-dossier de ton thème :
/modules/system/blocks/system_block_user.tpl (pas la racine du site web, la racine de ton thème, soit /themes/xswatch4-enabled...)

Ensuite, facile :
<{xoInboxCount assign='unread_count'}>
        <{if 
$unread_count 0}>
            <
li class="nav-item"><class="nav-link info" href="<{xoAppUrl viewpmsg.php}>" title="<{$block.lang_inbox}>"><span class="fa fa-envelope-o"></span><{$block.lang_inbox}>
                    <
span class="badge badge-primary"><{$unread_count}></span></a></li>
        <{else}>
            <
li class="nav-item"><class="nav-link" href="<{xoAppUrl viewpmsg.php}>" title="<{$block.lang_inbox}>"><span class="fa fa-envelope-open-o"></span><{$block.lang_inbox}></a>
            </
li>
        <{/if}>


Tu retrouves la ligne :
<span class="badge badge-primary"><{$unread_count}></span></a></li>


J'espère que tu apprécies ma façon de te guider mais surtout de te proposer une méthode pour trouver la solution.
Je n'ai pas toujours la réponse, mais je fais de cette façon là. J'espère que ça va t'aider pour la suite.

Remarque :
Si tu ne trouves pas la surcharge dans ton thème (pour un autre bloc ou template par exemple), il te suffit de COPIER ce fichier dans le dossier :
/themes/mon_theme/modules/mon-module/mon-ficher.tpl
et
/themes/mon_theme/modules/mon-module/blocks/mon-block.tpl

Ensuite, tu travailles sur cette surcharge.
Ainsi, tu ne touches à rien sur le module,
C'est magique, la surcharge, non ?