[Astuce] Un codage différent pour les catégorie sur l'index ou dans un forum

[MävenRâleuse (Admin)]

Un codage différent pour les catégorie sur l'index ou dans un forum

Bonjour !

Mais de quoi parle ce titre à rallonge ???
Eh bien c'est simple, je vais t'expliquer comment tu peux avoir des catégories ayant un codage différent sur l'index, et dans un forum pour l'affichage des sous-forum. Des images sont souvent plus claires.

Quand on code nos catégories :

Ce qu'on voit sur l'index:

Ce qu'on voit quand on va dans un forum qui a des sous forums:

Oui mais parfois certains codages ne nous conviennent pas dans un forum. Il y a plusieurs possibilités :

> Garder le codage de base de la version :

Spoiler:

> Changer totalement de codage :

Spoiler:

Ici j'ai utilisé des libres service du forum, ce n'est pas accordé au niveau couleur, c'est simplement pour l'exemple


Ca t'intéresse ?? Alors c'est parti !

Les templates

Index_box

Tout ce qui concerne cette partie se trouve dans le template index_box entre les commentaires

Code:

<!-- BEGIN catrow -->

Code:

<!-- END catrow -->

Ici, on va faire comme si on codait normalement nos catégories, sauf qu'on va dupliquer le code. On aura deux fois ces commentaires :
> Une fois avec le code de l'index
> Une fois avec le code pour l'intérieur d'un forum

Par exemple pour les 2 LS utilisés :

le code pour l'index:

le code pour 'dans un forum':

Ces deux codes se suivent dans mon templates.
Je vais ajouter une div qui va entourer chacun de ces codes avec chacun leurs classes :
>categoriesIndex pour celui que je veux pour l'index
>categorieForum pour l'autre

Code:

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="categorieIndex">
 Le code des catégories sur l'index
</div>
<!-- END catrow -->
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->

<div class="categorieForum d-none">
 Le code des catégories dans un forum
</div>
<!-- END catrow -->

Ce qui donne au complet :

Spoiler:

On enregistre et on publie.

Nos catégories / forums sont dupliqués. Pas de panique !

Index_body

On va ajouter une classe qui nous précise qu'on est sur l'index. Pour cela on va aller ajouter cette div dans le template Index_body :

Code:

<div class="surIndex d-none">Je suis l'index</div>

Juste après

Code:

{JAVASCRIPT}

On enregistre et on publie

viewforum_body

Ici on va préciser qu'on est pas sur l'index. On va ajouter dans le template viewforum_body, juste avant

Code:

{BOARD_INDEX}

cette div :

Code:

<div class="dansForum d-none">Dans un forum</div>

On enregistre et on publie.

Maintenant, on va aller faire la CSS, pour mettre tout ça en page

Petite modification sur la CSS

Je pars du principe que la CSS est faite. J'ai bien sûr pris les codes CSS des LS pris
Mais ici on va la modifier un peu : on va bien cibler chacune de nos classes / id pour bien précisé sur qui on applique le style : dans la classe categorieIndex ou categorieForum. Un petit exemple :

Code:

.categorieIndex .milieu_cate  .d-flex{
  display:flex;
  width:100%;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-around;
}
.categorieIndex  .milieu_cate > .d-flex > * {

  flex: 1 1 49%;
}
.categorieIndex  .milieu_cate .titre_categorie{
  border:2px solid #000;
  width:99%;
  margin:4% auto auto;
  background:#3d7491;
}

et :

Code:

.categorieForum .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;
}
.categorieForum .cate{
  background:#b89e7b; /***  Couleur de fond des catégories ***/
  border:1px solid black;
  border-radius:50px;
}
.categorieForum .d-flex {
  display: flex;
  padding: 1% 0;
  align-items: center;
  justify-content: center;
  align-content: center;
  border-bottom:1px solid #3a2406;
}

.categorieForum .d-flex:last-child {
  border-bottom:none;
}

Ensuite, on ajoute notre classe d-none. Si tu as fait attention, tu verras que les div ajoutées pour savoir si on est sur l'index ou dans un forum, on a mit cette classe. Elle nous sert à cacher les div :

Code:

.d-none{
  display:none !important;
}

Et maintenant : un petit tour de magie. On va utiliser le sélecteur ~ pour cacher categorieIndex ou categorieForum.
Pour en savoir plus sur les sélecteur, [rendez-vous ici]

Code:

.surIndex ~ .categorieForum,
.dansForum ~ .categorieIndex{
  display:none;
}


Et le tour est joué !
Tu peux maintenant personnaliser ces 2 parties indépendamment, à condition que ta CSS soit bien ciblée

---

Si tu as la moindre question, n'hésite pas à la poser à la suite de ce message, nous viendrons y répondre