- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
[Toutes versions] Catégories simples avec liens de sous-forums en colonne
Dim 12 Mai 2019 - 14:18
Catégories simples avec liens de sous-forums en colonne
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, dont le nom est toujours flou
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
La structure de ton forum, quelque soit la version, doit être en "moyen" de la seconde ligne (PA > Affichage > Structure et hiérarchie)
Après tout ces prérequis et choses à savoir, on rentre dans le vif du sujet !
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 ya entre les 2 (oui oui, tout ) et remplace le par ceci :
On enregistre et on oublie pas de publier le template
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS :
La CSS est la même, il faut simplement rajouter ceci à la fin :
Les couleurs de texte et de liens sont les couleurs de ton forum : c'est à cet endroit que tu dois les choisir.
Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai
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, dont le nom est toujours flou
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
La structure de ton forum, quelque soit la version, doit être en "moyen" de la seconde ligne (PA > Affichage > Structure et hiérarchie)
Après tout ces prérequis et choses à savoir, on rentre dans le vif du sujet !
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 ya entre les 2 (oui oui, tout ) et remplace le par ceci :
- Code:
<!-- BEGIN tablehead -->
<div class="titre_cate">
{catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="forums">
<div class="image">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<div class="corps">
<div class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<br />
</div>
<div class="description">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
</div>
<div class="sous_forums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
<div class="derniers_messages">
<span class="gensmall">{catrow.forumrow.POSTS} Messages || {catrow.forumrow.TOPICS} sujets</span>
<br />
<!-- BEGIN avatar -->
<div class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
<!-- END avatar -->
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot -->
On enregistre et on oublie pas de publier le template
Partie CSS : attaquons la mise en page
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS :
Toutes versions
- Code:
/*************CATE***************/
*{
box-sizing:border-box;
}
.titre_cate{
margin:15px auto 8px;
text-align:center;
border:4px double #6B390D;
background:#E0AF5A;
}
.titre_cate h2{
font-size:22px;
font-variant:small-caps;
padding:10px;margin:0;
}
.forums{
display:flex;
box-sizing: border-box;
padding:8px;
margin:0.5% 0;
border: 4px double #6B390D;
min-height: 100px;
vertical-align: middle;
background:#E0AF5A;
}
.image {
width:5%;
border-right: 4px double #6B390D;
}
.corps {
width: 73%;
border-right: 4px double #6B390D;
padding:0 10px;
}
.corps .forumlink{
text-align:center;
width:100%;
font-variant:small-caps;
font-size:16px;
padding: 0;
margin: 0;
}
.description{
border:1px solid #6B390D;
height: 65px;
box-sizing: border-box;
padding:5px;
background:#FFCB70;
overflow:auto;
}
.sous_forums {
width: 10%;
text-align:center;
border-right: 4px double #6B390D;
font-size:0;
}
.sous_forums a{
display:block;
font-size:11px;
}
.sous_forums a:before{
content:'~ ';
font-size:11px;
}
.derniers_messages {
width: 12%;
text-align: center;
padding-left:6px;
}
.lastpost-avatar {
float: none;
width: 100%;
height: 40px;
overflow: hidden;
margin-top: 3px;
border: 1px solid black;
padding:0;
}
.lastpost-avatar img {
width: 100%;
margin-top: -40%;
height:auto;
}
AwesomeBB
La CSS est la même, il faut simplement rajouter ceci à la fin :
- Code:
.gensmall{
display:inline;
border:none;
}
Les couleurs de texte et de liens sont les couleurs de ton forum : c'est à cet endroit que tu dois les choisir.
Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai
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
|
|