Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Code forum :: Catégories et forums
avatar
le Jeu 29 Mar - 12:17
Petite variante d'un code un peu plus ancien : Flat



Au-delà de 4 sous-forums, les sous-forums suivants sont masqués. Il suffit de cliquer sur le "+" pour les afficher"





Apparence d'un forum avec un nouveau message :



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

Codes et explications


phpBB2


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".

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|Montserrat: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="cat-wrap">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>

  <!-- END tablehead -->

  <!-- BEGIN cathead -->
  <!-- END cathead -->

  <!-- BEGIN forumrow -->
<div class="wrap-forum">
    
  <div class="forum-top">
    <div class="forum-titre">
        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  </div>
    
    <div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
    
    <div class="stats-forum">
      <div><b>{catrow.forumrow.TOPICS}</b> topics</div>
        <div>
          <b>{catrow.forumrow.POSTS}</b> posts</div>
    </div>
    <div class="avatar-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>
        <!-- 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 --></div>
<!-- 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 > div + img');
    if( avatar.length == 0){    
      $(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>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
Code:
/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/
/*titre de catégorie*/
 .cat-wrap {
     margin-top: 25px;
     margin-bottom: 25px;
}
 .titre-cate {
     font-family: 'Montserrat', sans-serif;
     text-transform: uppercase;
     width: 850px;
     margin: auto;
     background: #272727;
     padding: 40px 20px 20px;
     box-sizing: border-box;
     border-bottom: 5px solid #f3e224;
}
 .titre-cate h2 {
     font-size: 35px;
     color: #fff;
     margin: 0px;
     font-weight: 900;
}
 .titre-cate h2:first-letter {
     color: #f3e224;
}
/*bloc forum*/
 .wrap-forum {
     width: 850px;
     height: 110px;
     background-color: #444;
     position: relative;
     font-family: 'Roboto', sans-serif;
     margin: 0 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     border-bottom: 1px solid #353535;
     padding: 0px 20px 10px;
     box-sizing: border-box;
}
 .wrap-forum:last-child {
     margin-bottom: 20px;
}
 .wrap-forum a, .wrap-forum a:hover {
     text-decoration: none!important;
}
 .wrap-forum.no-avatar .img-forum {
     display: none;
}
/*partie haute du forum */
 .forum-top {
     -webkit-box-flex: 100%;
         -ms-flex: 100%;
             flex: 100%;
     height: 40px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
}
/*Titre forum*/
 .forum-titre a {
     font-weight: 900;
     text-transform: uppercase;
     line-height: 40px;
     font-size: 16px;
     color: #fff!important;
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
     font-family: 'Montserrat', sans-serif;
}
 .forum-titre a:hover {
     color: #8f8a56 !important;
}
/*Suppression de l'image de nouveau message*/
 .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: #C26F6F;
     position: absolute;
     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 {
     height: 50px;
     width: 500px;
     overflow: auto;
     font-size: 11px;
     text-align: justify;
     padding-right: 10px;
     line-height: 12px;
     margin-right: 20px;
     color: #a1a1a1;
}
/*Custom scrollbar (seulement pour Chrome !)*/
 .forum-desc::-webkit-scrollbar {
     width: 3px;
}
 .forum-desc::-webkit-scrollbar-track {
     background-color: #272727;
     border: 1px solid #444444;
}
 .forum-desc::-webkit-scrollbar-thumb {
     background-color: #f3e224;
}
/*Statistiques topics et posts*/
 .stats-forum {
     text-transform: uppercase;
     font-size: 8px;
     letter-spacing: 1px;
     color: #9f9f9f;
     -ms-flex-item-align: center;
         align-self: center;
     margin-bottom: 10px;
}
/*Dernier message*/
 .last-forum {
     text-transform: uppercase;
     font-size: 10px;
     color: #9f9f9f;
}
 .last-forum a {
     text-transform: none;
}
 .last-forum span > a:first-child {
     font-size: 15px;
     color: #f3e224;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .last-forum span > a:first-child:hover {
     color: #8f8a56;
}
 .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 {
     font-size: 0;
     width: 450px;
     z-index: 3;
     text-align: right;
     -ms-flex-item-align: center;
         align-self: center;
}
 .sous-forum a {
     display: inline-block;
     font-size: 9px !important;
     background: #272727;
     margin: 0 2px 3px;
     padding: 1px 4px;
     text-transform: uppercase;
     color: #fff !important;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .sous-forum a:hover {
     background: #444;
}
/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
 .more {
     display: inline-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;
     margin-left: 5px;
}
/*Couleur bouton "-"*/
 .more.less {
     background: #c35050;
}
/*Avatar du dernier posteur*/
 .avatar-forum {
     width: 50px;
     height: 50px;
     overflow: hidden;
     border-radius: 50%;
     background-size: 100%;
     margin-left: auto;
     margin-right: 20px;
}
 .avatar-forum img {
     width: 50px;
}


phpBB3


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".

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|Montserrat: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:
<ul class="linklist">
 <!-- BEGIN switch_user_logged_in -->
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
 <!-- END switch_user_logged_in -->
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
 <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
<div class="cat-wrap">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
<div class="wrap-forum">
    
  <div class="forum-top">
    <div class="forum-titre">
        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  </div>
    
    <div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
    
    <div class="stats-forum">
      <div><b>{catrow.forumrow.TOPICS}</b> topics</div>
        <div>
          <b>{catrow.forumrow.POSTS}</b> posts</div>
    </div>
    <div class="avatar-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>
        <!-- BEGIN avatar -->
        {catrow.forumrow.avatar.LAST_POST_AVATAR}
        <!-- END avatar -->
      
    </div>
    <div class="last-forum">
        <!-- 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}
  </div>
</div>          
                  
              
 <!-- END forumrow -->

                    <!-- BEGIN tablefoot --></div>

                  <!-- 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 > div + img');
    if( avatar.length == 0){    
      $(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>
<!-- BEGIN switch_on_index -->
<ul class="linklist">
 <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
 <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> •&nbsp;</li>
 <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
 <!-- BEGIN switch_delete_cookies -->
 <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
Code:
/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/
/*titre de catégorie*/
 .cat-wrap {
     margin-top: 25px;
     margin-bottom: 25px;
}
 .titre-cate {
     font-family: 'Montserrat', sans-serif;
     text-transform: uppercase;
     width: 850px;
     margin: auto;
     background: #272727;
     padding: 40px 20px 20px;
     box-sizing: border-box;
     border-bottom: 5px solid #f3e224;
}
 .titre-cate h2 {
     font-size: 35px;
     color: #fff;
     margin: 0px;
     font-weight: 900;
}
 .titre-cate h2::first-letter {
     color: #f3e224;
}
/*bloc forum*/
 .wrap-forum {
     width: 850px;
     height: 110px;
     background-color: #444;
     position: relative;
     font-family: 'Roboto', sans-serif;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     border-bottom: 1px solid #353535;
     padding: 0px 20px 10px;
     box-sizing: border-box;
}
 .wrap-forum:last-child {
     margin-bottom: 20px;
}
 .wrap-forum a, .wrap-forum a:hover {
     text-decoration: none!important;
}
 .wrap-forum.no-avatar .img-forum {
     display: none;
}
/*partie haute du forum */
 .forum-top {
     flex: 100%;
     height: 40px;
     display: flex;
     justify-content: space-between;
}
/*Titre forum*/
 .forum-titre a {
     font-weight: 900;
     text-transform: uppercase;
     line-height: 40px;
     font-size: 16px;
     color: #fff!important;
     transition: all 0.5s;
     font-family: 'Montserrat', sans-serif;
}
 .forum-titre a:hover {
     color: #8f8a56 !important;
}
/*Suppression de l'image de nouveau message*/
 .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: #C26F6F;
     position: absolute;
     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 {
     height: 50px;
     width: 500px;
     overflow: auto;
     font-size: 11px;
     text-align: justify;
     padding-right: 10px;
     line-height: 12px;
     margin-right: 20px;
     color: #a1a1a1;
}
/*Custom scrollbar (seulement pour Chrome !)*/
 .forum-desc::-webkit-scrollbar {
     width: 3px;
}
 .forum-desc::-webkit-scrollbar-track {
     background-color: #272727;
     border: 1px solid #444444;
}
 .forum-desc::-webkit-scrollbar-thumb {
     background-color: #f3e224;
}
/*Statistiques topics et posts*/
 .stats-forum {
     text-transform: uppercase;
     font-size: 8px;
     letter-spacing: 1px;
     color: #9f9f9f;
     align-self: center;
     margin-bottom: 10px;
}
/*Dernier message*/
 .last-forum {
     text-transform: uppercase;
     font-size: 10px;
     color: #9f9f9f;
}
 .last-forum a {
     text-transform: none;
}
 .last-forum > a:first-child {
     font-size: 15px;
     color: #f3e224;
     transition: all 0.3s;
}
 .last-forum > a:first-child:hover {
     color: #8f8a56;
}
 .wrap-forum.no-avatar .last-forum::before {
     content: "Pas de nouveaux messages";
     font-size: 10px;
     width: 100px !important;
     display: block;
     bottom: 10px;
     position: relative;
}
/*Sous-forums*/
 .sous-forum {
     font-size: 0;
     width: 450px;
     z-index: 3;
     text-align: right;
     align-self: center;
}
 .sous-forum a {
     display: inline-block;
     font-size: 9px !important;
     background: #272727;
     margin: 0 2px 3px;
     padding: 1px 4px;
     text-transform: uppercase;
     color: #fff !important;
     transition: all 0.3s;
}
 .sous-forum a:hover {
     background: #444;
}
/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
 .more {
     display: inline-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;
     margin-left: 5px;
}
/*Couleur bouton "-"*/
 .more.less {
     background: #c35050;
}
/*Avatar du dernier posteur*/
 .avatar-forum {
     width: 50px;
     height: 50px;
     overflow: hidden;
     border-radius: 50%;
     background-size: 100%;
     margin-left: auto;
     margin-right: 20px;
}
 .avatar-forum img {
     width: 50px;
}

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