Le deal à ne pas rater :
Le printemps de Comics 2021 : 10 albums à 5,99€
5.99 €
Voir le deal

KoalaVolant
KoalaVolant

Catégories n°4 Empty Catégories n°4

Ven 5 Mar 2021 - 23:38
Type : phpbb2
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à Wink Les typos sont Pacifico et Montserrat mais vous pouvez changer bien sûr <3

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}
Revenir en haut

Partenaires footer

Masqué RPG-Chevalier Altered Tokyo Les mythes d'YsarillRealm EnchantedAbstract Logo WyvArtem