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 ~
Remplacer l'intégralité de votre template index_box par le HTML :
Et le CSS :
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
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