Sélectionner/personnaliser les catégories/forums individuellement. - Moyen - Lyxiae

[LyxiaeMdM Forum]

Tutoriel

Sélectionner et personnaliser les catégories et forums individuellement.
Moyen - Lyxiae

A quoi ça sert ?

Ce tutoriel est une reformulation et simplification de divers tutoriels que j'ai pu voir un peu partout, je n'ai évidemment rien inventé. Il existe plusieurs methodes complementaires pour personnaliser les forums et catégories individuellement en CSS, voici celle que j'utilise. L'exemple que je donne est sur modernBB mais c'est aussi applicable sur les autres versions. C'est simplement que les morceaux de templates donnés en exemple viennent de modernBB.

Tutoriel

Tout d'abord, il vous faut repérer dans le template index_box les parties suivantes :

Code:


    <!-- BEGIN tablehead -->
        <div class="forabg">
            <ul class="topiclist">
                <li class="header">
                    <dl class="icon">
                        <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                        <dd class="topics"><i class="ion-android-list" data-tooltip="{L_TOPICS}"></i></dd>
                        <dd class="posts"><i class="ion-android-chat" data-tooltip="{L_POSTS}"></i></dd>
                        <dd class="lastpost"><i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i></dd>
                    </dl>
                </li>
            </ul>
            <ul class="topiclist forums">
    <!-- END tablehead -->


Sur modernBB, cela se situe entre lignes 20 et 34 du template de base.

Tout au début, après le début de boucle

Code:

<!-- BEGIN tablehead -->

Placez une div comme ceci :

Code:

<div id="{catrow.tablehead.ID}">

Votre code ressemblera à ceci :

Code:


    <!-- BEGIN tablehead -->
<div id="{catrow.tablehead.ID}">
        <div class="forabg">
            <ul class="topiclist">
                <li class="header">
                    <dl class="icon">
                        <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                        <dd class="topics"><i class="ion-android-list" data-tooltip="{L_TOPICS}"></i></dd>
                        <dd class="posts"><i class="ion-android-chat" data-tooltip="{L_POSTS}"></i></dd>
                        <dd class="lastpost"><i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i></dd>
                    </dl>
                </li>
            </ul>
            <ul class="topiclist forums">
    <!-- END tablehead -->


Il faudra refermer cette div dans cette partie :

Code:

<!-- BEGIN tablefoot -->
                </ul>
        </div>
    <!-- END tablefoot →

Vous pouvez simplement l'ajouter à la fin, comme ceci :

Code:

<!-- BEGIN tablefoot -->
                </ul>
        </div>
</div>
    <!-- END tablefoot →

La variable que nous avons ajoutée en id du bloc qui contient toute la catégorie permet d'attribuer en valeur d'id au bloc le numéro de la catégorie. Par exemple, pour la première catégorie du forum aura comme id "c1".

Ainsi, il nous est possible de sélectionner en css la catégorie, il suffit d'utiliser l'id comme sélecteur.

Par exemple, si je souhaite mettre un fond rouge a la categorie, voilà le CSS que j'obtiendrai :

Code:

#c1 {
background-color:red;
}

Seule la catégorie c1 (la première catégorie chronologiquement créée sur le forum) aura un fond rouge tandis que les autres catégories auront leur couleur d'origine.

De même, en utilisant cette id, il est possible de personnaliser en CSS chaque forum et chaque bloc des forums individuellement, en utilisant les sélecteurs nth-child.

Par exemple, si je prends un code de base pour les forums :

Code:

<div class="forum-bloc">
<div class="forum-titre">contenu</div>
<div class="forum-description">contenu</div>
<div class="forum-bloc2">contenu</div>
</div>


Et que je souhaite personnaliser le bloc de description du troisième forum de la seconde catégorie pour lui donner un fond rouge, mon selectecteur ressemblera à cela :

Code:

#c2 .forum-bloc:nth-child(3) .forum-description {
background-color:red;
}

Pour connaître le numéro d'une catégorie, vous avez deux solutions. Vous pouvez utiliser l'inspecteur de votre navigateur et regarder l'ID attribuée au bloc de la catégorie, ou bien cliquer sur l'un des forums et, en regardant les liens du fil d'Ariane, cliquer sur le nom de la catégorie. Dans la barre d'adresse, le numéro de catégorie apparaîtra. Dans le cas de mon forum test, la fin de l'adresse se nomme "c1-votre-1ere-categorie", c1 est donc l'id de ma catégorie.

Voilà ! J'espère que tout est clair, n'hésitez pas si vous avez des questions ou que quelque chose ne semble pas clair. C'est mon premier tutoriel, vos retours seront précieux !