PêpêcheMascotte- Messages : 4428
Mettre en avant un sujet dans sa barre de nav'
Jeu 9 Mai 2019 - 10:14
Toutes versions sauf AwesomeBB
Mettre en avant un sujet dans sa barre de nav'
Hello hello 
Dans ce tutoriel, nous allons voir comment ajouter un bouton dans la barre de navigation et lier celui-ci à un sujet du forum en particulier. L'idée étant : s'il n'y a pas de nouveau message dans le sujet, le bouton reste celui par défaut, s'il y a un nouveau message, le bouton change pour attirer l'attention du membre.
Pré-requis :
• avoir accès aux templates du forum ;
• fonctionne pour toutes les versions de forum sauf AwesomeBB.
C'est parti !
Tout d'abord, nous allons avoir besoin de créer une div cachée qui va récupérer les informations du forum contenant notre sujet (en gros, on mettra dans cette div le tableau contenant les liens vers les sujets).
Dans le template "overall_header", nous allons mettre ce code juste après :
On n'oublie pas de sauvegarder et de publier son template
On va ajouter dans la barre de nav' un nouveau texte ou image qui changera. Pour le moment, on met le texte ou l'image "normale", c'est-à-dire quand il n'y a pas de nouveau message.
Pour cela, tu vas dans : Panneau d'administration >> Affichage >> Page d'accueil >> En-tête et navigation :: ajouter un menu personnalisé.. Je te laisse remplir toi-même les informations.
le lien renvoie vers le sujet que l'on veut mettre en avant.
Dans la suite du tutoriel, nous allons nous baser sur ce que tu as écrit dans "Texte".
Notre base est prête, on peut passer au JS
Avant tout, voilà ce que va devoir faire notre javascript :
• il va aller jeter un oeil dans la catégorie/forum contenant le sujet que l'on veut mettre en avant ;
• si ce sujet est marqué comme "non lu", alors, ça signifiera qu'il y a un message "non lu" par le membre (logique) ;
• dans ce cas, on change le bouton de la barre de nav.
C'est tout
Allez ! On y va
Tout d'abord, on va renseigner un certain nombre d'information :
• le forum dans lequel se trouve le sujet ;
• le lien du sujet mais sans l'adresse du forum
• le nom du nouveau bouton que nous avons ajouté dans la barre de nav
• le lien vers la nouvelle image à afficher s'il y a un nouveau message (non obligatoire)
ça donne donc ça :
Ici, tu peux changer tout ce qui est entre guillemet pour mettre les informations liées au forum.
Il est à noter que nouvelleImage n'est pas obligatoire. Dans ce cas, il te suffit de laisser les guillemets vide :
Ensuite, on indique la version de notre forum : invision, phpbb2, phpbb3, punbb ou modernbb.
Attention à bien respecter l'écriture
Ta partie est terminée Eh oui, il n'y a rien d'autres à changer, tout est prêt. Cela dit, tu me connais, j'aime bien tout expliqué Cela dit, tu verras, tout est mis directement dans le js si ça t'intéresse de savoir ce qu'on fait dans le détail
Voici donc le javascript complet :
Maintenant qu'on a tout ce qu'il faut, il ne reste plus qu'à l'installer
Pour cela, il te suffit d'aller dans Panneau d'administration >> Modules >> HTML & Javascript >> Gestion des codes javascript. Tu crées un nouveau javascript que tu appelles sur toutes les pages et tu y colles le code donné plus haut
C'est tout ^^
Evidemment, en cas de souci, n'hésite pas à nous demander un coup de pouce
Dans ce tutoriel, nous allons voir comment ajouter un bouton dans la barre de navigation et lier celui-ci à un sujet du forum en particulier. L'idée étant : s'il n'y a pas de nouveau message dans le sujet, le bouton reste celui par défaut, s'il y a un nouveau message, le bouton change pour attirer l'attention du membre.
Pré-requis : • avoir accès aux templates du forum ;
• fonctionne pour toutes les versions de forum sauf AwesomeBB.
C'est parti !
La préparation HTML
Une mini modification de template
Tout d'abord, nous allons avoir besoin de créer une div cachée qui va récupérer les informations du forum contenant notre sujet (en gros, on mettra dans cette div le tableau contenant les liens vers les sujets).
- Code:
<div id="recup_info" style="display:none"></div>
Dans le template "overall_header", nous allons mettre ce code juste après :
- Code:
<body>
On n'oublie pas de sauvegarder et de publier son template On ajoute notre bouton
On va ajouter dans la barre de nav' un nouveau texte ou image qui changera. Pour le moment, on met le texte ou l'image "normale", c'est-à-dire quand il n'y a pas de nouveau message.
Pour cela, tu vas dans : Panneau d'administration >> Affichage >> Page d'accueil >> En-tête et navigation :: ajouter un menu personnalisé.. Je te laisse remplir toi-même les informations.
le lien renvoie vers le sujet que l'on veut mettre en avant. Dans la suite du tutoriel, nous allons nous baser sur ce que tu as écrit dans "Texte".- Spoiler:
Notre base est prête, on peut passer au JS
Ça se complique avec le javascript
Avant tout, voilà ce que va devoir faire notre javascript :
• il va aller jeter un oeil dans la catégorie/forum contenant le sujet que l'on veut mettre en avant ;
• si ce sujet est marqué comme "non lu", alors, ça signifiera qu'il y a un message "non lu" par le membre (logique) ;
• dans ce cas, on change le bouton de la barre de nav.
C'est tout
Allez ! On y va
On écrit le js
Tout d'abord, on va renseigner un certain nombre d'information :
• le forum dans lequel se trouve le sujet ;
• le lien du sujet mais sans l'adresse du forum
• le nom du nouveau bouton que nous avons ajouté dans la barre de nav
• le lien vers la nouvelle image à afficher s'il y a un nouveau message (non obligatoire)
ça donne donc ça :
- Code:
var forumSujet = "http://miettes.lebonforum.com/f16-test-invite",
lienSujet = "/t52-test-message-invite",
nomLienNav = "Tambouille",
nouvelleImage = "https://2img.net/i/fa/responsive/icons/desktop.png" ;
Ici, tu peux changer tout ce qui est entre guillemet pour mettre les informations liées au forum.
Il est à noter que nouvelleImage n'est pas obligatoire. Dans ce cas, il te suffit de laisser les guillemets vide :- Code:
nouvelleImage = "" ;
Ensuite, on indique la version de notre forum : invision, phpbb2, phpbb3, punbb ou modernbb.
- Code:
var versionForum = 'modernbb';
Attention à bien respecter l'écriture Ta partie est terminée
Eh oui, il n'y a rien d'autres à changer, tout est prêt. Cela dit, tu me connais, j'aime bien tout expliqué Cela dit, tu verras, tout est mis directement dans le js si ça t'intéresse de savoir ce qu'on fait dans le détail Voici donc le javascript complet :
- Code:
/* Une fois la page chargée */
$(function(){
/* ---- Infos à remplir ---- */
// forumSujet = le forum dans lequel se trouve ton sujet
// lienSujet = le lien de ton sujet sans l'adresse du forum
// nomLienNav = le nom du nouveau bouton que tu as ajouté dans la barre de nav
// nouvelleImage = le lien vers la nouvelle image à afficher s'il y a un nouveau message et que ta nav' est en image
var forumSujet = "http://miettes.lebonforum.com/f16-test-invite",
lienSujet = "/t52-test-message-invite",
nomLienNav = "Tambouille",
nouvelleImage = "https://2img.net/i/fa/responsive/icons/desktop.png" ;
// on indique la version du forum
// attention de bien respecter les écritures ci-dessous
// invision, phpbb2, phpbb3, punbb, modernbb
var versionForum = 'modernbb';
// On crée des variables qui vont être définit en fonction de la version de ton forum
var listeTopics,
cheminNav;
// En fonction de la version du forum, on récupére les bons élements à cibler
switch(versionForum){
// Si on est sur invision
case 'invision':
listeTopics = '.borderwrap .ipbtable .lastaction';
cheminNav = '#ipbwrapper #submenu .mainmenu';
break;
// Si on est sur phpbb2
case 'phpbb2':
listeTopics = '.forumline tr td .postdetails';
cheminNav = '.bodyline > table td[align="center"] .mainmenu';
break;
// Si on est sur phpbb3
case 'phpbb3':
listeTopics = '.forumbg .topiclist.topics .lastpost';
cheminNav = '.navbar .navlinks .mainmenu';
break;
// Si on est sur punbb
case 'punbb':
listeTopics = '.main.paged .main-content .table .tcr';
cheminNav = '#pun-head #pun-navlinks .mainmenu';
break;
// Si on est sur modernbb
default:
listeTopics = '.forumbg .topiclist.topics .lastpost';
cheminNav = '.headerbar .navbar.navlinks .mainmenu';
break;
}
var listeTopicsRecup = forumSujet + listeTopics ;
// On récupére le lien du topic cible
$('#recup_info').load(''+listeTopicsRecup +'', function(){
// S'il y a un nouveau message
if($(this).html().indexOf(''+ lienSujet +'?view=newest') > -1){
$(cheminNav).find('img[title='+nomLienNav+'').parent().addClass('new-msg');
if(nouvelleImage != ""){
$(cheminNav).find('img[title='+nomLienNav+'').attr('src', nouvelleImage);
}
}
});
});
On installe le js
Maintenant qu'on a tout ce qu'il faut, il ne reste plus qu'à l'installer
Pour cela, il te suffit d'aller dans Panneau d'administration >> Modules >> HTML & Javascript >> Gestion des codes javascript. Tu crées un nouveau javascript que tu appelles sur toutes les pages et tu y colles le code donné plus haut
C'est tout ^^
Evidemment, en cas de souci, n'hésite pas à nous demander un coup de pouce
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum