Header
Partagez | 

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

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

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 ;
• les catégories du forum doivent être séparées.

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.

Pour cela, lorsque l'on va créer une catégorie :
Spoiler:
 
On va juste entourer le texte d'un span avec une classe, par exemple :
Code:
class="c1"
Tu auras donc un code de ce type :
Code:
<span class="c1">Ma première caté</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_body.tpl

On va entourer les titres des catégories par un élement html ayant pour classe "titre-categorie". Pour cela, on va entourer ça :
Code:
{catrow.CAT_DESC}
par un élement html, ce qui donne :
Code:
<span class="titre-categorie">{catrow.CAT_DESC}</span>

viewtopic_body.tpl, viewforum_body.tpl

Et le fil d'Ariane :
Code:
<span class="nav">   <a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span>
qui deviendra :
Code:
<span class="fil-ariane"><span class="nav">  &nbsp;<a href="{U_INDEX}" class="nav">{L_INDEX}</a> -> <a class="nav" href="{U_VIEW_FORUM}">{FORUM_NAME}</a></span></span>

Le javascript


Et voilà le javascript (on verra ensuite comment le mettre en ligne). Celui-ci est commenté pour que tu puisses le comprendre Smile

Code:
// Au chargement de la page
$(function () {

  // Test si on est sur l'index
  if(window.location.pathname == '/index.php'){
    // On parcourt chaque titre pour récupérer le nom de classe
    var titles = document.querySelectorAll('.titre-categorie');
    [].forEach.call(titles, function(title) {
      // On récupére le nom de la catégorie
      nomClasse = $(title).find('span').attr('class');
      $(title).parents('.forumline').addClass(nomClasse); 
    });
  }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 .nav a.nav:first-of-type + a.nav span').attr('class')
    var forumlines = document.querySelectorAll('.forumline');
    [].forEach.call(forumlines, function(forumline) {
      $(forumline).addClass(nomClasse);
    });
  }
});

Installation

Pour mettre en place ce javascript, on va aller dans le template overall_footer.tpl.

1) On va appeler la bibliothèque jquery :
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
juste avant la balise :
Code:
</body>
Exclamation Peut-être que tu as déjà appelé ce fichier en suivant un autre tuto, dans ce cas, ne répète pas cette étape.

2) On ajoute le javascript juste après l'appel de la bibliothèque, entre les balises :
Code:
<script type="text/javascript"><!--
et
Code:
--></script>

Ce qui donne (pour la fin du template) :
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// Au chargement de la page
$(function () {

  // Test si on est sur l'index
  if(window.location.pathname == '/index.php'){
    // On parcourt chaque titre pour récupérer le nom de classe
    var titles = document.querySelectorAll('.titre-categorie');
    [].forEach.call(titles, function(title) {
      // On récupére le nom de la catégorie
      nomClasse = $(title).find('span').attr('class');
      $(title).parents('.forumline').addClass(nomClasse); 
    });
  }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 .nav a.nav:first-of-type + a.nav span').attr('class')
    var forumlines = document.querySelectorAll('.forumline');
    [].forEach.call(forumlines, function(forumline) {
      $(forumline).addClass(nomClasse);
    });
  }
});
--></script>
</body>
</html>

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:
.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');
}

Idea Pour rappel, la CSS est à mettre dans le template overall_header.tpl, juste avant :
Code:
-->

</style>




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 "[Xooit] Catégories avec des fonds différents" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Catégories avec des fonds différents
Page 1 sur 1
 Sujets similaires
-
» 2 box avec 2 FAI différents: C'est possible ?
» Les différents Oregon
» Ecran noir sur pluzz et les différents Replay
» 10 News Sons d'accordéon pour le Fr3xb.
» Test débit très différent
Réponse rapide

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