Header

Partagez | 

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

Message Sujet: [FA] Changer l'apparence d'un forum en fonction de son état   Mar 21 Juil - 11:41

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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 des 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 > Affichage > Images et Couleurs > Gestions des images
Spoiler:
 
On va donc commencer par ça. Elles peuvent être bien visibles comme dans mon exemple, ou transparentes de dimensions 1px*1px. L'important c'est qu'elles aient des url bien distinctes.

De mon côté, voici les 3 images :
• nouveau :
Code:
http://site.school-of-progress.fr/ete2015/img/visuel-new.png
• pas de nouveau :
Code:
http://site.school-of-progress.fr/ete2015/img/visuel-old.png
• verrouillé :
Code:
http://site.school-of-progress.fr/ete2015/img/visuel-lock.png

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

La modification des templates

En réalité, ce ne sont pas des templates à modifier, mais un seul : index_box (qui se trouve dans PA > Affichage > Templates > Général).

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 class à 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>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td class="row3" 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="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>
  <!-- END forumrow -->
Elle correspond à l'affichage d'un forum.
On va juste ajouter une class 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="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <div class="visuel-etat"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{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">
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <div class="visuel-etat"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td class="row3" 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="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>
  <!-- END forumrow -->

On enregistre et on n'oublie pas de publier.

À 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 compliquer, tu vas voir.

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

});

On va parcourir chaque forum :
Code:
$( ".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 = $(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://site.school-of-progress.fr/ete2015/img/visuel-new.png':
            $(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://site.school-of-progress.fr/ete2015/img/visuel-lock.png':
            $(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:
            $(this).addClass('old');

Voilà donc le javascript final :
Code:
$(document).ready( function(){

  $( ".forum" ).each(function( index ) {
      var img = $(this).find('.visuel-etat img').attr('src');

      switch (img) {
        case 'http://site.school-of-progress.fr/ete2015/img/visuel-new.png':
            $(this).addClass('new');
            break;
        case 'http://site.school-of-progress.fr/ete2015/img/visuel-lock.png':
            $(this).addClass('lock');
            break;
        default:
            $(this).addClass('old');
      }
  });

});

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

Il ne nous reste plus qu'à aller dans PA > Modules > HTML & JAVASCRIPT >Gestion des codes Javascript, à créer un nouveau javascript que l'on affichera sur toutes les pages et à y mettre le code que l'on vient de faire.

Spoiler:
 

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


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 "[FA] Changer l'apparence d'un forum en fonction de son état" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Changer l'apparence d'un forum en fonction de son état
Page 1 sur 1
 Sujets similaires
-
» Comment changer un sous forum en blog ?
» Changer fond du forum en image
» changer adresse internet forum
» changer taille colonne forum ou messages
» Changer la couleur de l'écriture sans changer tout le forum
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