Tips & Tricks

Within the templates you will find two types of variables: display variables {VARIABLES} , which usually contain a single data point (eg. statistics: 5 posts), as well as loop variables <!--BEGIN--> , which repeat a whole element (eg. a post). Take note: loop variables start with <!--BEGIN...--> and end with <!-- END... --> , and HTML comments are simply contained within <!--  --> brackets. Most of the time, they're comments I've added to the code.
If your forum does not display a topic list or a post as it should, it's probably because the loop variable is misplaced. Make sure to place your elements within these brackets if they appear in the code.

In the Blank Theme, the loop variables are annotated so you know what they do.

If you have a doubt about what a variable does, a Forumactif administrator, Etana, has compiled a list of most variables with a description (in French). With a Ctrl+F search, you should find what you need.

You will sometimes see display variables in an ID, like such: <div id="{VARIABLE}">. It's what IDentifies an HTML element. They're usually used on Forumactif for posts. Deleting them can cause errors (access the last post, retrieve a post's direct link...).

Newer versions of Forumactif (phpBB3, ModernBB...) don't use the often misused <table> display to build their structures. This display type is obsolete and restrictive. These versions use other attributes, that I also recommend: float, flex, et grid. They offer more possibilities and reduce the length of the code. A lot of tutorials are available online to make the best of these attributes.

Use your browser's Inspect Element feature (right click › Inspect). It will give you all the info you need to understand variables, view Forumactif's basic CSS, or pinpoint bugs or errors.

Pay attention to scripts: they were modified to match .class and ID attributes created for the Blank Theme. If you modify the HTML code, it may corrupt the scripts and prevent them from working properly. Don't forget to adapt them do your changes by following the steps in the original tutorial.

Unless otherwise indicated (in the CSS), feel free to create or modify .class that work better with your future customisation.

To target an image directly (usually set in a variable, like avatars) with CSS, you must express it like such: .conteneur img { }

You will certainly see elements positioned with the floatattribute. As useful as it may be, it can restrict the placement of the elements that follow and create a cascading effect. To break it, you can use the clear: both attribute on elements that follow it.

This parts deserves much more detailed information, but in the meantime, here are a few essential points:

To create a harmonious, aesthetic and accessible design, take some time to draw up a design model for your forum's main pages. It's extra work, but it's not wasted effort: all of the time you spend doing a model is time saved when comes the time to code.
Check out the Blank Theme design model as an example.

Some elements or parts of your forum repeat themselves in different places. Spot them! These patterns can be reproduced by a quick copy-and-paste instead of coding the same thing twice or more.
Exemples : navigation's chain (category > forum > sub-forum), paginations , buttons...

Think about all screen sizes! Ask friends if your design works well on their screen or use websites that simulate different resolutions..