Flat

Pour les nouveaux messages, la petite image change (via CSS + js) :



Créditez-moi quelque part sur votre forum si vous utilisez ces codes

Il y a un petit script pour ce forum : au bout de 5 sous-forums affichés, un petit "+" apparaît et cache les sous-forums suivants pour ne pas surcharger la page. Il suffit de cliquer dessus pour les afficher !

La scrollbar est stylée seulement sous Chrome.



Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Lien vers les niveaux inférieurs", cocher "oui".

Pour activer l'affichage de l'avatar, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les avatars dans la colonne 'Derniers messages'", cocher "oui".

Votre code de template index_box. Pour y accéder : Panneau d'administration > Affichage > Templates > Général > Index_box. Remplacez l'intégralité du template par le code suivant :

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->

  <!-- END cathead -->
  <!-- BEGIN forumrow -->
<div class="wrap-forum">
    <div class="img-forum">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </div>
    <div class="forum-titre">
        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
    <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    <div class="stats-forum">
        <div>{catrow.forumrow.TOPICS} topics</div>
        <div>
            {catrow.forumrow.POSTS} posts</div>
    </div>
    <div class="avatar-forum">
        <!-- BEGIN avatar -->
        {catrow.forumrow.avatar.LAST_POST_AVATAR}
        <!-- END avatar -->
    </div>
    <div class="last-forum">
        {catrow.forumrow.LAST_POST}
  </div>
</div>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->

  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->
<script>

  $('img[title="Nouveaux messages"]').closest('.img-forum').addClass('new');
  $('.wrap-forum').each(function(){
    var noavatar = $(this);
     var avatar = $(this).find('.avatar-forum');
    if( avatar.html() == ""){    
      $(noavatar).addClass("no-avatar");
  }
    });
$('.sous-forum').each(function(){
  
  var awful = $(this).find('a').length;
  
  if( awful > 4){    
    $('a', this).eq(3).nextAll().hide().addClass('toggleable');
    $(this).append('<div class="more">+</div>');    
  }
  
});
      $('.sous-forum').on('click','.more', function(){
  
  if( $(this).hasClass('less') ){    
    $(this).text('+').removeClass('less');    
  }else{
    $(this).text('-').addClass('less');
  }
  
  $(this).siblings('a.toggleable').toggle();
    
});
</script>

Votre CSS, à placer dans votre panneau d'administration > Affichage > Images & couleurs > Couleurs > Feuille de style CSS

Code:

