TYPE : PHPBB2

HTML

Il faut remplacer index_box par ce qui suis

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="cate-title">
{catrow.tablehead.L_FORUM}
</div>
<div class="cate-bloc">
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
<div class="cate-forum">
    <div class="forum-encart">
      <div class="cate-descr">
        <div class="forum-titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
        <div class="cate-none"></div>
        <span>{catrow.forumrow.FORUM_DESC}</span>
      </div>
      <div class="cate-sous">
                  <!-- Sous forum -->
        <div class="ssfo" id="subforums">
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
      </div>
      
  <div class="cate-infos">
 <div class="cate-vava">            <!-- BEGIN avatar -->
        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>            <!-- END avatar -->
          </div>    
          <div class="cate-dermess">
            {catrow.forumrow.LAST_POST}
          </div>
          <img class="cate-no" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
               <div class="cate-messvue">
            {catrow.forumrow.TOPICS} messages - {catrow.forumrow.POSTS} sujets
          </div>
      </div>

  </div>
  </div>
</div>
         <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>    
<!-- END forumrow -->
<!-- BEGIN catfoot -->        
<!-- END catfoot -->
<!-- BEGIN tablefoot --><!-- END catrow -->
<!-- END tablefoot -->

Les descriptions

Pour ajouter une image, il suffit de mettre une image grâce à

Code:

<img src=""/>

Avant d'écrire la description.

CSS

Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:

:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
  
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:

/* Code de Catégories par KoalaVolant */

/* Pour le fond en image */

  .cate-title, .forum-titre{ background:var(--main-color-v); background-position:center; background-size:cover; clip-path: polygon(0% 0%, 96% 0, 100% 50%, 96% 100%, 0% 100%);
  display:flex; justify-content:center; flex-wrap:wrap; position:relative;}
  .cate-title:after, .forum-titre:after{ position: absolute; content: ''; z-index:7;display: block;
  top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);    mix-blend-mode: hard-light; }

/* Titre de catégories */

.cate-title{ margin-left:10px; }
.cate-title h2{ font-family:var(--font2); font-size:30px; color:var(--white); z-index:99; margin:15px 0px; }

/* Flex */

.forum-encart{ width:809px; display:flex; justify-content:space-between; background-color:var(--grisc);     margin: 5px 10px;    padding: 10px;    height: 117px;}
.forum-encart *{ box-sizing:border-box; }
.cate-descr{ width:39%; }
.cate-infos{ width:34%; }
.cate-sous{ width:24%; }

/* Titre de forum */

.forum-titre{ justify-content:flex-start; width:100%; margin-bottom:10px; height:28px; }
.forum-titre a.forumlink{ color:var(--white) !important; position:relative; z-index:110; text-transform:uppercase; font-family:var(--font1);  
  display:block; padding:5px; font-size:14px; font-weight:normal; letter-spacing:2px; }

/* Description */

.cate-descr{ position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; }
.cate-descr span{ display:block; margin:0px 5px; padding-right:5px; width:205px;  height:77px; overflow:auto; font-size:13px; line-height:15px; text-align:justify;
  color:var(--black); }
.cate-descr img{ width:93px; height:77px; object-fit:cover; position:absolute; left:4px; }
.cate-none{ width:100px; height:77px; background-color:var(--white); }

/* Sous forums */

.ssfo{     height: 118px;  overflow: auto; }
.ssfo a{ display: block;    background-color: var(--main-color);    color: var(--white);    text-align: center;
    text-transform: uppercase;        font-family: var(--font3);    font-weight: bolder;    font-size: 12px;
    margin: 3px 4px;    line-height: 15px;    padding: 3px; }
.ssfo a:hover{ text-decoration:none !important; background-color:var(--white); color:var(--black); }

/* Stats */

.cate-infos{ display: flex;  justify-content: space-around; align-items:center; flex-wrap:wrap; }
.cate-messvue {    background-color: var(--white);    text-align: center;    font-family: var(--font1); width:92%;
    font-size: 11px;    letter-spacing: 1px;    color: var(--main-color);    margin-bottom: 5px;clip-path: polygon(8% 0, 100% 0%, 100% 100%, 8% 100%, 0% 50%);}
.cate-messder{ width:257px;}
.lastpost-avatar img {    width:51px;    height: 80px;    object-fit: cover; border:2px solid var(--white); }
.cate-dermess{ text-align:center; font-size:10px; margin:0px; width:132px; }
.cate-dermess span > a {    font-family: var(--font2);    text-decoration: none;    color: var(--main-color);    font-size: 17px; }
.cate-no{ margin-top: 5px;    height: 66%;  width: 20px; object-fit:cover; }

TYPE : ModernBB

HTML

Il faut remplacer index_box par ce qui suis

Code:

<ul class="linklist top">
 <!-- BEGIN switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
 </li>
 <li>
 <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
 </li>
 <!-- END switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
 </li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside">
 <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
 </li>
 <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
<div class="cate-title">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->
 <!-- BEGIN forumrow -->
 <div class="cate-forum">
    <div class="forum-encart">
      <div class="cate-descr">
        <div class="forum-titre"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
        <div class="cate-none"></div>
        <span>{catrow.forumrow.FORUM_DESC}</span>
      </div>
      <div class="cate-sous">
                  <!-- Sous forum -->
<span class="subforums ssfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                      <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</span>
      </div>
      
  <div class="cate-infos">
 <div class="cate-vava">            <!-- BEGIN avatar -->    
                      <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                     <!-- END avatar -->
          </div>    
          <div class="cate-dermess">
               <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}" class="titresujet">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
            <span class="userlast">{catrow.forumrow.USER_LAST_POST}</span>
          </div>
          <img class="cate-no" src="{catrow.forumrow.FORUM_FOLDER_IMG}">
               <div class="cate-messvue">
            {catrow.forumrow.TOPICS} S | {catrow.forumrow.POSTS} M
          </div>
      </div>
