Header
Partagez | 

[Xooit] Changer l'apparence d'un forum en fonction de son état

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] Changer l'apparence d'un forum en fonction de son état   Mar 21 Juil - 11:46

Coucou !

Dans ce tutoriel, nous allons voir ensemble comment styliser les forums sur l'index et dans les sous-forums en fonction de leur statut (nouveau message, pas de nouveau message ou forum verrouillé).

Idea Pré-requis :
• Avoir accès aux templates du forum ;
• Avoir des notions de css ;
• Avoir les 3 images d'état de forum (nouveau message, pas de nouveau message, forum verrouillé) ;
• Savoir ce que tu veux faire pour différencier les états.

Ce tutoriel va donc se dérouler en 4 étapes :
• l'installation d'images ;
• la modification des templates ;
• la mise en place du js ;
• 2-3 lignes de css.

Allez ! C'est parti !

Les images

Tout d'abord, pour nous permettre de connaître le statut d'un forum, nous allons avoir besoin de ce que j'appelle "les visuels d'état". Ce sont en réalité les images que l'on renseigne ici : PA > Thème > Modifier les images
Spoiler:
 
On va donc commencer par ça. Elles peuvent être bien visibles comme dans mon exemple, ou transparentes de dimensions 1px*1px.

Ensuite, une fois uploadée, on va faire un clic droit dessus pour récupérer l'url de l'image.

De mon côté, voici les 3 liens :
• nouveau :
Code:
http://img.xooimage.com/files110/f/2/0/visuel-new-4bf309d.png
• pas de nouveau :
Code:
http://img.xooimage.com/files110/a/1/1/visuel-old-4bf3077.png
• verrouillé :
Code:
http://img.xooimage.com/files110/a/9/3/visuel-lock-4bf3099.png

On en a fini ici. Passons à l'étape suivante.

La modification des templates

On va devoir modifier un peu la structure du forum. Pour cela, on va travailler dans le template "index_body.tpl (qui se trouve dans PA > Thème > Modifier les templates).

Ici, on va devoir faire 2 choses :
• cibler les différents blocs "forum" ;
• dans chacun d'eux, cibler les "visuels d'état".

Par cibler j'entends : ajouter une classe à ces élements ou autour d'eux pour pouvoir les repérer.

On y va !

Idea Pour ce tutoriel, je pars du template par défaut, non modifié.

La partie qui nous intéresse est la suivante :
Code:
<!-- BEGIN forumrow -->
  <tr>
  <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
  <td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
    </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
    </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
  <td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
  <td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
  <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
Elle correspond à l'affichage d'un forum.
On va juste ajouter une classe dans le premier tr, ce qui nous donnera :
Code:
<!-- BEGIN forumrow -->
  <tr class="forum">

Ensuite pour les visuels d'état, on va les entourer d'une div avec une classe également, ce qui donne :
Code:
<td class="row1" align="center" valign="middle" height="50"><div class="visuel-etat"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div></td>

On en a fini avec les templates ! Tu as donc ce bout de code pour le forum :
Code:
  <!-- BEGIN forumrow -->
  <tr class="forum">
  <td class="row1" align="center" valign="middle" height="50"><div class="visuel-etat"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div></td>
  <td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
    </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
    </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
  <td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
  <td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
  <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->

On enregistre.

À ce moment du tutoriel, si tu vas sur ton forum, tu ne verras aucun changement visuel. En revanche, ton code sera un poil différent.

Le javascript

Ici aussi, rien de compliqué, tu vas voir.

Tout d'abord, dans le template "overall_header.tpl", on va appeler la bibliothèque javascript, indispensable pour la suite du tutoriel.
!!! Si tu as déjà appelé cette bibliothèque pour une autre modification, ne le refait pas Wink !!!

Pour cela, on va copier ce code :
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Juste avant
Code:
</head>

Ensuite, on va se mettre au travail en créant un nouveau script :
Code:
<script language="Javascript" type="text/javascript">
<!--

//-->
</script>

Une fois que la page est prête, c'est-à-dire complétement chargée :
Code:
jQuery(document).ready( function(){

});

On va parcourir chaque forum :
Code:
jQuery( ".forum" ).each(function( index ) {

   });

Dans chacun d'eux, on va récupérer le lien (= l'attribut src) de l'image dans la div "visuel-etat" :
Code:
var img = jQuery(this).find('.visuel-etat img').attr('src');

Ensuite, en fonction de cette url :
Code:
switch (img) {

}

On peut avoir 3 cas :

1) Elle correspond à l'image "nouveau message".
Dans ce cas, j'ajoute la classe "new" au forum dans lequel je suis, et j'arrête le test pour ce forum (= break) :
Code:
case 'http://img.xooimage.com/files110/f/2/0/visuel-new-4bf309d.png':
            jQuery(this).addClass('new');
            break;

2) Elle correspond à l'image "forum verrouillé".
Même principe que précédemment, sauf que cette fois, on ajoute la classe "lock" :
Code:
case 'http://img.xooimage.com/files110/a/9/3/visuel-lock-4bf3099.png':
            jQuery(this).addClass('lock');
            break;

3) L'image ne correspond à aucune des images précédentes. Dans ce cas, ce sera le cas "par défaut" qui nous ajoutera la classe "old".
Code:
default:
            jQuery(this).addClass('old');

Voilà donc le javascript final :
Code:
<script language="Javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
  jQuery('.forum').each(function (){
      var img = jQuery(this).find('.visuel-etat img').attr('src');

      switch (img) {
        case 'http://img.xooimage.com/files110/f/2/0/visuel-new-4bf309d.png':
            jQuery(this).addClass('new');
            break;
        case 'http://img.xooimage.com/files110/a/9/3/visuel-lock-4bf3099.png':
            jQuery(this).addClass('lock');
            break;
        default:
            jQuery(this).addClass('old');
      }
  });
});
//-->
</script>

Idea N'oublie pas de remplacer le lien des images par tes propres images Wink

Et on va placer ce code juste avant :
Code:
</head>

Ce qui nous donne :
Code:
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
  if ( {PRIVATE_MESSAGE_NEW_FLAG} )
  {
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
  }
//-->
</script>
<!-- END switch_enable_pm_popup -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="Javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
  jQuery('.forum').each(function (){
      var img = jQuery(this).find('.visuel-etat img').attr('src');

      switch (img) {
        case 'http://img.xooimage.com/files110/f/2/0/visuel-new-4bf309d.png':
            jQuery(this).addClass('new');
            break;
        case 'http://img.xooimage.com/files110/a/9/3/visuel-lock-4bf3099.png':
            jQuery(this).addClass('lock');
            break;
        default:
            jQuery(this).addClass('old');
      }
  });
});
//-->
</script>

</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

La CSS

Dernière étape, mais finalement la plus importante car c'est le but du tutoriel : le style qui va nous permettre de différencier visuellement nos forums en fonction de leur état.

Eh bien écoute, figure-toi qu'ici je vais faire du simple : je vais me contenter de mettre des couleurs de fond différentes :
• rouge = nouveau message ;
• vert = pas de nouveau message ;
• gris = forum verrouillé.

Ce qui me donnera en CSS :
Code:
.forum.old td{
  background: green;
}

.forum.new td{
  background: red;
}

.forum.lock td{
  background: grey;
}

Ensuite, je vais placer cette css entre les balises :
Code:
<style type="text/css">
<!--


-->
</style>

et je vais copier le tout dans mon template "overall_header.tpl", juste avant la balise :
Code:
</head>

Ce qui donnera au final :
Code:
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
  if ( {PRIVATE_MESSAGE_NEW_FLAG} )
  {
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
  }
//-->
</script>
<!-- END switch_enable_pm_popup -->


<style type="text/css">
<!--
.forum.old td{
  background: green;
}

.forum.new td{
  background: red;
}

.forum.lock td{
  background: grey;
}

-->
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="Javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
  jQuery('.forum').each(function (){
      var img = jQuery(this).find('.visuel-etat img').attr('src');

      switch (img) {
        case 'http://img.xooimage.com/files110/f/2/0/visuel-new-4bf309d.png':
            jQuery(this).addClass('new');
            break;
        case 'http://img.xooimage.com/files110/a/9/3/visuel-lock-4bf3099.png':
            jQuery(this).addClass('lock');
            break;
        default:
            jQuery(this).addClass('old');
      }
  });
});
//-->
</script>

</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Et visuellement :
Spoiler:
 





Eh voilà ! C'est terminé !

Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[Xooit] Changer l'apparence d'un forum en fonction de son état" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Changer l'apparence d'un forum en fonction de son état
Page 1 sur 1
Réponse rapide

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