SHINNING DIAMOND ;; TEMPLATE

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 
 <!-- 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 
 <!-- BEGIN inc -->
 
 <!-- END inc -->
 <div style="background: url(https://i.imgur.com/nRuTgjg.png); background-attachment: fixed; background-size: cover; width:872px; padding:20px; border-bottom:1px solid #ccc;">
        <div class="forum-cat"> <a title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE} </a></div>
</div>
 
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <table cellspacing="0" cellpadding="0"><tr><td>
 <div style="background:#8FCDDC; border-bottom:1px solid #55B3CA; width:652px; padding:20px;">
                         <div class="titre-cat">
                          
 <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                            
                                  </div>
                  </div>
          </td><td>
          <div class="triangle-cat"></div>
                  </td><td>
                  <div class="icon-cat"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                  </td></tr>
</table>
 <table style="background:#F7F7F7; border-bottom:1px solid lightgrey; width:100%">
 <tr>
                  <td>
                    <div class="descri-cat">{catrow.forumrow.FORUM_DESC}</div>
                  </td>
                  <td>
                    <table><tr><td>
                      <div class="nb-cat">{catrow.forumrow.TOPICS}</div>
                      <div class="bb-cat">sujets</div>
                      </td><td>
 <div class="nb-cat">{catrow.forumrow.POSTS}</div>
                       <div class="bb-cat">messages</div>
                      </td></tr>
                    </table>
                  </td><td>
 <div class="last-cat">{catrow.forumrow.LAST_POST}</div>
                  <!-- BEGIN avatar --> <div class="last-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div> <!-- END avatar -->
        
                  </td>
  </tr>
</table>
<div class="sfo-cat">{catrow.forumrow.LINKS}</div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 
 <!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Code:

/********CATEGORIES**********/

.forum-cat {
  color:#fff;
  font-family:Roboto mono;
  font-size:20px;
  text-transform:lowercase;
  letter-spacing:2px;
  text-align:center;
  line-height:80px;
}

.nya a {
  background: -webkit-repeating-linear-gradient(45deg,#f5acc9, #c4d9f8) !important;
 background-clip: text;
-webkit-background-clip: text;
color: transparent;
  -webkit-text-fill-color: transparent;
}


.forum-cat a {
  color:#333!important;
}

.titre-cat {
  color:#fff;
  font-family:raleway;
  font-size:35px;
  font-style:italic;
  letter-spacing:-2px;
  font-weight:800;
  line-height:50px;
  text-shadow:2px 2px #68BCD0;
}

.titre-cat a {
  color:#fff!important;
}

.triangle-cat {
  border-right:80px solid transparent;
  border-top:90px solid #8FCDDC;
  height: 0;width: 0;
  z-index:4;
    position:relative;
}

.descri-cat {
width:640px;
  background:tansparent;
  padding:0px; margin:0px;
  height:130px;
  font-size:11px;
}

.dd-cat { 
  background:#f5f5f5;
  width:590px;
  padding:15px;
  font-family:lato;
  font-size:11px;
  color:#000;
  line-height:13px;
  text-align:justify;
  height:90px;
  border:1px solid #e5e5e5;
  margin-left:5px;
  overflow:auto;
  margin-top:3px
}

.dd-cat::-webkit-scrollbar {
    width: 11px;
    height: 5px;
    border: 5px solid #f5f5f5;
    background-color: #000;
    position: relative;
}

.dd-cat::-webkit-scrollbar-thumb {
    width:3px; 
  border:2px solid #f5f5f5;
    background-color:#000;
  border-radius:3px;
}

.cat-img {
    height: 110px;
  width:200px;
    z-index: 2;
 -webkit-filter: grayscale(100%);
  padding:8px;
  border:1px solid #e5e5e5;
  background:#fff;
}

.cat-dd {
  width:400px;
  height:106px;
  padding:10px;
  overflow:auto;
  border:1px solid #e5e5e5;
  border-left:0px;
  background:#f5f5f5;
  text-align:justify;
  line-height:13px;
  font-family:arimo;
}


.cat-dd::-webkit-scrollbar {
    width: 11px;
    height: 5px;
    border: 5px solid #f5f5f5;
    background-color: #000;
    position: relative;
}

.cat-dd::-webkit-scrollbar-thumb {
    width:3px; 
  border:2px solid #f5f5f5;
    background-color:#000;
  border-radius:3px;
}

.icon-cat img {
  height:90px;
  width:220px;
  z-index:1;
  margin-left:-80px;
  position:relative;
}

 .nb-cat {
  font-family:raleway;
  padding:10px;
  text-transform:lowercase;
  color:#000
    width:50px;
    font-size:30px;
  font-weight:bold;
  letter-spacing:-3px;
  height:65px;
  text-align:center;
  text-shadow: #fff 1px 1px, #fff -1px 1px, #fff -1px -1px, #fff 1px -1px;
}

.nb-cat::first-letter {color:#cac1e2}

.bb-cat {
  padding:6px;
  background:#A2D6E2;
  color:#fff;
  border:1px solid #68BCD0;
  font-size:9px;
  font-family:raleway;
  text-transform:uppercase;
  text-align:center;
}

.last-cat {
  font-size:9px;
  text-transform:uppercase;
  font-family:lato;
  color:#000;
  border:1px solid #e5e5e5;
  padding:10px;
  width:85px;
  height:100px;
  background:#f5f5f5;
}
.last-avatar {
      height: 58px;
    margin-top:-59px;
  margin-left:1px;
    overflow: hidden;
}
.last-avatar img {
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    margin-top: -50px;
    width: 105px;
}

.sfo-cat {
  background:#eeeeee;
  padding:10px;
  color:#fff;
  height:10px;
  border-bottom:1px solid #ccc;
}

.sfo-cat a {
  color:#fff;
  font-size:9px;
  text-transform:uppercase;
  font-family:raleway;
  background:#cac1e2;
  padding:5px;
  border:1px solid #9D8DCA;
}

catégories sans image :

Code:

<div class="dd-cat">
    zzzz
</div>

catégories avec image :

Code:

<table cellpadding="0" cellspacing="0">
       <tbody></tbody>
   <tr style="">
         
      <td>
           <img class="cat-img" src="https://i.imgur.com/IiQImjH.png" /> 
      </td>
         
      <td>
            
         <div class="cat-dd">
              Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. 
         </div>
            
      </td>
         
   </tr><tbody>    </tbody>
</table>

CSS BARRE NAVIGATION

Code:


/*****AVATAR*****/
.cercle_avatar{
  margin-left:0px;
  width: 60px;
  height: 60px;
  overflow: hidden;
  padding: 5px;
  border-radius:100%;
}

.panneau_avatar {
  width:60px;
  height:60px;
  overflow:hidden;
  border-radius:100%;
  }
.panneau_avatar img {
 width: 60px;
}

.cadre-avatar {
  background:#eeeeee;
  border-right:1px solid #ccc;;
}

/*** navigation ***/

#navig
{
  width: 100%;
  margin: auto;
  text-align:left;
}

#navig a {
 font-family:lato!important;
  font-size: 9px!important;
  text-transform: uppercase!important;
  color: #333!important;
  text-align:left;
  border-bottom: 3px solid #cac1e2;
    padding-bottom: 3px;
}
#navig a:hover {
 color:#333!important;
}

#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background: #f8f8f8;
  float: center;
  border-bottom:1px solid #ccc;
    top:0px;
}


/*** LIENS DE NAVIGATION ***/

.navigwelcome
{
  width:1270px;
  background:#fff;
  border-top:1px solid lightgrey;
  height:auto;
  margin-top:20px;
  font-family:lato;
  font-size: 8px;
  color: #333;
  text-align:right;
  text-transform: uppercase;
  line-height: 100%;
  word-spacing: 5px;
  z-index: 999;
}

.navigwelcome a, .navigwelcome a:hover {
  font-family: lato!important;
  font-size: 8px!important;
  color: #333!important;
  text-transform: uppercase;
  line-height: 100%;
  letter-spacing: 2px;
  word-spacing: 5px;
  border-bottom:0px!important;
  font-weight:300;
}

BARRE NAVIGATION

Code:

 <div id="navigation"><div id="navig">
    <table cellpadding="0" cellspacing="0"><tr><td>
      <div class="cadre-avatar">
        <div style="padding:10px;">
      <div class="cercle_avatar"><div class="js-useravatar panneau_avatar"></div></div>
      </div>
      </div>
      </td><td>
          <div style="padding:10px;">
    {GENERATED_NAV_BAR}
              </div>
        <div class="navigwelcome"><span id="v2naveh">
          <div style="padding:10px">»
        <a href="">diamond</a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
      {NAV_CAT_DESC_SECOND}
    <script type="text/javascript">document.getElementById('v2naveh').innerHTML=document.getElementById ('v2naveh').innerHTML.replace(/::/,"→");</script>
    <script type="text/javascript">document.getElementById('v2naveh').innerHTML=document.getElementById ('v2naveh').innerHTML.replace(/::/,"→");</script>
    <script type="text/javascript">document.getElementById('v2naveh').innerHTML=document.getElementById ('v2naveh').innerHTML.replace(/::/,"→");</script>
          </div>
          </span></div>
        </td></tr></table>
    </div></div>