Le Deal du moment : -39%
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
Voir le deal
399 €

    tuto catééé

    swirly
    Messages : 5
    Date d'inscription : 20/07/2018
    Localisation : test
    swirly
    Pour l'avatar du dernier posteur, ils doivent obligatoirement être en 200x400px !

    Avant tout, il vous faudra mettre des images sur vos catégories pour que ce soit joli. Si, si, sinon cay tout moche et on dirait que ça beug  
    Du coup, en voilà une de base, à vous ensuite de vous amuser ~

    Code:
    https://imgur.com/vi438DD.png

    Remplacer l'intégralité de votre template index_box par le HTML :

    Code:
    <div class="autourcate">
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
     <div style="text-align:center;"><img src="https://imgur.com/6MiJlYc.png"/></div>
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>

    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
    <div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>

    <div class="mdlCAT">
      <div class="lastmsg"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /></div>
      <div class="blokg">
        <div class="lastpost"><span>{catrow.forumrow.LAST_POST}</span></div>
        <div class="descFRM">{catrow.forumrow.FORUM_DESC}</div>
      </div>
      
      <div class="blokg">
        <div class="statsFRM">
          <div>{catrow.forumrow.TOPICS} <span>sujets</span></div>
          <div>{catrow.forumrow.POSTS} <span>messages</span></div>
    </div>
      <div class="sousFRM">
    <div class="linksFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    <div class="fondFRM" style="border-color:#000;"></div>
    </div></div>
      
      <div class="ava-dernier">
      <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
      </div></div>

    <!-- END forumrow -->
    <!-- END catrow -->
      
    </div>

    <div style="text-align:center;"><img src="https://imgur.com/6MiJlYc.png"/></div>


    Et le CSS :

    Code:
    .statsFRM {
       background: #363232;
       padding: 5px;
       position: absolute;
       right: -10px;
       text-align: center;
       top: 132px;
       width: 128px;
    }
    .statsFRM > div {
       color: #a60a0a;
       display: inline-block;
       font-family: Raleway;
       font-size: 30px;
       font-weight: 700;
       margin: 5px;
       text-align: center;
       width: 40px;
    }
    .statsFRM > div span {
       color: #000;
       font-size: 11px;
       font-weight: bold;
    }
    .autourcate {
     width:880px;
     margin:0 auto;
    }
     .tleCAT {
       background-image:url('https://imgur.com/tolAofW.png');
       padding:30px;
     }
    .tleCAT h2 {
       border-bottom: solid 2px #a50b0b;
       color: #fff;
       font-family: Raleway;
       font-size: 20px;
       text-align: right;
       font-style: italic;
       text-transform: uppercase;
    }
     .titreFRM {
       padding:20px;
     }
    .titreFRM a {
       color: #fff;
       font-family: Raleway;
       font-size: 15px;
       font-style: italic;
       font-variant: normal;
       letter-spacing: 1px;
       margin-left: 150px;
       text-decoration: none;
       text-transform: uppercase;
    }
     .mdlCAT {
       padding:5px;
       margin:0 auto;
       width:800px;
       transform:translateY(-20px);
     }
    .lastmsg {
       height: 200px;
       position: absolute;
       width: 170px;
       z-index:9;
    }
    .blokg {
       display: inline-block;
       left: 130px;
       position: relative;
       vertical-align: top;
       width: 250px;
    }
    .lastpost {
       background: #363232;
       border-bottom: 1px solid #a60a0a;
       color: #a60a0a;
       font-family: Roboto;
       font-size: 12px;
       font-style: normal;
       font-variant: normal;
       font-weight: normal;
       height: 40px;
       padding: 10px;
       text-align: center;
       width: 230px;
    }
     .lastpost span {
       padding:0px;
     }
     .lastpost a {
       color:#141113;
       text-transform:uppercase;
       font-style:italic;
     }
     .lastpost strong {
       color:white;
       text-transform:uppercase;
     font-family:Raleway;
       font-style:italic;
       font-size:14px;
     }
    .descFRM {
       background: #363232;
       color: #fff;
       font-family: calibri;
       font-size: 12px;
       font-style: normal;
       font-variant: normal;
       font-weight: normal;
       height: 99px;
       overflow: auto;
       padding: 20px;
       text-align: justify;
    }
    .descFRM img {
       height: 200px;
       position: absolute;
       width: 250px;
       margin-top: -81px;
       margin-left: 240px;
     filter: grayscale(80%);
    }
    .sousFRM {
       height: 200px;
       margin: auto;
       overflow: hidden;
       position: relative;
       width: 260px;
       margin-left: 10px;
    }
    .sousFRM .linksFRM {
       box-sizing: border-box;
       font-size: 0;
       background: rgba(0, 0, 0, 0.8);
       height: 180px;
       left: -500px;
       margin-left: -40px;
       margin-top: -40px;
       overflow: auto;
       padding: 10px;
       position: absolute;
       text-align: justify;
       top: 50px;
       transition: all 1s;
       width: 232px;
       z-index: 9;
    }
    .sousFRM:hover .linksFRM {
     position:absolute;
    top:50px;
    left:50px;
    }
    .sousFRM .fondFRM {
    position:absolute;
    top:5px;
    left:5px;
    width:240px;
    height:190px;
    border:1px solid #000;
    opacity:0;
    transform: scale(0.5);
    transition: all 1s;
    }
    .sousFRM:hover .fondFRM {
    opacity:1;
    transform: scale(1);
    }
    .sousFRM .linksFRM a {
       background: #a60a0a;
       color: #282424;
       display: block;
       font-weight: 500;
       font-family: Raleway;
       font-size: 12px;
       font-style: italic;
       margin: 3px;
       overflow: auto;
       padding: 6px;
       text-align: center;
       text-transform: uppercase;
       transition: all 800ms;
       width: 196px;
    }
    .sousFRM .linksFRM a:hover {
     transition:all 800ms;
     color:white;
     background:#282424;
    }
    .ava-dernier {
       border: 5px solid #a60a0a;
       display: inline-block;
       height: 190px;
       overflow: hidden;
       width: 50px;
       margin-left: 149px;
       background: #363232;
    }
     .ava-dernier img {
       width:190%;
     filter:grayscale(80%);
     }

    Il vous faudra bien sûr rajouter une image sur chaque catégorie qui fait 250x200px ! Les sous forums sont en hover au passage de la souris également