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

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

.
-Rajouter : la Messagerie, avec son lien, avec cette icône

.
-Changer l'icône de la version Web par ce celui

.

-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

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.

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 !

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.

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:

Code::  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div> <main>  {PROTECT_FOOTER} <a id="to-top" href="#wrap"><i class="material-icons"></i></a> <div class="application_footer_spacer"></div> </main> </div>  <div id="addthis-toolbar"> <div class="btn-floating-left" tabindex="100"> <i class="material-icons">share</i> </div> <div class="addthis-toolbar-btn" style="display:none;"> {switch_social_share.SOCIAL_BUTTONS} </div> </div> <script type="text/javascript"> $('#addthis-toolbar').focusin(function (e) { $('#addthis-toolbar .addthis-toolbar-btn').show(); setTimeout(function(){ $( "#addthis-toolbar").unbind( "click" ); $('#addthis-toolbar').click(function (e) { $('#addthis-toolbar .addthis-toolbar-btn').toggle(); }); }, 5) }); $('#addthis-toolbar').focusout(function (e) { $( "#addthis-toolbar").unbind( "click" ); setTimeout(function(){ $('#addthis-toolbar .addthis-toolbar-btn').hide(); }, 5) }); $('#addthis-toolbar .addthis-toolbar-btn .resp-sharing-button').click(function(e){ var options = 'menubar=no, status=no, scrollbars=no, width=800, height=600'; switch($(e.currentTarget).attr('class').split(' ')[1]) { case "resp-sharing-button--facebook" : window.open('https://facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location), '', options); e.stopPropagation(); break; case "resp-sharing-button--twitter" : window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent($('title').text()) + '&url=' + encodeURIComponent(window.location), '', options); e.stopPropagation(); break; case "resp-sharing-button--whatsapp" : window.open('whatsapp://send?text='+ encodeURIComponent($('title').text()) +'%20'+ encodeURIComponent(window.location), '', options); e.stopPropagation(); break; case "resp-sharing-button--pinterest" : window.open('https://pinterest.com/pin/create/button/?url='+ encodeURIComponent(window.location) +'&media='+ encodeURIComponent(window.location) +'&description='+ encodeURIComponent($('title').text()), '', options); e.stopPropagation(); break; case "resp-sharing-button--email" : window.open('mailto:?subject='+ encodeURIComponent($('title').text()) +'&body='+ encodeURIComponent(window.location), '', options); e.stopPropagation(); break; case "resp-sharing-button--vk" : window.open('http://vk.com/share.php?title='+ encodeURIComponent($('title').text()) +'&url='+ encodeURIComponent(window.location), '', options); e.stopPropagation(); break; } }) </script>   <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.2/dist/lazyload.min.js"></script> <script type="text/javascript"> var lazyLoadInstance = new LazyLoad({ elements_selector: ".memberlist-avatar img, .forum-avatar img, .post-content img, .post-icon img, .module img", threshold: 0 }); </script> <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> <script src="{JQUERY_DIR}touch-swipe/v1.6.18/jquery.touchSwipe.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $(".forum-section").each(function() { var forumName = $(this).find("h3"); var statsWidth = $(this).find(".forum-statistics").outerWidth(); var forumNamePadding = statsWidth + 8; if ((forumName.width() / 1.5) < statsWidth) { $(forumName).css("padding-bottom", "30px"); $(this).find(".forum-statistics").css("margin-top", "27px"); } else { if ($("body").css("direction").toLowerCase() == "rtl") { $(forumName).css("padding-left", forumNamePadding); } else { $(forumName).css("padding-right", forumNamePadding); } } }); $(".forum-icon, .post-icon").each(function() { var image = $(this).find("img"); image.error(function() { $(this.parentElement.parentElement).find("i.material-icons").css("display", "block"); $(this).remove(); }); }); alterMenuIcons(); }); $(function() { var backLink = $('.mobile_prev_button.block').attr('href'); var nextLink = $('.mobile_next_button.block').attr('href'); if (backLink || nextLink) { if (backLink) { var swipeBackArrow = $('<div>', { id: 'swipe_back_arrow', css: { opacity: 0 }, text: '' }); $('body').append(swipeBackArrow); var swipeBackArrow = $('#swipe_back_arrow'); } if (nextLink) { var swipeNextArrow = $('<div>', { id: 'swipe_next_arrow', css: { opacity: 0 }, text: '' }); $('body').append(swipeNextArrow); var swipeNextArrow = $('#swipe_next_arrow'); } $(window).swipe( { swipeStatus:function(event, phase, direction, distance) { var arrowPos = 0; var arrowOpacity = 0; if (backLink) { swipeBackArrow.removeAttr('style'); } if (nextLink) { swipeNextArrow.removeAttr('style'); } if ($("body").css("direction").toLowerCase() == "rtl") { if ((phase=="move") && (direction=="right") && nextLink) { var arrowPos = (distance / 200) * 40; var arrowOpacity = distance / 200; swipeNextArrow.css('left', arrowPos); swipeNextArrow.css('opacity', arrowOpacity); destLink = nextLink; } else if ((phase=="move") && (direction=="left") && backLink) { var arrowPos = (distance / 200) * 40; var arrowOpacity = distance / 200; swipeBackArrow.css('right', arrowPos); swipeBackArrow.css('opacity', arrowOpacity); destLink = backLink; } else if ((phase=="end") && (direction=="right") && nextLink) { swipeNextArrow.css('left', arrowPos); swipeNextArrow.css('opacity', 0); window.location.href = destLink; } else if ((phase=="end") && (direction=="left") && backLink) { swipeBackArrow.css('right', arrowPos); swipeBackArrow.css('opacity', 0); window.location.href = destLink; } } else { if ((phase=="move") && (direction=="left") && nextLink) { var arrowPos = (distance / 200) * 40; var arrowOpacity = distance / 200; swipeNextArrow.css('right', arrowPos); swipeNextArrow.css('opacity', arrowOpacity); destLink = nextLink; } else if ((phase=="move") && (direction=="right") && backLink) { var arrowPos = (distance / 200) * 40; var arrowOpacity = distance / 200; swipeBackArrow.css('left', arrowPos); swipeBackArrow.css('opacity', arrowOpacity); destLink = backLink; } else if ((phase=="end") && (direction=="left") && nextLink) { swipeNextArrow.css('right', arrowPos); swipeNextArrow.css('opacity', 0); window.location.href = destLink; } else if ((phase=="end") && (direction=="right") && backLink) { swipeBackArrow.css('left', arrowPos); swipeBackArrow.css('opacity', 0); window.location.href = destLink; } } }, triggerOnTouchEnd: true, triggerOnTouchLeave: false, threshold: 200, allowPageScroll: "vertical" }); } }); function alterMenuIcons() { $('#mNavbar').find('.navBtnIcon').each(function() { switch ($(this).css('backgroundPosition')) { case '-32px 0px': $(this).html('<i class="material-icons"></i>'); break; case '-64px 0px': $(this).html('<i class="material-icons"></i>'); break; case '0px 0px': case '-288px 0px': $(this).html('<i class="material-icons">brightness_6</i>'); break; $(this).html('<i class="material-icons"></i>'); break; case '-96px 0px': $(this).html('<i class="material-icons"></i>'); break; case '-128px 0px': $(this).html('<i class="material-icons"></i>'); break; case '-160px 0px': $(this).html('<i class="material-icons"></i>'); $(this).addClass('BtnNotif'); break; case '-192px 0px': $(this).html('<i class="material-icons"></i>'); break; case '-224px 0px': $(this).html('<i class="material-icons"></i>'); break; case '-256px 0px': $(this).html('<i class="material-icons">chat</i>'); break; case '-288px 0px': $(this).html('<i class="material-icons">brightness_6</i>'); break; } }); }; if ($('.btn-floating').length) { $('#mwrap').css('paddingBottom', 173); } $('#to-top').click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 400); }); $('#social-toolbar').click(function(e) { e.preventDefault(); }); $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 164) { $('#to-top').addClass('visible'); if($('.btn-floating').find('.btn-floating-txt').length !== 0){ $('.btn-floating').addClass('btn-scrolled'); } } else { $('#to-top').removeClass('visible'); if($('.btn-floating').find('.btn-floating-txt').length !== 0) { $('.btn-floating').removeClass('btn-scrolled'); } } }); $(window).load(function(){ var avatar_style; $('.forum-avatar img').each(function(){ avatar_style = (this.width/this.height > 1) ? 'height: 100%; width: auto;' : 'height: atuo; width:100%;'; $(this).attr('style', avatar_style); }) }); function hideFixedToggleable(focusin) { var toggleable = [ $('#to-top'), $('.btn-floating'), $('#tab-bar'), $('#addthis-toolbar') ]; if (focusin) { $(toggleable).each(function() { $(this).css('display', 'none'); }); } else { $(toggleable).each(function() { $(this).removeAttr('style'); }); } } $(document).on('focus blur', 'select, textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=search]', function(e) { hideFixedToggleable(e.type == 'focusin'); }); //]]> </script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $('#header').prepend('<a id="mSearchBtn" href="./search"><i class="material-icons">search</i></a>'); $('#header').prepend('<form method="get" action="/search" id="search-main"><div><input autocorrect="off" autocapitalize="none" autocomplete="off" type="search" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}"></div><button type="submit"><i class="material-icons">search</i></button></form>'); $('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>'); $('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" />')); $('#mSearchBtn').on('click', function(e) { e.preventDefault(); e.stopPropagation(); var search_box = $('#search-main'), search_box_input = $('#search-main input'); search_box.addClass('visible'); search_box_input.focus(); $(document).on('click.search_main', function(e) { var search_box = $('#search-main'); if (!search_box.is(e.target) && search_box.has(e.target).length === 0) { search_box.removeClass('visible'); search_box.off('.search_main'); } }); }); if(_userdata['activate_toolbar'] && _userdata['session_logged_in']) { Toolbar.init; var timeout = setInterval(reloadNotif, 1000); $('.BtnNotif').prepend('<span id="unread_notif_menu">' + _toolbar.notifications.unread + '</span>'); }; $('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="/f16-"><img class="nav_icon navBtnIcon" src="https://i.servimg.com/u/f78/11/70/59/71/news10.png" />News</a></li> '); function reloadNotif() { if (_toolbar.notifications.unread > 0) { var unread_notif = $("#unread_notif"); var unread_notif_menu = $("#unread_notif_menu"); unread_notif.html(_toolbar.notifications.unread); unread_notif_menu.html(_toolbar.notifications.unread); if(! unread_notif.hasClass("notification-new")) { unread_notif.addClass('notification-new'); unread_notif_menu.addClass('notification-new'); $("#mNotificationBtn").addClass('notification-new'); } } }; }); //]]> </script>  <div id="fb-root"></div> <script type="text/javascript"> $(document).ready( function() { $('div.fb-login-button, span.fb-login-button').attr({ "data-scope": "{switch_facebook_login.FB_SCOPE}", "data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}", "data-size": "{switch_facebook_login.FB_BUTTON_SIZE}", "data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}", "data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}" }); $('div.fb-login-button, span.fb-login-button').each(function() { if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) { $(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}'); } if($(this).html() == '') { $(this).html('{switch_facebook_login.FB_LABEL}'); } }); FB.init({ appId : "{switch_facebook_login.FB_APP_ID}", cookie : {switch_facebook_login.FB_COOKIE}, xfbml : {switch_facebook_login.FB_XFBML}, oauth : {switch_facebook_login.FB_OAUTH}, version : '{switch_facebook_login.FB_VERSION}' }); (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); function onLoginFB() { window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}') } </script>   <script type="text/javascript"> $(document).ready( function() { $('div.ti-connect').attr({ 'data-loc' : '{switch_topicit_connect.TOPICIT_URL}', 'data-login' : '{switch_topicit_connect.BOARD_LOGIN}', 'data-version' : '{switch_topicit_connect.TOPICIT_VERSION}', 'data-lang' : '{switch_topicit_connect.BOARD_LANG}' }); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'topicit-connect')); }); </script>  </body> </html>

-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

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

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"]'));

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

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