/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/
/*Import de la police*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
/*titre de catégorie*/
.titre-cate {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    width: 850px;
    margin: auto;
}
.titre-cate h2 {
    font-size: 25px;
    color: #b3b3b3;
    margin-bottom: 10px;
}
/*bloc forum*/
.wrap-forum {
    width: 850px;
    height: 110px;
    background-color: #e7e7e7;
    position: relative;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto 10px;
}
.wrap-forum a,
.wrap-forum a:hover {
    text-decoration: none!important;
}
.wrap-forum.no-avatar .img-forum {
    display: none;
}
/*Titre forum*/
.forum-titre {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: #7CD1B0;
    box-sizing: border-box;
    padding-left: 20px;
}
.forum-titre a {
    font-weight: 900;
    text-transform: uppercase;
    line-height: 40px;
    font-size: 16px;
    color: #444!important;
    transition: all 0.5s;
}
.forum-titre a:hover {
    color: #3C8C7C !important;
}
/*Suppression de l'image de nouveau message*/
.img-forum {
    position: absolute;
    bottom: 0;
    right: 0;
}
.img-forum img {
    display: none;
}
/*remplacement de l'image de nouveau message par un 'x' rouge pour old*/
.img-forum:before {
    content: "×";
    height: 15px;
    width: 15px;
    background: #CC9696;
    position: absolute;
    right: 140px;
    bottom: 10px;
    z-index: 2;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    color: #fff;
    font-size: 10px;
    padding-left: 1px;
    box-sizing: border-box;
}
/*changement du 'x' rouge en '✓' vert pour les nouveaux messages*/
.new:before {
    background: #5AC854;
    content: "✓";
}
/*description de forum*/
.forum-desc {
    position: absolute;
    height: 50px;
    width: 500px;
    overflow: auto;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    text-align: justify;
    padding-right: 10px;
    line-height: 12px;
}
/*Custom scrollbar (seulement pour Chrome !)*/
.forum-desc::-webkit-scrollbar {
    width: 4px;
}
.forum-desc::-webkit-scrollbar-track {
    background-color: #A1A2A7;
}
.forum-desc::-webkit-scrollbar-thumb {
    background-color: #7CD1B0;
}
/*Statistiques topics et posts*/
.stats-forum {
    left: 540px;
    position: absolute;
    top: 50px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
    color: #9f9f9f;
}
/*Dernier message*/
.last-forum {
    position: absolute;
    right: 20px;
    text-transform: uppercase;
    font-size: 10px;
    bottom: 10px;
    color: #9f9f9f;
}
.last-forum a {
    text-transform: none;
}
.last-forum span > a:first-child {
    font-size: 15px;
    color: #c60f3c;
    transition: all 0.3s;
}
.last-forum span > a:first-child:hover {
    color: #de99aa;
}
.last-forum:empty::before {
    content: "Pas de nouveaux messages";
    font-size: 10px;
    width: 100px !important;
    display: block;
    bottom: 10px;
    position: relative;
}
/*Sous-forums*/
.sous-forum {
    position: absolute;
    font-size: 0;
    right: 18px;
    top: 20px;
    max-width: 450px;
    background: #7cd1b0;
    z-index: 3;
}
.sous-forum a {
    display: inline-block;
    font-size: 9px !important;
    background: #aae4cd;
    margin: 0 2px 3px;
    padding: 1px 4px;
    text-transform: uppercase;
    color: #696969 !important;
    transition: all 0.3s;
}
.sous-forum a:hover {
    background: #d9fff0;
}
/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
.more {
    position: absolute;
    right: -10px;
    top: -16px;
    display: block;
    background: green;
    font-size: 10px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    text-align: center;
    line-height: 13.5px;
    color: #e7e7e7;
    box-sizing: border-box;
    padding-left: 1px;
    cursor: pointer;
}
/*Couleur bouton "-"*/
.more.less {
    background: #c35050;
}
/*Avatar du dernier posteur*/
.avatar-forum {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
    bottom: 10px;
    right: 140px;
    background-size: 100%;
}
.avatar-forum img {
    width: 50px;
}

Hello! Merci pour ces codes fabuleux que tu nous partages!

Seulement j'ai un petit soucis avec le code, le nom de mes catégories n'apparaissent plus. J'ai essayé de changer la couleur au cas où mais je ne trouve pas comment les faire ré-apparaître. :/ Est-ce qu'il faut poster un truc en particulier lors de la création de la catégorie? Merci d'avance! :)

Bonjour Galuche,
Il n'y a rien de spécial à faire normalement, est-ce que tu as bien vérifié le niveau de compression de l'index ? Dans ton PA > Affichage > Page d'accueil > Structure et hiérarchie, normalement tu dois cocher "moyen" dans "séparer les catégories sur l'index" o:

Du coup, j'ai trouvé c'est moi qui avait mal configurer le forum. Par contre, maintenant j'ai un soucis niveau des sous catégories, elles s'affichent comme ça chez moi. Il y a une manip à faire?

Spoiler:

(promis après j'arrête de t'embêter ^^')

Oh et est-ce-que le code peux marcher dans les catégories?

Spoiler:

Parce que du coup ça fais tout beau et après tout caca ^^

Coucou Galuche !
Alors pour ton souci, pourrais-tu poster là : https://terrible.forumactif.org/f19-probleme-avec-un-code en remplissant le formulaire, pour que je puisse t'aider au mieux ?
Ensuite, le code "Flat" est un code catégorie, et l'image que tu me montres là est une liste des sujets, donc malheureusement non, il ne peut pas fonctionner dessus :c
Je t'invite soit à passer commande (quand elles rouvriront) soit à jeter un oeil dans cette catégorie : https://terrible.forumactif.org/f11-sujets-et-messages
Malheureusement il n'y a qu'un seul code de liste des sujets pour le moment !