Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de catégories avec un style plutôt steampunk ^-^
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.
Un aperçu en image:
- Spoiler:
Optimisé pour tous les navigateurs - Version PHPBB2
Installer vos nouvelles catégories:
Pour commencer l'installation de nos nouvelles catégories, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > Index_box et remplacer le code d'origine par le suivant.
- Code:
<div class="catLiens">
<!-- BEGIN switch_user_logged_in -->
<a href="{U_SEARCH_NEW}">{L_SEARCH_NEW} - </a>
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF} - </a>
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie">
{catrow.tablehead.L_FORUM}
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="catCentre">
<div class="inline catGauche">
<div class="catStats">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</div>
<div class="inline catLast">
<img class="newOldLock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
{catrow.forumrow.LAST_POST}
</div>
<div class="inline catAvatar">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="inline sousForums">{catrow.forumrow.LINKS}</div>
</div>
<div class="inline catDroite">
<a class="catTitreForum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="catDescrip">{catrow.forumrow.FORUM_DESC}</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<img src="http://zupimages.net/up/17/13/mt9t.png" />
</div><!-- END tablefoot --><!-- END catrow -->
Une fois cela fait, enregistrez et validez votre template.
Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
- Code:
/* Catégories réalisées par Cheshire Cat */
.catLiens{
text-align:center;
}
.categorie{
width:800px;
margin:0 auto;
font-family:calibri;
font-size:12px;
}
.inline{
display:inline-block;
vertical-align:top;
}
.categorie h2{
margin:20px 0 0;
padding:30px 0;
box-sizing:border-box;
background-image:url('http://zupimages.net/up/17/13/mt9t.png');
font-size:30px;
font-weight:normal;
text-align:center;
color: #523e32;
text-shadow: 0 0 3px #55493f;
}
.catCentre{
padding:0 20px 40px 20px;
background:#21130d;
}
.categorie h2 + .catCentre{
padding-top:40px;
}
.catGauche{
width:400px;
background-color:#a9a08b;
margin-right:10px;
padding:10px;
box-sizing:border-box;
}
.catStats{
color:#654f3f;
font-size:15px;
margin-bottom:3px;
text-transform:uppercase;
letter-spacing:1px;
}
.catLast{
width:130px;
height:120px;
padding:5px;
box-sizing:border-box;
background-color:#ccc6b8;
text-align:center;
line-height:20px;
overflow:auto;
}
.catAvatar{
width:80px;
height:120px;
margin:0 10px;
overflow:hidden;
background-color:#ccc6b8;
}
.catAvatar img{
width:100%;
}
.sousForums{
width:150px;
height:120px;
background-color:#ccc6b8;
font-size:0;
overflow: auto;
}
.sousForums a{
display:block;
background:#fff;
font-size:12px;
text-align:center;
margin-bottom:5px;
}
.catDroite{
width:350px;
background-color:#a9a08b;
padding:10px;
box-sizing:border-box;
}
.catTitreForum {
font-size:15px;
text-transform:uppercase;
letter-spacing:1px;
}
.catDescrip{
height:120px;
background-color:#ccc6b8;
margin-top:5px;
padding:10px;
overflow:auto;
text-align:justify;
box-sizing:border-box;
}
N'hésitez pas à poster un petit message, ça fait toujours plaisir !
