Problème code (catégorie)

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème code (catégorie)

Message par Coralina Lun 1 Aoû 2022 - 20:23

Détails techniques


Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://belfort-academie.forumactif.com/

Description du problème

J'ai un problème sur mon forum, j'aimerais changer l'image "Pas de nouveaux messages" (dans mon forum c'est un livre rouge) par la photo de profil du dernier utilisateur qui a posté. J'espère que mes explications sont clair.

Code CSS

Code:
/********* DÉBUT CATÉGORIES ***********/
/* Mise en place du conteneur d'onglets */
#conteneur_onglets_cate {
  /* Taille (largeur et hauteur) */
  width: 100%;
  height:50px;
  margin: auto;
  margin-top: 20px;
  margin-boto: 50px;
  overflow: visible;
  /* Couleur de fond */
  background-color: #474437;
  display: none;
  text-align: center;
}
 
/* Mise en forme des noms d'onglets */
#conteneur_onglets_cate div {
  display: inline-block;
  verctical-align: bottom;
  position: relative;
  bottom/15px;
  margin: 10px;
  /* Couleur */
  color: #EFEEEA;
  font-size: 29px
  /* Police d'écriture */
  font-family: 'Dancing Script';
  transition: all ease 1s;
}
 
/* Effet au passage de la souris sur les noms d'onglets */
#conteneur_onglets_cate div:hover {
  color: #4B462E;
  transition: all ease 1s;
}
 
/* CSS pour les onglets */
.onglet_cate {
  cursor: pointer;
}
 
/* CSS pour retirer le contour de catégories */
.categorie .forumline {
  border: 0px solid;
}
 
/* Mise en pace du titre de catégorie */
.secondarytitle {
  width: 100%;
  text-align: center;
}
 
/* Mise en forme du titre de catégorie */
.secondarytitle h2 {
  color: #302D1B ;
  font-size: 20pt;
  font-family: 'Dancing Script';
  letter-spacing: 0px;
  transition: all ease 1s;
}
 
/* Effet au passage de la souris sur le titre de catégorie */
.secondarytitle h2:hover {
  letter-spacing: 3px;
  transition: all ease 1s;
}
 
/* Mise en forme du titre de sous-forum 8position) */
.titre_forum {
  width: 90%;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
}
 
/* Mise ne forme du lien de sous-forum */
a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
  /* Couleur, taille et police */
  color: #141A28;
  font-size: 16pt;
  font-family: 'Dancing Script';
  /* Mise ne place de l'effet */
  letter-spacing: 0px;
  transition: all ease 1s;
}
 
/* Effet au passage de la souris sur les liens de sous-forum */
a.forumlink:hover {
  color: #45576B;
  text-decoration: none !important;
  letter-spacing: 2px;
  transition: all ease 1s;
}
 
/* Contour des sous-forums */
.conteneur_forum {
  width: 980px;
  height: 250px;
  margin: auto;
  padding: 10px;
  border-radius: 20px;
  /* Couleur de fond */
  background-color:#6C634B ;
}
                       
 
/* Countour de la description de sous-froums */
.description_forum {
  display: inline-block;
  vertical-align: top;
  /* Taille */
  width: 680px;
  height: 180px;
  padding: 10px;
  margin: 5px;
  margin-left: 20px;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #AA9E7C;
  overflow: hidden;
}
 
/* Position de l'image dans la description */
.description_forum img {
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}
 
/* Mise en forme du texte dans la description */
.description_forum p {
  width: 550px;
  height: 190px;
  margin: 0px;
  overflow: auto;
  /* Couleur du texte */
  color: #100F0E ;
  text-align: justify;
}
 
/* Conteneur des statistiques et dernier message */
.conteneur_stats {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  /* Taille */
  width: 220px;
  height: 180px;
  padding-bottom: 10px;
  margin: 5px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}
 
/* Arrondi sur l'image de nouveau/pas de nouveaux/verrouillé */
.conteneur_stats .folder_img {
  border-radius: 10px;
}
 
/* Mise en forme de X messages dans X sujets */
.conteneur_stats .stats {
  text-align: center;
  /* Couleur */
  color: #43586B;
  font-size: 8pt;
  font-family: 'Dancing Script';
}
 
/* Mise en forme du lien du dernier sujet */
.conteneur_stats .gensmall a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}
 
/* Effet au hover */
.conteneur_stats .gensmall a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}
 
/* Conteneur des liens déflants du sous-forum */
.conteneur_liens_ss_forums {
  /* Taille */
  width: 610px;
  height: 15px;
  padding-top: 5px;
  margin: auto;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  /* Couleur de fond */
  background-color: #E6E3DE;
}
 
/* Mise en forme des liens vers les sous-forums */
.conteneur_liens_ss_forums a {
  color: #3C4A55;
  text-decoration: none !important;
  transition: all ease 1s;
}
 
/* Effet au Hover */
.conteneur_liens_ss_forums a:hover {
  color: #B2B2B2;
  text-decoration: none !important;
  transition: all ease 1s;
}
/********* FIN CATÉGORIES ***********/

Code template index-box

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<div id="conteneur_onglets_cate">
  <div class="onglet_cate">Avant de commencer</div>
  <div class="onglet_cate">l'Académie Belfort</div>
