- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4053
[Toutes versions]Catégories arrondies - style disney
Ven 14 Juin 2019 - 11:47
Catégories arrondies - style disney
Bonjour à toi
Tu cherches une idée de codage pour les catégories de ton forum ? Je viens t'en proposer un modèle ici et je n'ai plus aucune idée de nom, j'ai donc demandé aux Tambouilleurs pour celui ci
Voilà un aperçu :
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
Après tout ces prérequis et choses à savoir, on rentre dans le vif du sujet !
Les codes ne sont pas commenté, n'hésite pas à demander si tu as un souci
Tout est personnalisable N'hésite pas si tu n'y arrives pas à me demander de l'aide
C'est la même chose sur toutes les versions : tout se passe dans le template qui s'appelle index_box (PA -> Affichage -> Template -> général)
Repère ces deux commentaires :
Supprime tout ce qu'il y a entre les 2 (oui oui, tout ) et remplace le par ceci :
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS :
Pour la version AwesomeBB, il faut rajouter cette CSS en plus :
Comme tu le vois, certaines polices sont personnalisées. Pour utiliser la même police, voilà le bout de code à ajouter en suivant ce tutoriel
Si tu te sers de ce code, merci de mettre un petit lien vers la tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )
Tu cherches une idée de codage pour les catégories de ton forum ? Je viens t'en proposer un modèle ici et je n'ai plus aucune idée de nom, j'ai donc demandé aux Tambouilleurs pour celui ci
Voilà un aperçu :
Compatible avec toutes les versions - moins adapté pour AwesomeBB
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
Après tout ces prérequis et choses à savoir, on rentre dans le vif du sujet !
Les codes ne sont pas commenté, n'hésite pas à demander si tu as un souci
Tout est personnalisable N'hésite pas si tu n'y arrives pas à me demander de l'aide
Partie HTML : modifions le template
C'est la même chose sur toutes les versions : tout se passe dans le template qui s'appelle index_box (PA -> Affichage -> Template -> général)
Repère ces deux commentaires :
- Code:
<!-- BEGIN catrow -->
- Code:
<!-- END catrow -->
Supprime tout ce qu'il y a entre les 2 (oui oui, tout ) et remplace le par ceci :
- Code:
<!-- BEGIN tablehead -->
<div class="titre_cate">
{catrow.tablehead.L_FORUM}
</div>
<div class="cate">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- BEGIN inc -->
<!-- END inc -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<!-- BEGIN inc -->
<!-- END inc -->
<div class="d-flex">
<div class="image_mess">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <br />
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</div>
<div class="forum">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> (<span class="gensmall">{catrow.forumrow.TOPICS} sujets ~ {catrow.forumrow.POSTS} messages</span>)<br />
</span>
</h{catrow.forumrow.LEVEL}>
<div class="description">
<p class="genmed">{catrow.forumrow.FORUM_DESC}</p>
</div>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- BEGIN inc -->
<!-- END inc -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->
Partie CSS : attaquons la mise en page
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS :
- Code:
/******CSS POUR LES CATEGORIES******/
.titre_cate h2{
text-align:center; /*** On centre le titre des catégories ***/
font-size:40px; /*** Taille du titre ***/
margin: 10px 0 0 !important;
font-family: 'Montez', cursive;
color:#3a2406;
line-height:43px;
}
.cate{
background:#b89e7b; /*** Couleur de fond des catégories ***/
border:1px solid black;
border-radius:50px;
}
.d-flex {
display: flex;
padding: 1% 0;
align-items: center;
justify-content: center;
align-content: center;
border-bottom:1px solid #3a2406;
}
.d-flex:last-child {
border-bottom:none;
}
.image_mess{ /*** paramétrage de l'image "no new, news, lock..."***/
text-align:center;
width:25%;
}
.forum{ /*** paramétrage de la largeur de la description et des liens de sous forum***/
width:74%;
}
.cate a{
font-weight:bold;
}
.hierarchy{
margin: 0 0 0 30px;
}
.forum .hierarchy a{
font-size:30px; /*** taille des titres de sous forum ***/
font-family: 'Montez', cursive;
color:#3a2406;
text-indent:20px;
}
.description{ /*** paramétrage de la description ***/
background:#a38965;
border:1px solid black;
padding:5px;
min-height:80px;
border-radius:30px;
}
.description p{ /*** paramétrage du contenu des descriptions***/
text-indent:15px;
margin:0;
padding:0 5px;
font-family:Verdana;
text-align:justify;
}
Petite variante pour AwesomeBB
Pour la version AwesomeBB, il faut rajouter cette CSS en plus :
- Code:
.gensmall{
display:inline;
border:none;
}
Ajout de la police personnalisée
Comme tu le vois, certaines polices sont personnalisées. Pour utiliser la même police, voilà le bout de code à ajouter en suivant ce tutoriel
- Code:
<link href="https://fonts.googleapis.com/css?family=Montez&display=swap" rel="stylesheet">
Si tu te sers de ce code, merci de mettre un petit lien vers la tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum