La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Très peu présente en ce moment Sad
----
Idea Viens papoter avec nous sur le discord

Messages : 4053
https://tambouille-raleuses.forumactif.com/

[Toutes versions]Catégories arrondies - style disney Empty [Toutes versions]Catégories arrondies - style disney

Ven 14 Juin 2019 - 11:47

Catégories arrondies - style disney

Bonjour à toi Smile

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 Smile
Voilà un aperçu :
[Toutes versions]Catégories arrondies - style disney Catzog13

Idea Compatible avec toutes les versions - moins adapté pour AwesomeBB Idea


Idea Tu dois avoir accès aux templates
Idea 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 !
Question Les codes ne sont pas commenté, n'hésite pas à demander si tu as un souci
Question Tout est personnalisable Wink N'hésite pas si tu n'y arrives pas à me demander de l'aide Smile

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 -->
et
Code:
<!-- END catrow -->

Supprime tout ce qu'il y a entre les 2 (oui oui, tout Smile ) 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 -->
On enregistre et on oublie pas de publier le template Smile

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 Smile
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 : )

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses