Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

Catégories avec des fonds différents Empty Catégories avec des fonds différents

le Mer 17 Avr 2019 - 15:14

Toutes versions

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:
Sur l'index

Mon première catégorie a une image de fond ; ma seconde catégorie en a une autre :
Catégories avec des fonds différents Chrome_2016-04-21_16-50-40_zpstoh6nv4w

Dans un forum

Je suis allée dans un des forums de ma seconde catégorie. L'image de fond de cette dernière est "reportée" sur le fond des forums :
Catégories avec des fonds différents Firefox_2016-04-21_16-51-27_zpslylxpqqe

Dans un message

Et même dans un message de ma seconde catégorie, je retrouve la même image de fond que celle de ma catégorie :
Catégories avec des fonds différents Chrome_2016-04-21_16-52-08_zpsgd9qtf1w

Idea 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:
Catégories avec des fonds différents Hierachie_zpsggj9slif

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

Un javascript, ça se prépare

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).

Sur l'index

• 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).

Ailleurs

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:
Catégories avec des fonds différents Chrome_2016-04-21_16-54-17_zpstabqcums
• 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.

Les titres des catégories

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>

Les templates

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.

index_box

Idea 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>

viewforum_body, viewtopic_body

Et le fil d'Ariane :
Code:
{NAV_CAT_DESC}
qui deviendra :
Code:
<span class="fil-ariane">{NAV_CAT_DESC}</span>

Idea 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>

Le javascript


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

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;
      }
  }

});

Côté mise en page

Eh bien là, tout se passe en CSS et je te laisse te débrouiller tout seul Smile 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');
}


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



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses