Header

Partagez | 

[FA] Catégories avec des fonds différents

Message Sujet: [FA] Catégories avec des fonds différents   Mer 27 Avr - 9:53

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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:
 

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:
 

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:
 
• 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://site.school-of-progress.fr/spring2016-v1/cate/1.png"><span class="tcat">Tes premiers pas dans l'école</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://site.school-of-progress.fr/spring2016-v1/cate/1.png"><span class="tcat c1">Tes premiers pas dans l'école</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
   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(){

         // 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 phpbb3
            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 phpbb3
         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('http://www.intrawallpaper.com/static/images/cube-pattern-28617-2560x1600.jpg');
}

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

/*---------- phpbb3 ----------*/

.forabg.c1,
.forumbg.c1,
.post.c1{
   background: transparent url('http://www.intrawallpaper.com/static/images/cube-pattern-28617-2560x1600.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('http://www.intrawallpaper.com/static/images/cube-pattern-28617-2560x1600.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('http://www.intrawallpaper.com/static/images/cube-pattern-28617-2560x1600.jpg');
}

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




Tu rencontres un souci avec ce tutoriel ? Viens poser ta ou tes questions [ici]

Idea N'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA] Catégories avec des fonds différents" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Catégories avec des fonds différents
Page 1 sur 1
 Sujets similaires
-
» Mise en forme des catégories avec un template déjà modifié
» Niveau des catégories...
» Mettre ses catégories en onglets
» Changer place titre catégories et forums
» Mettre des images en haut et bas de chaques catégories
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens