Conseils d'utilisation

Conseils Forumactif

Les couleurs ⎯ Puisque vous vous apprétez à personnaliser entièrement votre forum par le HTML/CSS, je vous conseil de laisser toutes les cases couleurs vides, comme ceci. Ca vous évitera les mauvaises surprises.

Les variables ⎯ Il y a deux types de variables : les variables dites d'affichage {VARIABLES} qui contiennent généralement qu'une donnée (exemple, une statistique : 5 messages) et les variables dites de bouclage
< !-- BEGIN --> qui répètent tout un élément (exemple : un message entier).
Attention, les variables de bouclage qui commencent par <!-- BEGIN... --> et finissent par <!-- END... --> tandis que les les commentaires HTML sont simplement écrit ainsi <!--  -->, généralement en français par mes soins. Si votre forum n'affiche plus correctement une liste de sujet ou un message, c'est probablement parce que la variable de bouclage est mal placée. Assurez-vous d'encadrer correctement vos éléments par ces variables si elles sont présentes. Dans le Blank Theme, les variables de bouclages sont commentées pour savoir à quoi elles correspondent.

Listes des variables ⎯ Si avez un doute sur ce que représente une variable, une admin de Forumactif (Etana) a listé une majorité des variables avec une description. Avec une simple recherche ctrl+F, vous devriez vous y retrouver.

ID de Forumactif ⎯ Vous retrouverez par moments des variables d'affichage dans un ID, de la sorte
<div id="{VARIABLE}">. C'est ce qui sert d'IDentification d'un élément HTML, généralement utilisé sur FA pour les messages. Les supprimer peut provoquer des erreurs de renvoi (accéder au dernier message posté, récupérer le lien d'un message spécifique, ...).

Overwrite ⎯ Forumactif possède son propre CSS de base qui a tendance à empêcher notre personnalisation, faute d'y avoir accès. Pour contourner ce problème, il n'est pas rare d'utiliser !important à la fin d'une déclaration CSS pour overwrite : forcer notre CSS au-dessus de celui de FA. Si FA impose un fond noir background: black, modifiez-le en faisant background: white!important

Conseils code

Personnaliser ⎯ Sauf indication contraire (dans le CSS), sentez-vous libre de faire ou refaire des .class qui correspondent mieux à votre future personnalisation.

Contourner l'attribut float ⎯ Vous rencontrerez certainement des éléments positionnés avec l'attribut float. Aussi pratique soit-il, il peut contraindre les éléments situés à la suite (et créer un effet cascade). Pour rompre l'effet, vous pouvez utiliser l'attribut clear: both sur les éléments situés à la suite.

Cibler une image ⎯ Pour cibler directement une image (généralement comprise dans une variable, comme les images des avatars) en CSS, il faut la sélectionner de la sorte : .conteneur img { }

Scripts modifiés ⎯ Attention aux scripts, ils ont été modifiés pour correspondre aux .class et ID créés pour le Blank Theme. Si vous changez le HTML, il se peut que les scripts cessent de fonctionner. N'oubliez donc pas de les adapter à vos modifications en suivant les explications fournis par leurs créateurs.

Structurer son forum ⎯ La structure de la version PhpBB3 n'est plus construite par le display <table> trop souvent utilisés à tort (car dépassé et contraignant). Phpbb3 utilise d'autres attributs, que je vous conseille : float, flex, grid qui offrent plus de possibilité et réduisent le nombre de lignes de code à écrire. Il existe des dizaines et des dizaines de tutoriels à leur propos pour les adopter facilement.

Inspecteur web ⎯ Utilisez l'inspecteur d'élément de votre navigateur (clique droit › inspecter), il vous donnera toutes les informations nécessaires pour comprendre des variables, voir le CSS de base de Forumactif ou repérer des bugs ou des erreurs.

Conseils maquette

Cette partie mériterait des explications bien plus développées, en attendant de vrais tutoriels, voici quelques points essentiels :  

Préparatifs ⎯ Pour réaliser un design cohérent, tant dans ses visuels que son accessibilité, prenez le temps de concevoir une maquette des principales pages de votre forum. C'est un travail supplémentaire, mais c'est un effort qui portera ses fruits au moment de passer à la réalisation technique.
Exemple, voir la maquette du Blank Theme.

Patterns ⎯ Certains éléments ou certaines parties du forum se répètent à plusieurs endroits. Repérez-les, ce sont des patterns que vous pourrez reproduire avec un simple copier/coller plutôt de devoir les coder un par un.

Résolutions ⎯ Pensez à tous les types d'écran ! Demandez à des proches ou bien utiliser des sites qui simulent différentes résolutions.