Catégories avec images en fonds de titres et descriptions longues possibles

Bonjour à toi !

Quel titre à rallonge
Même après une longue pause, je suis toujours aussi nulle pour les titres de LS, donc si tu as une suggestion : je prends
Pour que ça soit plus clair, voilà un aperçu :

Pré-requis :
Avoir accès aux templates
Avoir des bases en HTML / CSS

Ici je pars de templates non modifiés, si tu n'arrives pas à adapter à tes templates n'hésite pas à demander de l'aide.

Normalement ces codes sont compatibles avec toutes les versions.
Si tu as le moindre problème n'hésite pas à me le dire afin que j'adapte au besoin



Ici on va se passer de tout ce que propose FA, on va aller chercher dans le template ces 2 commentaires :

Code:

<!-- BEGIN catrow -->

et

Code:

<!-- END catrow -->

Et on va purement et simplement supprimer ce qu'il y a entre les 2 (mais pas ces commentaires surtout )
et à la place on va ajouter ceci :

Code:

<!-- BEGIN tablehead -->
          <div class="TitreCategorie">
              {catrow.tablehead.L_FORUM}
          </div>
          <div class="listeForums">
        <!-- END tablehead -->
 
        <!-- BEGIN forumrow -->
        <div class="forum">
            <div class="titreForum">
                <h{catrow.forumrow.level} class="hierarchy">
                    <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                </h{catrow.forumrow.level}>
            </div>
            <div class="d-flex">
                <div class="avatarLastPost">
                    <!-- BEGIN avatar -->
                    {catrow.forumrow.avatar.LAST_POST_AVATAR}
                    <!-- END avatar -->
                </div>
                <div class="infosMess">
                    {catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn><br />
                    -<br />
                    {catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn>
                </div>
                <div class="description">
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                </div>
                <div class="etatSection">
                    <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"
                        alt="Etat de la section" />
                </div>
                <div class="sousFroums">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                </div>
            </div>
            <div class="lastMessage">
                <!-- BEGIN switch_topic_title -->
                <a href="{catrow.forumrow.U_LATEST_TOPIC}"title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                <!-- END switch_topic_title -->
                {catrow.forumrow.USER_LAST_POST}
                <script type="text/javascript">
                  $(".lastMessage").each( function(){$(this).html($(this).html().replace(/<br>\\*/g,"  -  "));});
                </script>
            </div>
        </div>
        <!-- END forumrow -->
 
        <!-- BEGIN tablefoot -->
    </div>
  <!-- END tablefoot -->

Et voilà, tu enregistres, tu publies le template, et la première partie est terminée. C'était pas sorcier pour l'instant


Dans ce template, on va simplement importer les polices que l'on souhaite (rendez-vous sur ce tutoriel pour en savoir plus).
Tu peux les mettre juste avant la fermeture de balise

Code:

</head>

Pour moi ça sera :

Code:

<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet" />

Tu enregistres et tu publies le template.


Dans la CSS de ton forum (Affichage -> Images & couleurs -> Couleurs et CSS -> Feuille de style CSS), tu vas allez coller ceci (ce code est commenté pour t'aider à la compréhension)

Code:

/***************** CATEGORIES ********************/

/*** On met en colonne ***/
.forum .d-flex{
  display:flex;
 justify-content: space-around;
}
.forum .d-flex div{
 flex: 1 1 auto;
}

/**** paramétrage des avatars du dernier posteur ****/
.avatarLastPost,
.avatarLastPost img{
 width:100px;
 height:100px;
 border-radius:0px;
}

/**** paramétrage des images "new", "no news", "lock" ****/
.etatSection,
.etatSection img{
 width:100px;
 height:100px;
}

/**** paramétrage des titres de catégories ****/
.TitreCategorie h2{
 width: 100%;
 background-color:#EAD5B8;
 font-family: 'Bebas Neue', cursive;
 line-height: 25px;
 font-size: 25px;
 text-align: right;
 color:#4D4D4D;
 padding:5px;
 border:#A68D6A 1px solid;
 width: 100%;
 margin:35px auto 5px;
}
.TitreCategorie span{
 color:#88C0C1;
 font-size: 22px;
 display:block;
}
/**** paramétrage des fonds titres de catégories
Partie à changer selon la catégorie : "cate-0", "cate-1";
le 0 correspond à la première, le 1 correspond à le deuxième, et ainsi de suite.
 ****/
.TitreCategorie[data-id-cate="cate-0"] h2 {
 background:url('URL DE TON IMAGE');
 background-size:cover;
}
.TitreCategorie[data-id-cate="cate-1"] h2{
 background:url('URL DE TON IMAGE');
 background-size:cover;
}
.TitreCategorie[data-id-cate="cate-2"] h2{
 background:url('URL DE TON IMAGE');
 background-size:cover;
}
/**** paramétrage de la liste des forums et des forums ****/
.listeForums{
 width: 100%;

}
.forum{
 background: #FAFAFA;
 margin:10px 0;
 border: #A68D6A 1px solid;
}
.titreForum,
.lastMessage{
 background: #4D4D4D;
 color:#EAD5B8;
 height: 30px;
 line-height: 30px;
}
.titreForum{
 font-family: 'Bebas Neue', cursive;
 font-size: 25px;
 padding:0 5px;
}
.titreForum a{
 font-family: 'Bebas Neue', cursive;
 color:#EAD5B8 !important;
}
.lastMessage{
 text-align: center;
 font-size:14px;
}
.lastMessage .gensmall strong {
 font-size: 14px;
 font-weight:normal;
 font-family: 'Bebas Neue', cursive;
}
.lastMessage a,
.lastMessage a:link
{
 font-size:14px;
 color:#EAD5B8;
 font-family: 'Bebas Neue', cursive;
}
.infosMess{
 width:100px;
 font-size:12px;
 text-align: center;
 font-style: italic;
 align-self: center;
}
.description{
 width:calc( 100% - 440px );
 text-align: justify;
 height:100px;
 overflow: auto;
 padding:5px;
}
.sousFroums{
 width: 140px;
 height: 100px;
 overflow: auto;
 font-size:0;
}
.sousFroums a{
 display: block;
 text-align: center;
 font-size:14px;
 font-family: 'Bebas Neue', cursive;
}
a.forumtitle{
 display:inline;
}

/***************** FIN CATEGORIES ********************/

Penses bien à dupliquer et mettre à jour cette partie autant de fois qu'il le faudra :

Code:

.TitreCategorie[data-id-cate="cate-0"] h2 {
 background:url('URL DE TON IMAGE');
 background-size:cover;
}

En mettant bien à jour le "cate-0" et l'url de l'image !


Pour mettre le javascript (js) on va aller dans le PA > modules > Gestion des codes Javascript
Ici, on crée un nouveau javascript que l'on va appliquer à l'index et aux sous-forums :


Et on va y mettre ce code :

Code:

$(function(){
    //on initialise un compteur
  var cpt = 0;
    // pour chaque class "TitreCategorie"
    // on lui rajoute un attribut qui s'appelle cate-X avec X la valeur du compteur
    // on incrémente le compteur
  $('.TitreCategorie').each(function(){
      $(this).attr('data-id-cate', 'cate-'+cpt+'');
      cpt ++;
  });
});

Il est commenté également donc tu devrais pouvoir le comprendre. Si ça n'est pas le cas, n'hésite pas à le dire

---

Et voilà, tu as des catégories simples mais personnalisées.
Si tu rencontres un problème avec ce libre-service, n'hésite pas à le dire, je répondrai à tes questions et t'aiderai au mieux.