Le CSS est découpé entre plusieurs commentaires de ce genre :

Code:

/*- - - - - - - - - - - - - - - - - - - - NOM CATEGORIE NOM CATEGORIE NOM CATEGORIE - - - - - - - - - - - - - - - - - - - -*/

/*- - - - - SOUS-CATÉGORIE - - - - -*/

/*- - - - - SOUS-CATÉGORIE - - - - -*/

etc.

Ils sont énormes et tous formatés de la même manière, vous ne pouvez pas les manquer. Ces commentaires sépare donc le CSS en plusieurs parties : polices du forum, modification du CSS de base de forumactif, templates, etc. En voici la liste complète si vous voulez aller jeter un coup d'oeil :

Spoiler:

De plus, vous pouvez observer que les templates ont souvent des structures et/ou des noms de classes qui reviennent souvent. Par exemple :

Code:

<div class="online_profil no-extend simple dark right-align lowercase;">
  ...
</div>

Un bloc comporte très souvent une classe (généralement la première) qui est un peu son "nom". La classe respecte le format rôledansletemplate_nomdutemplate, ça peut vous donner une indication sur son rôle ou sa place. Par exemple ci-dessus le div a la classe online_profil : il fait partie du template des profils, et c'est le bloc qui affiche si le membre est connecté ou pas. Ce n'est pas nécessaire de le savoir mais vous pourrez sûrement fouiller par vous-même dans les codes plus librement.

Le reste des classes définit l'apparence ou le comportement du bloc : la classe simple définit des margin & padding, dark définit le fond & le box-sadow, right-align dit que le texte est centré à droite, etc.
Pour la liste complète, je vous renvoie à ce post.


Par contre si vous voulez modifier la structure même des templates, leur agencement, il est recommandé d'avoir de bonnes connaissances en CSS et HTML. Vous pouvez lire le sujet d'explications poussées pour vous repérer un peu.

Vous pourrez voir dans énormément d'endroits dans le CSS des déclarations semblables :

Code:

--machin: 200px;
--bidule: 400px;
--truc: #FFFFFF;
--jesaispas: 4px solid;

Ainsi que :

Code:

margin-left: var(--sm);
background: var(--h3);
color: var(--d3);
padding: var(--sm) var(--bg);

Voire même les deux en même temps :

Code:

--machin: var(--truc);
--bidule: var(--quelquechose);

Ce sont des variables. Les propriétés du premier code créent des variables, celles du deuxième code en utilisent. Vous aurez probablement compris à quoi ça sert : on déclare qu'une variable vaut tel nombre de pixels, vaut telle couleur, bref, vaut une certaine valeur, et on la réutilise après dans le code autant de fois que voulu. La valeur d'une variable peut être utilisée dans un élément et dans tous les éléments compris à l'intérieur. Elle peut contenir n'importe quoi comme valeur, y compris une autre variable (comme dans le 3e code).

Pour déclarer une variable on a donc :
--le-nom-avec-des-tirets-si-voulu: valeur.

Pour utiliser une variable dans une propriété, on a :
propriété: var(--nom-variable).

A quoi cela sert-il ? J'utilise principalement les variables pour définir toutes la palette de couleurs du forum, les marges utilisées partout dans le forum et certaines valeurs elles aussi générales, comme le style du box-shadow qu'on retrouve partout. Elles sont toutes reprises au tout début du CSS dans la partie "GLOBAL". Les variables perdues dans le reste du code sont utilisées localement, ne vous en préoccupez pas.



Cela s'avère extrêmement pratique durant les maintenances : il n'y a qu'à changer les variables de couleur en haut pour modifier l'ensemble du forum ! Bien évidemment il faut repasser derrière et s'assurer que tout tient en place, changer un appel de variable ou l'autre à l'occasion, mais dans l'ensemble ça permet d'avoir un tout cohérent et rapidement changé, sans devoir courir après chaque couleur dans l'entièreté du CSS.

Petit conseil : je n'ai testé ce trick que sur Chrome pour l'instant mais je pense que ça sera possible peu importe le navigateur. En tout cas, lors du changement de design, ouvrez une page avec beaucoup d'infos (typiquement la page d'accueil) et cliquez droit n'importe où > inspecter. Un encart s'ouvre à droite et vous pouvez aller chercher dans la liste des styles en bas le :root. Vous y trouverez les variables de couleur citées précédemment et vous pouvez cliquer sur le petit carré de couleur pour les modifier directement ! Ca vous permet de tester des possibilités de palettes allant avec votre nouvelle version et de ne pas devoir faire des allers-retours incessants avec le CSS, je trouve ça super pratique personnellement. Attention que cela ne change pas les couleurs véritables du forum en temps direct, une fois que vous serez satisfait.e du résultat il faudra c/c les variables modifiées dans la feuille de CSS véritable de votre forum. Mais au moins comme ça vous n'aurez qu'à le faire une fois