- 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 arrondies et ombragées
Jeu 9 Mai 2019 - 15:18
Catégories arrondies et ombragées
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.
Bon, l'image ne va pas du tout ici, mais c'est la taille qui compte, pas l'aspect pour ce rendu
Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
Regarde bien si tu prends ce qu'il faut pour la version de ton forum. Il y a quelques adaptations à faire.
Partie HTML : modifions le template
Ici, 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="categorie">
<div class="titre_categorie">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="forum">
<div class="forum_gauche">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<div class="forum_millieu">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
<div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
<span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</div>
<div class="forum_droite">
<!-- BEGIN avatar -->
<div class="avatar"><span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span></div>
<!-- END avatar -->
<div ><span class="gensmall">{catrow.forumrow.LAST_POST}</span><br />
<span class="gensmall">{catrow.forumrow.POSTS} messages</span> | <span class="gensmall">{catrow.forumrow.TOPICS} sujets</span>
</div>
</div>
</div>
<!-- END forumrow --><!-- BEGIN tablefoot -->
<br />
</div>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
Partie CSS : attaquons la mise en page
C'est là qu'on va avoir quelques changements selon la version.
Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS qui convient à ta version :
PhpBB2 - PhpBB3 - PunBB et Invision
- Code:
/**************************CATEGORIES***********************************/
.categorie{
width:96%;
margin:auto;
background:#2d1b1b;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
box-shadow: 2px 2px 12px #000;
}
.titre_categorie h2{
width:100%;
font-size:26px;
line-height:60px;
text-align:center;
font-weight:normal;
text-shadow: 1px 1px 22px #B8B1B1;
}
.forum{
width:90%;
margin:10px auto;
display:flex;
background:#5b2626;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
box-shadow: 2px 2px 12px #4a3434;
}
.forum_gauche, .forum_millieu, .forum_droite{
padding:5px;
}
.forum_gauche{
width:13%;
padding-left:50px;
}
.forum_millieu{
width:55%;
}
.forum_droite{
width:25%;
text-align:center;
}
.forumlink{
font-size:16px;
}
.description{
width:100%;
text-align:justify;
text-indent:15px;
margin:5px;
min-height:70px;
}
.avatar{
width:100%;
margin:auto;
text-align:center;
height: 30px;
background:transparent !important;
overflow:hidden;
border:none;
}
.lastpost-avatar{
margin:auto;
text-align:center;
float:none;
display:flex;
padding:0 !important;
}
.categorie .lastpost-avatar img {
width: 100%;
height:100%;
box-shadow: 2px 2px 12px #000;
margin:-30% auto auto;
}
ModernBB
- Code:
/**************************CATEGORIES***********************************/
.categorie{
width:96%;
margin:auto;
background:#2d1b1b;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
box-shadow: 2px 2px 12px #000;
}
.titre_categorie h2{
width:100%;
font-size:26px;
line-height:60px;
text-align:center;
font-weight:normal;
text-shadow: 1px 1px 22px #B8B1B1;
}
.forum{
width:90%;
margin:10px auto;
display:flex;
background:#5b2626;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
box-shadow: 2px 2px 12px #4a3434;
}
.forum_gauche, .forum_millieu, .forum_droite{
padding:5px;
}
.forum_gauche{
width:13%;
padding-left:50px;
}
.forum_millieu{
width:55%;
}
.forum_droite{
width:25%;
text-align:center;
}
.forumlink{
font-size:16px;
}
.description{
width:100%;
text-align:justify;
text-indent:15px;
margin:5px;
min-height:70px;
}
.avatar{
width:100%;
margin:auto;
text-align:center;
height: 30px;
background:transparent !important;
overflow:hidden;
border:none;
border-radius: 0px;
box-shadow: none;
}
.lastpost-avatar{
margin:auto;
text-align:center;
float:none;
display:flex;
padding:0 !important;
}
.lastpost-avatar:after{
content:none;
}
.categorie .lastpost-avatar img {
width: 100%;
height:100%;
box-shadow: 2px 2px 12px #000;
margin:-30% auto auto;
}
AwesomeBB
- Code:
/**************************CATEGORIES***********************************/
.categorie{
width:96%;
margin:auto;
background:#2d1b1b;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
box-shadow: 2px 2px 12px #000;
}
.titre_categorie h2{
width:100%;
font-size:26px;
line-height:60px;
text-align:center;
font-weight:normal;
text-shadow: 1px 1px 22px #B8B1B1;
}
.forum{
width:90%;
margin:10px auto;
display:flex;
background:#5b2626;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
box-shadow: 2px 2px 12px #4a3434;
}
.forum_gauche, .forum_millieu, .forum_droite{
padding:5px;
}
.forum_gauche{
width:13%;
padding-left:50px;
}
.forum_millieu{
width:55%;
}
.forum_droite{
width:25%;
text-align:center;
}
.forumlink{
font-size:16px;
}
.description{
width:100%;
text-align:justify;
text-indent:15px;
margin:5px;
min-height:70px;
}
.avatar{
width:100%;
margin:auto;
text-align:center;
height: 30px;
background:transparent !important;
overflow:hidden;
border:none;
}
.lastpost-avatar{
margin:auto;
text-align:center;
float:none;
display:flex;
padding:0 !important;
}
.categorie .lastpost-avatar img {
width: 100%;
height:100%;
box-shadow: 2px 2px 12px #000;
margin:-30% auto auto;
}
.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
|
|