VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Chezoit Ven 11 Fév 2022 - 16:41

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Pas de date.
Lien du forum : http://www.revopowaaa.com

Description du problème

Infos : des CSS / Template / Script ont été rajoutés/modifiés.

Bonjour à tous,

Comme noté dans le titre, j'aurais voulu changer/rajouter/réorganiser le menu.
-Changer l'icône et le nom "Accueil", par : "Forum" avec cette icône VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu For10.
-Rajouter : la Messagerie, avec son lien, avec cette icône VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Mess_o10.
-Changer l'icône de la version Web par ce celui VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Kisspn12.

-Et enfin, réorganisez tout le menu comme l'image ci-dessous.
VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Img_0018

Merci à tous ceux qui pourraient m'aider !!! viking


Dernière édition par Chezoit le Sam 19 Fév 2022 - 0:54, édité 1 fois
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Oka.mi Lun 14 Fév 2022 - 16:03

Bonjour,

Je vais vous donner une explication plus développée de la solution donnée dans ce message car à mon avis c'est tout ce qui vous manque pour parvenir à personnaliser les liens vous-mêmes.

Vous avez donc adopté la deuxième solution qui consiste à modifier le overall_footer de la version mobile. Pour ajouter ou modifier des liens, la procédure est donc la même. Repérez le passage des liens qui ressemble donc à ceci :
VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Sans_t23

