Personnaliser l'index du forum

Bonjour nous allons voir comment modifier l'index du forum de PhpBoost V5



01 - Mise en place du code tpl



Pour commencer nous allons remplacée le code tpl de forum_index.tpl par le code ci dessous.

le fichier forum_index.tpl ce trouve à la racine de votre site /forum/templates/, copier le fichier forum_index.tpl dans /templates/votre thème/modules/forum/ ci le dossier forum n'est pas disponible crée le.
  • Cas N°1 : le fichier forum_index.tpl et déjà dans le dossier, pas besoin de le remplacer juste a l’éditée.
  • Cas N°2 : le fichier forum_index.tpl n'est pas présent copier le puis éditée le.

Code HTML :
 
# INCLUDE forum_top #
# START forums_list #
# START forums_list.endcats #
</tbody>
</table>
</div>
</article>
# END forums_list.endcats #
# START forums_list.cats #
<script>
<!--
jQuery('#table-{forums_list.cats.IDCAT}').basictable();
-->
</script>
<article itemscope="itemscope" itemtype="http://schema.org/Creativework" id="article-forum-{forums_list.cats.IDCAT}">
<header>
<h2>
<span class="forum-cat-title">
<a href="${relative_url(SyndicationUrlBuilder::rss('forum',forums_list.cats.IDCAT))}" class="fa fa-syndication" title="${LangLoader::get_message('syndication', 'common')}"></a>
&nbsp;&nbsp;<a href="{forums_list.cats.U_FORUM_VARS}" class="forum-link-cat" title="{forums_list.cats.NAME}">{forums_list.cats.NAME}</a>
</span>
# IF C_DISPLAY_UNREAD_DETAILS #
<span class="float-right">
<a href="{PATH_TO_ROOT}/forum/unread.php?cat={forums_list.cats.IDCAT}" title="{L_DISPLAY_UNREAD_MSG}"><i class="fa fa-notread"></i></a>
</span>
# ENDIF #
</h2>
</header>
<div class="module-contents forum-contents">
<table id="table-{forums_list.cats.IDCAT}" class="forum-table">
<tbody>
# END forums_list.cats #
# START forums_list.subcats #
# IF forums_list.subcats.U_FORUM_URL #
<div class="forum-topic-link small-block">
<i class="fa fa-globe"></i>
<a href="{forums_list.subcats.U_FORUM_URL}" title="{forums_list.subcats.NAME}">{forums_list.subcats.NAME}</a>
<br />
<span class="smaller">{forums_list.subcats.DESC}</span>
</div>
# ELSE #
<div class="forum-topic-index small-block">
<br />
<a href="{forums_list.subcats.U_FORUM_VARS}" title="{forums_list.subcats.NAME}">{forums_list.subcats.NAME}</a>
<br />
<span class="smaller">{forums_list.subcats.DESC}</span>
<span class="small">{forums_list.subcats.SUBFORUMS}</span>
<br/>
<i class="fa-msg fa # IF forums_list.subcats.C_BLINK #blink # ENDIF #{forums_list.subcats.IMG_ANNOUNCE}">&nbsp;{forums_list.subcats.NBR_TOPIC} {L_TOPIC}</i>
<i class="fa-msg fa fa-commenting-o" aria-hidden="true">&nbsp;{forums_list.subcats.NBR_MSG} {L_MESSAGE}</i>
<br />
{L_LAST_MESSAGE} : {forums_list.subcats.U_LAST_TOPIC}
</div>
# ENDIF #
# END forums_list.subcats #
# END forums_list #
# INCLUDE forum_bottom #
 


02 - Mise en place du code css



Nous allons maintenant ajouter du code css rien de compliqué.

le fichier forum.css ce trouve à la racine de votre site /forum/templates/, copier le fichier forum.css dans /templates/votre thème/modules/forum/.
  • Cas N°1 : le fichier forum.css et déjà présent vous avez juste a l'éditée.
  • Cas N°2 : le fichier forum.css n'est pas présent copier le.

Puis ajouté le code css présent ci dessous en dessous de
Code CSS :
@media (min-width: 769px) {
.forum-index {
display: block;
}
}
qui se trouve a la ligne : 32 normalement.

Code CSS :
 
.forum-topic-index {    
    width: 49%;
    min-height: 140px;   
    margin: 1% 0.5%;
}
.forum-topic-link {
width: 99%;
    margin: 1% 0.5%;
}
@media (max-width: 600px) {
.forum-topic-index {
    float: none; 
    width: 99%;
}
}
 


Mis a jour le 09/10/2016

Cette page a été consultée 1152 fois