
KoalaVolant
Ven 5 Mar 2021 - 23:38
Type : phpbb2
Si vous désirez un code de catégorie relativement simple, celui ci pourrait vous plaire !

N'oubliez pas qu'il faut remplacer le template index_box par ce qui suis :
Les couleurs sont définies par le "root". Donc si jamais vous pouvez modifier directement là
Les typos sont Pacifico et Montserrat mais vous pouvez changer bien sûr <3
Si vous désirez un code de catégorie relativement simple, celui ci pourrait vous plaire !

HTML
N'oubliez pas qu'il faut remplacer le template index_box par ce qui suis :
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center" class="lienspourmarg">
<tr >
<td valign="bottom">
<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 />
<!-- END switch_user_logged_in -->
</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">
<span class="btnbtn"><img class="btn-mess" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
<div class="tit-desc">
<!-- Titre du forum -->
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<!-- Description du forum -->
<div class="forum-desc">
{catrow.forumrow.FORUM_DESC}
</div>
<!-- Sous forum -->
<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' - ')).removeAttr('id');</script>
<div class="ssfo" id="subforums">
{catrow.forumrow.LINKS}
</div>
</div>
<div class="vavatar">
<!-- BEGIN avatar -->
<span class="cat-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
</div>
<div class="stat-mess">
<div class="nmbr-sm degr">
{catrow.forumrow.TOPICS} Sujets | {catrow.forumrow.POSTS} Posts
</div>
<div class="dern-mess">
{catrow.forumrow.LAST_POST}
</div>
</div>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot --><!-- END catrow -->
<!-- END tablefoot -->
CSS
Les couleurs sont définies par le "root". Donc si jamais vous pouvez modifier directement là

- Code:
/* Couleurs */
:root{
--white:#fff;
--grey1:#dedede;
--grey2:#555;
--grey3:#999;
--grey4:#EAEAEA;
--main-color:#547387;
--snd-no-color:#5F748F;
--snd-color:#847467;
--three-color:#EE7F30;
--four-color:#FDB508;
--four-color-c:#ACD9EC;
--four-color-cc:#9CA0AC;
--anim:#699464;
--maudits:#ff0012;
--faes:#bb0073;
--myth:#FF9900;
--astraux:#0CBFF3;
--mirac:#846E99;
--pnj:#000;
--red:#FF0000;
--green:#00FF00;
--orange:#FF9900;
--font1:'Pacifico', cursive;
--font2:'Montserrat', sans-serif;
--font3:Verdana;
--imagefond1:url('https://nsm09.casimages.com/img/2020/11/19//sbRFKb-fondfiche.jpg');
--imagefond2:url('https://nsm09.casimages.com/img/2020/11/19//ubRFKb-HeaderSansFond.jpg');
}
a { text-decoration: none !important; transform: all; transition: .5s;}
a:hover { text-decoration: none !important; transform: all; transition: .5s; }
/* Catégories */
.lienspourmarg{ margin:10px 0px; }
.forum-encart{ display:flex; width:800px; margin:10px 0px; align-items:center; }
.forum-encart *{ box-sizing:border-box; }
/* Titre Catégorie */
.cate-title{ padding:10px 0px; background-image:var(--imagefond2); background-size:100%; }
.cate-title h2{ font-size:25px; font-weight:normal; letter-spacing:2px; font-family:var(--font1); text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff;
color:var(--main-color); text-align:center; margin:0; }
/* Images no new */
.btn-mess{ width:70px; height:90px; padding:3px; border:1px solid var(--main-color); margin:10px; }
.btn-mess img{ width:70px; height:90px; object-fit:cover; }
.btnbtn{ width:70px; height:90px; }
/* Milieu */
.tit-desc{ padding:10px; width:465px; margin:0px 10px; }
.tit-desc .forumlink{ font-weight:normal; font-family:var(--font1); color:var(--snd-color); font-size:16px; line-height:18px; border-bottom:var(--snd-color) 1px solid; }
.tit-desc a.forumlink, .tit-desc a.forumlink:visited, .tit-desc a.forumlink:link{ color:var(--snd-color) !important; text-decoration:none !important; }
.tit-desc a.forumlink:hover{ color:var(--three-color) !important; }
.tit-desc .forumlink:hover{ border-color:var(--three-color); }
.forum-desc{ text-align:justify; margin: 10px 0px; padding:5px; font-size:12px; line-height:14px; width:465px; height:55px; overflow:auto; }
.forum-desc strong{ color:var(--snd-no-color); font-family:var(--font2); }
.ssfo a{ font-family:var(--font2); }
/* Avatars */
.vavatar, .vavatar img{ width:70px; height:90px; }
.vavatar{ background-color:var(--grey4); margin: 0 auto; display: flex; justify-content: center; margin-left: 16px; }
.vavatar img{ background-color:var(--grey4); object-fit:cover; padding:3px; border:1px solid var(--snd-color); }
/* Droite */
.stat-mess{ font-size: 12px; width: 145px; display: flex; justify-content: center; align-items: center; flex-wrap:wrap; margin: 0px 0px 0px 15px; }
.nmbr-sm{ width:100%; background-color:var(--snd-color); color:var(--white); text-transform:uppercase; font-size:9px; padding:5px; text-align:center; margin:5px 0px; }
.dern-mess span, .dern-mess{ text-align:center}
|
|