</div>
<div id="conteneur_cate"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
          <td>
      <div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
          </td>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
          <td>
      <!-- BEGIN inc -->
      <!-- END inc -->
            <div class="titre_forum">
              <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}>
            </div>
            <div class="conteneur_forum">
              <div class="description_forum">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              </div>
              <div class="conteneur_stats">
                <img class="folder_img" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                <div class="stats">
                  {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                </div>
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </div>
              <div class="conteneur_liens_ss_forums">
                <marquee onmouseover="this.stop();" onmouseout="this.start();">
        <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                </marquee>
              </div>
            </div>
          </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->
  </div><!-- END catrow --></div>

Code Javascript

Code:
$('document').ready(function()
      {
      if($('.categorie').size() > 1)
        {
          $('#conteneur_onglets_cate').css( 'display' , 'block' );
          $('#conteneur_onglets_cate .onglet_cate').click(function()
          {
            change_categorie( $('.onglet_cate', '#conteneur_onglets_cate').index( this ) )
          });
       
        $('.onglet_cate:eq(0)').click();
    }
      });
 
      function change_categorie( index )
      {
          if( $('.categorie:eq(' + index + ')').size() != 0 )
          {
            $('#conteneur_cate').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );
 
         
          $('.categorie').css( 'display' , 'none' );
            $('.categorie:eq(' + index + ')').fadeIn( 500 );
         
          $('.onglet_cate.actif').removeClass('actif');
            $('.onglet_cate:eq('+ index +')').addClass('actif');
          }
          else alert('Vous ne pouvez pas accéder à cette catégorie');
      }

Merci d'avance !
Coralina

Coralina
**

Féminin
Messages : 56
Inscrit(e) le : 23/08/2021

https://belfort-academie.forumactif.com/
Coralina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code (catégorie)

Message par MlleAlys Lun 1 Aoû 2022 - 21:22

(re)Bonjour,
Que doit-il se passer lors d'un nouveau message ? L'image d'un nouveau message doit remplacer l'avatar ?
MlleAlys

MlleAlys
Membre actif

Messages : 5800
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code (catégorie)

Message par Coralina Lun 1 Aoû 2022 - 22:19

J'ai essayer de faire un schéma pour que ce soit plus compréhensif
Problème code (catégorie) Za

Lorsque qu'un nouveau message est posté par un utilisateur, l'avatar viens s'afficher à l'affiche dans les catégorie et des qu'une autre personne envoie un message, l'avatar est remplacé par le nouvelle utilisateur.
J'espère avoir réussi a t'expliquer  Problème code (catégorie) 1f600
Coralina

Coralina
**

Féminin
Messages : 56
Inscrit(e) le : 23/08/2021

https://belfort-academie.forumactif.com/
Coralina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code (catégorie)

Message par MlleAlys Mar 2 Aoû 2022 - 13:00

Dans affichage > structure et hiérarchie, vérifiez l'option : "Afficher les avatars dans la colonne "Derniers messages"" : OUI.

Dans le template, on va masquer l'image actuelle des nouveaux messages :
- Localisez le passage correspondant :
Code:
                 <img class="folder_img" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
Complétez-le ainsi pour le masquer :
Code:
                 <img style="display:none;" class="folder_img" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

La partie concernant l'avatar avait été totalement supprimée de votre template, il faut donc aller la récupérer dans le template d'origine, pour la remettre dans votre template personnalisé. Il s'agit de ce passage :
Code:

                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

Je l'insère juste après l'image masquée plus tôt :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<div id="conteneur_onglets_cate">
  <div class="onglet_cate">Avant de commencer</div>
  <div class="onglet_cate">l'Académie Belfort</div>
</div>
<div id="conteneur_cate"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorie">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
          <td>
      <div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
          </td>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
          <td>
      <!-- BEGIN inc -->
      <!-- END inc -->
            <div class="titre_forum">
              <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}>
            </div>
            <div class="conteneur_forum">
              <div class="description_forum">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
              </div>
              
              <div class="conteneur_stats">
                
                <img style="display:none;" class="folder_img" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
                
                <div class="stats">
                  {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                </div>
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </div>
              <div class="conteneur_liens_ss_forums">
                <marquee onmouseover="this.stop();" onmouseout="this.start();">
        <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                </marquee>
              </div>
            </div>
          </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->
  </div><!-- END catrow --></div>

Enregistrez et publiez le template pour vérifier l'affichage de l'avatar : Inséré ainsi, l'avatar aura l'affichage par défaut flottant à gauche.
Si vous souhaitez personnaliser cet affichage, vous pouvez modifier le passage en changeant le nom de la class comme ceci :
Code:

                            <!-- BEGIN avatar -->
                            <span class="avatar-dernier-posteur">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->
L'avatar s'affichera en taille réelle, sans mise en forme spécifique.
Vous pouvez alors ensuite utiliser votre css pour la mise en forme de l'image comme vous le souhaitez, par exemple :
Code:
.avatar-dernier-posteur img {
  max-width: 200px;
  max-height: 90px;
  margin: 5px;
}

(ici juste régler la taille et une marge, vous pouvez également ajouter une bordure, un arrondi, une ombre, un effet au survol, et toutes les autres possibilités du css...)
MlleAlys

MlleAlys
Membre actif

Messages : 5800
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code (catégorie)

Message par Coralina Mar 2 Aoû 2022 - 20:58

Merci beaucoup, le code a marché à la perfection !
Coralina

Coralina
**

Féminin
Messages : 56
Inscrit(e) le : 23/08/2021

https://belfort-academie.forumactif.com/
Coralina a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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