Catégories avec des fonds différents

Coucou !

Cette fois nous allons voir comment ajouter un nom particulier à chacune de nos catégories afin de pouvoir les styliser (couleur de fond, de texte, image de fond,...), c'est-à-dire avoir un truc qui ressemble à ça :

Spoiler:

Pré-requis :
• avoir accès aux templates du forum ;
• avoir des connaissances de bases en HTML et CSS ;
• la hiérarchie du forum doit être en mode "moyen".

Spoiler:

Ce tutoriel fonctionne pour phpBB2, phpBB3, Punbb et Invision.


Eh oui ! Avant de nous lancer corps et âme dans le codage du script, il va falloir réfléchir à ce qu'il doit faire. Ici, on va avoir 2 bouts de code à créer : un code pour l'index et un code pour les forums et messages (affichage des sous-forums, de la liste des sujets et des messages).


• On va parcourir chaque titre de catégorie et récupérer la classe indiquée.
• On va reporter cette classe sur le parent de ce titre (c'est-à-dire la balise html qui contient toute la catégorie).


Que ce soit dans la liste des sujets, dans un sous-forum ou un message, le principe reste le même :
• on va regarder ce que je vais appeler le fil d'Ariane :

Spoiler:

• on va récupérer la classe sur l'image de la catégorie (le même que dans le point précédent) et on va l'ajouter où il faut.


On a donc notre principe. Passons à la pratique.


La première étape consiste donc à donner un nom de classe à chacune de nos catégories.

Si tu utilises des images pour illustrer tes titres tu as des codes qui ressemblent à ça :

Code:

<img src="http://pvereecken.fr/zenpub/zp2017/img/cat/cat-2.png"><span class="tcat">Caté 1</span>

Le nombre de caractères étant limité, on va se la jouer "discret" en ajoutant des noms de classe "courts" qui ressemblent à ça :

Code:

classe="c1"

Tu auras donc un code de ce type :

Code:

<img src="http://pvereecken.fr/zenpub/zp2017/img/cat/cat-2.png"><span class="tcat c1">Caté 1</span>

Si tu as seulement du texte pour tes titres, dans ce cas, tu auras quelque chose qui ressemble à ça :

Code:

<span class="c1">mon titre</span>

Ici, ça va être simple : on va entourer les éléments dont on va avoir besoin dans le js pour pouvoir les récupérer facilement.


Si tu as des images à la place des titres et que tu as suivi le tutoriel donné plus haut, tu peux passer cette étape.

On va entourer les titres des catégories par un élement html ayant pour classe "titre-categorie". Peu importe la version, on va entourer ça :

Code:

{catrow.tablehead.L_FORUM}

par un élement html, ce qui donne :

Code:

<span class="titre-categorie">{catrow.tablehead.L_FORUM}</span>

Et le fil d'Ariane :

Code:

{NAV_CAT_DESC}

qui deviendra :

Code:

<span class="fil-ariane">{NAV_CAT_DESC}</span>

Pour phpbb2, dans le template "viewtopic_body", il faut remplacer

Code:

{NAV_CAT_DESC_SECOND}

par

Code:

<span class="fil-ariane">{NAV_CAT_DESC_SECOND}</span>

Et voilà le javascript à mettre sur toutes les pages du forum Celui-ci est commenté pour que tu puisses le comprendre

Code:


// Au chargement de la page
$(function () {
  
  // on indique la version du forum
  // attention de bien respecter les écritures ci-dessous
  // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
  var versionForum = 'phpbb2'
  ,  nomClasse
  ,  spanTitre
  ,  emplacement;

  // Test si on est sur l'index
  if( ( (window.location.pathname == '/') || (window.location.pathname == '/forum') ) && (window.location.pathname.indexOf('/f') == -1) ){
      // On parcourt chaque titre pour récupérer le nom de classe
      $('.titre-categorie').each( function(){
        //emplacement = $(this)

        // On récupére le nom de la catégorie
        nomClasse = $(this).find('span').attr('class');
        // En fonction de la version du forum, on va ajouter la classe sur le bon élément
        switch(versionForum){
            // Si on est sur invision
            case 'invision':
              $(this).parents('.borderwrap').addClass(nomClasse);
              break;

            // Si on est sur phpbb2
            case 'phpbb2':
              $(this).parents('.forumline').addClass(nomClasse);
              break;

            // Si on est sur punbb
            case 'punbb':
              $(this).parents('.main-head').addClass(nomClasse);
              $(this).parents('.main-head').next('.main-content').addClass(nomClasse);
              break;

            // Si on est sur awesomebb
            case 'awesomebb':
              $(this).parents('.forum.type-table-forum').addClass(nomClasse);
              break;

            // Si on est sur phpbb3, modernbb
            default:
              $(this).parents('.forabg').addClass(nomClasse);
              break;
        }
      });
  }else{
      // Si on n'est pas sur l'index, on va se baser sur le fil d'Ariane

      // On récupére le nom de la catégorie
      nomClasse = $('.fil-ariane a:first-of-type span span').attr('class');

      // En fonction de la version du forum, on va ajouter la classe sur le bon élément
      switch(versionForum){
        // Si on est sur invision
        case 'invision':
            $('.borderwrap').addClass(nomClasse);
            break;

        // Si on est sur phpbb2
        case 'phpbb2':
            $('.forumline').addClass(nomClasse);
            break;

        // Si on est sur punbb
        case 'punbb':
            $('.main.paged').addClass(nomClasse);
            $('.pun-crumbs + .main').addClass(nomClasse);
            break;

        // Si on est sur awesomebb
        case 'awesomebb':
            $('.forum.type-table-forum').addClass(nomClasse);
            $('.post-wrap').addClass(nomClasse);
            break;

        // Si on est sur phpbb3, modernbb
        default:
            $('.forabg').addClass(nomClasse);
            $('.forumbg').addClass(nomClasse);
            $('.post').addClass(nomClasse);

            break;
      }
  }

});


Eh bien là, tout se passe en CSS et je te laisse te débrouiller tout seul Voici néanmoins quelques pistes "exemple" :

Code:

/*---------- phpbb2 ----------*/

.forumline.c1{
  background: transparent url('https://i.ytimg.com/vi/svvVpDYL2so/maxresdefault.jpg');
}

.forumline.c2{
  background: transparent url('http://www.mentaliste.paris/wp-content/uploads/2015/07/pattern-1.png');
}

/*---------- phpbb3, ModernBB ----------*/

.forabg.c1,
.forumbg.c1,
.post.c1{
  background: transparent url('https://i.ytimg.com/vi/svvVpDYL2so/maxresdefault.jpg');
}

.forabg.c2,
.forumbg.c2,
.post.c2{
  background: transparent url('http://www.mentaliste.paris/wp-content/uploads/2015/07/pattern-1.png');
}

/*--------- Invision----------*/
.borderwrap.c1{
  background: transparent url('https://i.ytimg.com/vi/svvVpDYL2so/maxresdefault.jpg');
}

.borderwrap.c2{
  background: transparent url('http://www.mentaliste.paris/wp-content/uploads/2015/07/pattern-1.png');
}

/*--------- punbb----------*/
.main.paged.c1,
.pun-crumbs + .main.c1{
  background: transparent url('https://i.ytimg.com/vi/svvVpDYL2so/maxresdefault.jpg');
}

.main.paged.c2,
.pun-crumbs + .main.c2{
  background: transparent url('http://www.mentaliste.paris/wp-content/uploads/2015/07/pattern-1.png');
}

/*---------- awesomebb ----------*/

.forum.type-table-forum.c1,
.post-wrap.c1{
  background: transparent url('https://i.ytimg.com/vi/svvVpDYL2so/maxresdefault.jpg');
}

.forum.type-table-forum.c2,
.post-wrap.c2{
  background: transparent url('http://www.mentaliste.paris/wp-content/uploads/2015/07/pattern-1.png');
}