<script type="text/javascript">$('.subforums').each(function () {$(this).html($(this).html().replace(/, /g,''))});</script>
  </div>
  </div>
        
 <!-- END forumrow -->

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

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
 <li>
 <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
 </li>
 <li>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 </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"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var btn_collapse = $('<div></div>', {
 class: 'btn-collapse'
 });

 var btn_collapse_show = $('<i></i>', {
 class: 'ion-android-add-circle hidden',
 'data-tooltip': '{L_EXPEND_CAT}'
 }).appendTo(btn_collapse);

 var btn_collapse_hide = $('<i></i>', {
 class: 'ion-android-remove-circle',
 'data-tooltip': '{L_HIDE_CAT}'
 }).appendTo(btn_collapse);

 var collapsed = [];

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 $(document).on('click', '.btn-collapse', function() {
 $(this).children('.ion-android-add-circle').toggleClass('hidden');
 $(this).children('.ion-android-remove-circle').toggleClass('hidden');
 $(this).parents('.forabg').toggleClass('hidden');

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 if (!$(this).parents('.forabg').hasClass('hidden')) {
 removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

 createCookie('collapsed', collapsed);
 } else {
 collapsed.push('' + $(this).parents('.forabg').data('cindex'));

 createCookie('collapsed', collapsed);
 }
 });

 $('.forabg').each(function(i) {
 $(this).data('cindex', '' + i);

 $(btn_collapse)
 .clone()
 .attr('id', 'forabg' + i)
 .appendTo($(this).find('.header'));

 if ($.inArray('' + i, collapsed) > -1) {
 $(this).toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
 }
 });
});

function removeFromArray(item, array) {
 var i = array.indexOf(item);

 if (i > -1) {
 array = array.splice(i, 1);
 }
}

function createCookie(name, value, days) {
 var expires;

 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 expires = "; expires=" + date.toGMTString();
 } else {
 expires = "";
 }
 document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = encodeURIComponent(name) + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
 }
 return null;
}
//]]>
</script>


Les descriptions

Pour ajouter une image, il suffit de mettre une image grâce à

Code:

<img src=""/>

Avant d'écrire la description.

CSS

Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:

:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
  
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:

/* Code de Catégories par KoalaVolant */

/* Pour le fond en image */

  .cate-title, .forum-titre{ background:var(--main-color-v); background-position:center; background-size:cover; clip-path: polygon(0% 0%, 96% 0, 100% 50%, 96% 100%, 0% 100%);
  display:flex; justify-content:center; flex-wrap:wrap; position:relative;}
  .cate-title:after, .forum-titre:after{ position: absolute; content: ''; z-index:7;display: block;
  top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);    mix-blend-mode: hard-light; }

/* Titre de catégories */

.cate-title{ margin-left:10px; width:800px;}
.cate-title h2{ font-family:var(--font2); font-size:30px; color:var(--white); z-index:99; margin:15px 0px; }

/* Flex */

.forum-encart{ width:789px; display:flex; justify-content:space-between; background-color:var(--grisc);     margin: 5px 10px;    padding: 10px;    height: 135px;}
.forum-encart *{ box-sizing:border-box; }
.cate-descr{ width:46%; }
.cate-infos{ width:28%; }
.cate-sous{ width:24%; }

/* Titre de forum */

.forum-titre{ justify-content:flex-start; width:100%; margin-bottom:10px; height:28px; padding:10px;}
.forum-titre a.forumtitle{ color:var(--white) !important; position:relative; z-index:110; text-transform:uppercase; font-family:var(--font1);  
  display:block; font-size:14px; font-weight:normal; letter-spacing:2px; }

/* Description */

.cate-descr{ position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; }
.cate-descr span{ display:block; margin:0px 5px; padding-right:5px; width:241px;  height:77px; overflow:auto; font-size:13px; line-height:15px; text-align:justify;
  color:var(--black); }
.cate-descr img{ width:93px; height:77px; object-fit:cover; position:absolute; left:4px; }
.cate-none{ width:100px; height:77px; background-color:var(--white); }

/* Sous forums */

.ssfo{     height: 118px;  overflow: auto; }
.ssfo a{ display: block;    background-color: var(--main-color);    color: var(--white);    text-align: center;
    text-transform: uppercase;        font-family: var(--font3);    font-weight: bolder;    font-size: 12px;
    margin: 3px 4px;    line-height: 15px;    padding: 3px; }
.ssfo a:hover{ text-decoration:none !important; background-color:var(--white); color:var(--black); }

/* Stats */

.cate-infos{ display: flex;  justify-content: space-around; align-items:center; flex-wrap:wrap; }
.cate-messvue {    background-color: var(--white);    text-align: center;    font-family: var(--font1); width:92%;
    font-size: 11px;    letter-spacing: 1px;    color: var(--main-color);    margin-bottom: 5px;clip-path: polygon(8% 0, 100% 0%, 100% 100%, 8% 100%, 0% 50%);}
.cate-messder{ width:257px;}
.lastpost-avatar{ padding:0px; }
.lastpost-avatar img {    width:51px;    height: 80px;    object-fit: cover; border:2px solid var(--white); }
.cate-dermess{ text-align:center; font-size:10px; margin:0px; width:132px; }
.cate-dermess .titresujet {    font-family: var(--font2);    text-decoration: none;    color: var(--main-color);    font-size: 17px; }
.cate-no{ margin-top: 5px;    height: 66%;  width: 20px; object-fit:cover; }