Maintenant décortiquons le code initial que je vous ai communiqué :
Code:
$('a[class="navElement"][href*="/login"]').before('<li><a class="navElement" href="/f1-">Truc cool</a></li><li><a class="navElement" href="/search?search_id=watchsearch">Sujets suivis</a></li>');
$('a[class="navElement"][href*="/login"]') on cible le lien (a) qui a pour class "navElement" et href (le href de <a href="..."> donc) qui contient "/login". En d'autres mots, on cible le lien "Connexion" (/login) et "Déconnexion" (/login?logout...).
.before insère un élément avant le lien qu'on vient de cibler. Sur votre screen, on peut voir que vous voulez changer pour des liens après "Déconnexion". Vous avez donc juste à modifier .before par .after
Enfin, entre les parenthèses et guillemets, on trouve le contenu qu'on insère avant ou après le lien ciblé. Schématiquement, on a
(' ouverture parenthèse guillemet du contenu à insérer
<li> balise ouvrante d'un élément de la liste
<a class="navElement" href="/f1-"> le lien de l'élément de la liste qu'on vient d'annoncer. Remplacer le "/f1-" par le lien de la page concernée (/forum, /privmsg?folder=inbox...)
Remplacer "Truc cool" par le nom du lien souhaité.
</a> fermeture de la balise du lien.
</li> fermeture de la balise de l'élément de la liste.
Utiliser la même suite <li><a class="navElement" href="... </a></li> pour tous les autres liens que vous souhaitez ajouter.
'); fermeture parenthèse guillemet du contenu à insérer, à mettre à la fin de tous les li (éléments de la liste) que vous aurez ajoutés.


VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu 1213Donnez un titre explicite VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu VTzsyWB à votre sujet pour améliorer son référencement

Remerciez VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Chezoit Mar 15 Fév 2022 - 15:08

M.....i B......P !  thumleft

J'ai réussi à rajouter les extras, mais je me suis retrouvé avec un doublon "Accueil / Forum", ne sachant pas modifier supprimer "Acceuil" et idem je n'ai pas réussi à changer l'icône de "version web".
Finalement pour l'ordre, ce n'est pas plus mal que "déconnexion" se retrouve en bas.

Questions.
Comment supprimer un élément par défaut  ou le modifier ? Exemple. "Acceuil" (A)
Comment je peux juste changer l'icône de "Version web" ? (B)
Comments je peux agrandir un icône ?

VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Img_0810

Voici le code que j'ai modifié pour le menu.
Code:
$('a[class="navElement"][href*="/profile?mode=editprofile&page_profil=notifications"]').after('
<li><a class="navElement" href="/privmsg?folder=inbox"><img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f11/11/70/59/71/mess_o10.png" />Messagerie</a></li>
<li><a class="navElement" href="/search?search_id=watchsearch"><img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f78/11/70/59/71/sujet_10.png" />Sujets suivis</a></li>
<li><a class="navElement" href="/forum"><img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f11/11/70/59/71/for10.png" />Forum</a></li>
<li><a class="navElement" href="/f16-"><img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f78/11/70/59/71/news10.png" />News</a></li>
');

Merci !
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Oka.mi Ven 18 Fév 2022 - 10:19

Bonjour,

Chezoit a écrit:Comment supprimer un élément par défaut ou le modifier ? Exemple. "Acceuil"
On va commencer par retirer le lien "Forum" de votre code pour ne pas avoir de doublon
Code:
<li><a class="navElement" href="/forum"><img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f11/11/70/59/71/for10.png" />Forum</a></li>

Ensuite, on remonte un peu plus haut dans le template, presque au début du script, au niveau des deux $('#header').prepend, et on ajoute cette ligne de code:
Code:
$('a[class="navElement"][href="/forum"]').html('<img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f11/11/70/59/71/for10.png" /><span class="navBtnLabel">Forum</span>');
Avec ça, on cible le lien (a) qui a pour href "/forum" et on redéfinit son contenu html avec la nouvelle icône ( https://i.servimg.com/u/f11/11/70/59/71/for10.png ) et le nouveau nom du lien ("Forum").

Chezoit a écrit:Comment je peux juste changer l'icône de "Version web" ?
Juste après le précédent ajout, mettez ceci
Code:
$('a#web_redirect').html($('a#web_redirect').html().replace('<span class="navBtnIcon" style="background-position:0 0;"><i class="material-icons"></i></span>', '<img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f78/11/70/59/71/kisspn12.png" />'));
Avec ça, on cible le lien (a) qui a pour id "web_redirect" et on redéfinit son contenu html en remplaçant l'ancienne icône par la nouvelle ( https://i.servimg.com/u/f78/11/70/59/71/kisspn12.png ).

Une capture d'écran pour vous aider à visualiser où situer les deux lignes de code à ajouter
VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Image36

Chezoit a écrit:Comments je peux agrandir un icône ?
Je vous avais fait ajouter une class sur toutes vos icônes personnalisées pour définir un css commun. C'est ainsi que vos images noires à l'origine deviennent blanches : grâce à "filter:invert(1)" et qu'elles font toutes la même taille ("height:24px" et "width:24px").
Vous trouvez cela dans votre css :
Code:
img.nav_icon{filter:invert(1);height:24px;width:24px;}
Vous pouvez donc soit augmenter le height et le width pour toutes les icônes, soit les redimensionner vous-même via logiciel de graphisme, et dans ce cas il faut enlever les lignes height et width qui redéfinissent via css la taille de l'image.


VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu 1213Donnez un titre explicite VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu VTzsyWB à votre sujet pour améliorer son référencement

Remerciez VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Chezoit Ven 18 Fév 2022 - 14:42

Hello,

Voici le retour.
-Doublon Forum bien retiré.
-Accueil bien changé en Forum. (Comment puis-je le placer après Sujets suivis ?)
-Les modifications ne veulent pas s'appliquer pour Version Web. Je vous colle ci-dessous le template avec l'ajout.
overall_footer:
-Le CSS pour la taille des images est tout simplement efficace.
VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu AW4045605_08
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Oka.mi Ven 18 Fév 2022 - 21:35

Remplacez la ligne de code précédemment ajoutée pour $('a#web_redirect') par
Code:
$('a#web_redirect').html('<img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f78/11/70/59/71/kisspn12.png" /><span class="navBtnLabel">Version web</span>');
Ainsi au lieu de remplacer seulement l'icône, on redéfinit le contenu html pour éviter tout souci de copier coller avec le caractère spécial de l'icône.

Chezoit a écrit:Comment puis-je le placer après Sujets suivis ?
Plus loin, juste après votre bloc sur les liens ajoutés $('a[class="navElement"][href*="/profile?mode=editprofile&page_profil=notifications"]'), vous pouvez ajouter ceci :
Code:
 $('a[class="navElement"][href="/search?search_id=watchsearch"]').after($('a[class="navElement"][href="/forum"]'));


VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu 1213Donnez un titre explicite VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu VTzsyWB à votre sujet pour améliorer son référencement

Remerciez VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2707
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu

Message par Chezoit Sam 19 Fév 2022 - 0:53

Tout est parfait !

....Je ne sais plus comment vous dire ...merci. Very Happy

VERSION MOBILE - Changer icône et nom dans le menu + rajouter message privé MP/DM dans le menu Respect-tip-of-the-hat
Chezoit

Chezoit
****

Masculin
Messages : 250
Inscrit(e) le : 14/03/2008

Voir le profil de l'utilisateur http://www.revopowaaa.com
Chezoit a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum