• Ce code demande d'ajouter une image à la création d'une catégorie.

Pour le HTML, remplacez l'intégralité de votre template index_box par ce code :

Code:

<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Great+Vibes|Satisfy" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet"/>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<div class="titlecat">{catrow.tablehead.L_FORUM}</div>

<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->


  <div class="categories">
    
    <div class="avatardernier"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
    
    <div class="titlesuj"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>

    
      <div class="description">{catrow.forumrow.FORUM_DESC}</div>
      <div class="desc"><div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    </div>
    
<div class="newmessage"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /></div>  
  
<div class="lastpost">{catrow.forumrow.LAST_POST}</div>
    
  </div>
    
<!-- END forumrow -->
<!-- END catrow -->

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:


@keyframes beat{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}50%{-webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}}
.bodylinewidth {
    margin: 0 auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.8);
}
.titlecat h2{
  text-align:center;
  color:#838383;
  font-size:50px;
  font-family:Satisfy;
  text-shadow:1px 1px 0px black;
}
.titlecat::first-letter {
  color:#cca44d;
  font-size:80px;
  font-family:Great Vibes;
  font-style:italic;
}
.categories {
    width: 100%;
    margin: 20px 0px 20px 0px;
}
.avatardernier {
  width:60px;
  height:60px;
  border-radius:100%;
  position:relative;
  border:solid 2px #cca44d;
  overflow:hidden;
  float:left;
  margin-left:50px;
  margin-top:20px;
  animation: beat 2s infinite both;
}
.avatardernier img {
  width:100%;
  animation: beat 2s infinite both;
}
.titlesuj {
  margin-left:100px;
  padding:30px 20px 5px 20px;
  width:80%;
  text-align:left;
  border-bottom:#cca44d solid 1px;
}
.titlesuj a {
  color:#cca44d;
  font:15px times new roman;
  text-transform:uppercase;
  text-shadow:1px 1px 0px black;
  transition: all 800ms;
}
.titlesuj a:hover {
  transition: all 800ms;
  letter-spacing:0.5px;
}
.newmessage {
    text-align: center;
    width: 540px;
    margin: -65px auto 0px 44px;
}
.newmessage img {
  width:350px;
}
.lastpost {
    margin-left: 90px;
    color: #3e3e3e;
    font: 11px arial;
    text-shadow: 0px 1px 0px black;
    display: inline-block;
    width: 410px;
    text-align: center;
}
.lastpost br {
  display:none;
}
.lastpost a {
  text-transform:uppercase;
  color:#cca44d;
}
.lastpost b a {
  color:#3a839e;
}
.lastpost img {
  width:15px;
  padding-left:10px;
}
.desc {
    width: 359px;
    height: 160px;
    transition: linear 800ms;
    margin: -95px 0px 0px 550px;
    position: relative;
}
.sousforum {
    width: 329px;
    height: 130px;
    overflow: auto;
    transform: scale(0);
    outline: 1px solid #cca44d;
    outline-offset: -8px;
    background: rgba(0, 0, 0, 0.8);
    position: relative;
    transition: linear 800ms;
    font-size: 0px;
    padding: 15px;
}
.sousforum a {
  margin:2px;
  padding:4px;
  background:#000000;
  color:#cca44d;
  text-transform:uppercase;
  font:10px arial;
  line-height: 32px;
  display:inline-block;
  transition:all 800ms;
}
.sousforum a:hover {
  transition:all 800ms;
  outline:1px solid #3e3e3e;
  outline-offset:1px;
  background:#cca44d;
  color:black;
}
.desc:hover .sousforum {
  transition:linear 800ms;
  transform: scale(1);
}
.description {
    text-align: justify;
    color: #757575;
    text-transform: uppercase;
    font: 11px playfair display;
    padding: 10px;
    overflow: auto;
    width: 400px;
    height: 65px;
    margin-top: 30px;
    margin-left: 80px;
}
.description img {
    width: 358px;
    height: 160px;
    background: rgba(0, 0, 0, 0.8);
    transition: linear 800ms;
    outline: 1px solid #cca44d;
    outline-offset: -8px;
    position: absolute;
    margin-left: 426px;
    margin-top: -20px;
}

Icône "pas de nouveaux messages" :

Code:

https://www.zupimages.net/up/18/37/20zl.png

Icône "nouveaux messages" :

Code:

https://www.zupimages.net/up/18/37/gh7c.png

Icône "aller au dernier message" :

Code:

https://www.zupimages.net/up/18/37/0zpr.png

Attention, pour que cette catégorie ressemble au modèle, vous devez ajouter une image sur le champ au-dessus de la description dans votre panneau d'admnistration ! Une petite image de base :

Code:

https://zupimages.net/up/18/37/zz70.jpg