Minimalist Lilac

Au clic sur le "+", les sous-forums apparaissent :


Apparence des forums avec des nouveaux messages :



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

La scrollbar est seulement stylée 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".

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le 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="forum-wrap">
    <div class="forum-content">
        <div class="forum-intro">
            <div class="forum-titre">
              <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
          </div>
            <div class="forum-last">{catrow.forumrow.LAST_POST}</div>
        </div>
        <div class="forum-desc">
          <label><input type="checkbox" /><div class="label-sous-forum">×</div><div class="sous-forum"><a href="google.fr">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</a></div></label>
            <div class="forum-desc-content">
                {catrow.forumrow.FORUM_DESC}
          </div>
    </div>
    <div class="forum-img">
      <div class="stats-forum">
          <div><b>{catrow.forumrow.TOPICS}</b> topics</div>
          <div><b>{catrow.forumrow.POSTS}</b> posts</div>
  </div>  
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      <script>
        $(function () {
$('img[title="Nouveaux messages"]').closest('.forum-img').addClass('new');

});
      </script>
      </div>
</div>
</div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*PERSONNALISATION DES FORUMS ET CATEGORIES PAR AWFUL*/

/*Titre de catégorie*/
.titre-cate {
    width: 850px;
    margin: auto;  
}
.titre-cate h2 {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -1px;
    color: #d6c9f8!important;
    font-size: 25px;
    text-shadow: 1px 1px 0 #637ab9;  
}

/*Bloc forum*/
.forum-wrap {
    width: 850px;
    height: 180px;
    padding: 6px;
    margin: 0 auto 15px;
    box-sizing: border-box;
    position: relative;
  /*Modifiable*/
    background-color: #a9a4d6;
    border: 1px solid #637ab9;  
    font-family: 'Roboto', sans-serif;
}

/*Suppression des soulignements des liens*/
.forum-wrap a,
.forum-wrap a:hover,
.forum-wrap a:active {
    text-decoration: none!important;
}

/*Bloc intérieur du forum*/
.forum-content {
    width: 100%;
    height: 100%;  
    box-sizing: border-box;
    position: relative;
    padding: 6px;
  /*modifiable*/
    background-color: #fff;
    border: 1px solid #637ab9;
}

/*Bloc titre forum et dernier message*/
.forum-intro {
    width: 300px;
    height: 100%;
    box-sizing: border-box;
    float: left;
    padding: 10px;
    position: relative;
  /*modifiable*/
   background-color: #a9a4d6;
    border: 1px solid #637ab9;
}

/*Titre forum*/
.forum-titre a {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -1px;
   font-size: 20px;
  /*modifiable*/
    color: #fff!important;
    text-shadow: 1px 1px 0 #637ab9;  
}

/*Dernier message*/
.forum-last {
    text-transform: uppercase;
    font-size: 9px;
    position: absolute;
    bottom: 10px;
   color: #fff;
}
/*Couleur lien dernier message*/
.forum-last a:first-child {
    color: #637ab9 !important;
}

/*Bloc description de forum*/
.forum-desc {
    height: 100%;
    width: 450px;    
    border-width: 1px 1px 1px 0;
    display: inline-block;
    padding: 25px;
    box-sizing: border-box;
    float: left;
    margin-right: 6px;
    position: relative;
  /*modifibale*/
    background: #fbfbfb;
    border-style: solid;
    border-color: #e0e0e0;
}
.forum-desc-content {
    overflow: auto;
    height: 100%;
    padding-right: 8px;
    font-size: 10px;
    text-align: justify;
}
/*Première lettre description de forum*/
.forum-desc-content:first-letter {
    font-weight: 900;
    font-size: 25px;
    float: left;
    margin-right: 7px;
    margin-top: 0;
    color: #a9a4d6;
}

/*Bloc sous forums*/
.sous-forum {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 25px;
    box-sizing: border-box;
    transform: scale(0);
    transition: all 0.3s;
    transform-origin: 0 0;
  /*modifiable*/
    background: rgba(255, 255, 255, 0.9);
    color: #a7a7a7;
}
/*Lien sous forum*/
.sous-forum a {
    text-transform: uppercase;
    color: #a9a4d6;
    transition: all 0.3s;
}
/*Lien sous forum au survol*/
.sous-forum a:hover {
    color: #d4d0f3;
}
/*Petite croix qui au clic fait apparaître les sous-forums*/
.label-sous-forum {
    position: absolute;
    left: -20px;
    bottom: 5px;
    transform: rotate(45deg);
    transition: all 0.3s;
    font-size: 20px;
    cursor: pointer;
  /*modifiable*/
    color: #8a2be2;
}
.forum-wrap input[type=checkbox] {
    position: absolute;
    display: none;
}
.forum-wrap input[type=checkbox]:checked ~ .sous-forum {
    transform: scale(1);
}
.forum-wrap input[type=checkbox]:checked ~ .label-sous-forum {
    transform: rotate(0deg);
}

/*Bloc image de nouveau message*/
.forum-img {
    height: 100%;
    width: 65px;  
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
  /*modifiable*/
    background: #a9a4d6;
    border: solid #637ab9 1px;
}
.forum-img img {
    display: none;
}
/*Couleur de fond quand il y a un nouveau message*/
.new {
    background: #e0c0e9;
}
/*texte pour un nouveau message*/
.new:after {
    position: absolute;
    text-transform: uppercase;
    top: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    content: "new ! ★";
    color: #6f69a4;
}

/*Statistiques forum*/
.stats-forum {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
.stats-forum div {
    text-transform: uppercase;
    width: 100%;
    font-size: 8px;
    color: #fff;
}
.stats-forum div b {
    display: block;
    font-size: 11px;
}

/*Customisation de la scrollbar sous Chrome*/
.forum-desc-content::-webkit-scrollbar {
    width: 8px;
    background: #A1A2A7;
    border: 3px solid #fafafa;
}
.forum-desc-content::-webkit-scrollbar-thumb {
    border: 2px solid #fafafa;
    background: #a9a4d6;
}