• Qu'est ce que ForumActif ?

ForumActif, anciennement ForuMotion, est un hébergeur de forum permettant la création de forum gratuits et performants, comportant la possibilité de créer un grand nombre de catégorie, de changer le design, de choisir des thèmes prédéfinis en grand nombre (sur le Site Hitskin), de réaliser des jeux de rôle via les feuilles de personnages et les profils personnalisés, mais également d'aller modifier la structure même du forum via les "templates". Les possibilités de personnalisations étant immenses, il est nécessaire de bien s'y retrouver pour modifier votre forum à volonter. Attention de ne pas faire de bêtises, suivez bien nos conseils.

• Premier degré de modification : la feuille CSS.

Le CSS est un langage de code au même titre que le xHTML. Les deux se complètent et vont l'un avec l'autre pour une utilisation optimale. Dans les forum ForumActif, vous avez la possibilité de créer une feuille CSS qui va pouvoir apporter un "style" à des éléments de votre forum.

"CSS" signifie "Cascade Style Sheet" ou en Français "Feuille de Style en Cascade". Son rôle est d'appliquer un effet de style (couleur, marge, cadre, police...) à un élément que vous aurez défini. Pour bien utiliser ces codes, je vous conseille d'aller lire quelques bases du codage dans "Le Cours" afin de vous familiatiser vers les termes employés.
Nous allons essayer de vous présenter les choses le plus simplement possible : le xHTML (ou HTML, l'ancien terme) est le langage de base sur internet, il permet d'afficher du texte, une image, un lien... Le xHTML c'est ça :

Si maintenant je veux appliquer une mise en forme sur le paragraphe "p" du début du code, je peux utiliser le css. Il faut pour cela que j'indique le style que je veux mettre sur le paragraphe. Il existe deux possibilités : la première consiste à intégrer les éléments du css directement dans le HTML sous la forme suivante :

Ce qui nous donne :

Ceci est toujours mon paragraphe mais modifié avec des éléments de css pour lui donner une couleur de fond, de police et une bordure-cadre.

Cette solution est bonne, dans le sens où elle est juste au niveau des normes, mais elle n'est pratique que si nous n'avez qu'un élément à modifier avec le style voulu, sans quoi il faudrait que pour chaque élément où vous souhaitez appliquer ce style vous réécriviez les indications CSS... C'est long... et inutile ! En effet, une "Feuille CSS" est là pour vous permettre de faire nettement plus simple. Voici comment cela fonctionne :

1) Attribuer un nom à l'élément que vous souhaitez modifier, directement dans le xHTML, afin que le CSS puisse l'identifier. Pour cela, il faut lui donner ce que l'on appelle une "class", ou une "id". Lequel choisir ? Et bien tout dépend de l'élément. On utilise "class" pour les éléments qui sont répétés souvent dans les pages, comme les images, ou comme ici les paragraphes, car il y en a partout. Au contraire, les "id" sont plutôt utilisés pour les gros blocs ou les éléments présents qu'une fois sur les pages, comme par exemple la bannière ou le bas de page.
Le nom ne doit comporter aucun caractère spécial !

Dans le cas présent, pour mon paragraphe cela donne :

2) Vous le constaterez, ce n'est pas le fait d'attribuer un nom à un élément qui va le faire changer, il faut ensuite utiliser la feuille CSS et indiquer ce que l'on souhaite modifier et comment. Le CSS se présente sous cette forme :

Détail :
.nom = le point signifie que l'on s'adresse à une class, s'il s'agissait d'une id nous aurions eu un # à la place. Le nom doit être indiqué strictement, sans erreur.
{...} = les accolades sont primordiales, elles encadrent les indications CSS.
le détail à modifier ainsi que la nature de la modification doivent être présentés sous cette forme absolument, le point virgule indique que la ligne de modification pour ce détail est terminée. En ce qui concerne le texte à mettre vous n'aurez pas d'autre choix que de l'apprendre... ou de faire des recherches sur internet.
Voici ce que je vais indiquer sur ma feuille CSS pour faire les modifications sur mon paragraphe :

Le contenu ressemble à celui de la première solution, mais sous une forme différente qui va me permettre de reproduire la mise en forme que les éléments que je veux, il suffit pour cela que j'attribue le nom "exemple" à l'élément sur lequel je veux l'appliquer : tout les éléments "exemple" auront cette mise en forme là !
Le résultat :

Voici mon paragraphe sur lequel s'applique la mise en forme de la feuille CSS !

• Appliquer ce système au forum.

Pour appliquer ce prinipe de CSS à votre forum vous avez plusieurs solutions, mais chacun s'appuie sur la "Feuille CSS" présente dans votre Panneau d'administration : onglet "Affichage" > Couleurs > onglet "Feuille de style CSS". Si vous n'avez encore jamais touché à cetet feuille, elle est vierge et ce par défaut sur tout les forum FA. Il s'agira pour nous de mettre toutes les données CSS à cet endroit là.

Ce n'est peut-être pas encore votre cas, mais le jour où vous aurez beaucoup de modifications faites avec du CSS sur votre forum et donc une feuille CSS à rallonge, vous aurez besoin de vous y retrouver... Pour cela, affichez des "titres" en regroupant vos données CSS par blocs. Par exemple un premier bloc pour le CSS de l'en-tête, un suivant pour la page d'accueil, un autre encore pour l'affichage des catégories... Le tout séparé donc par une ligne semblable à ceci :
/* Général */ Cela vous permettra de vous y retrouver plus facilement !

Avec le système de la Feuille CSS il vous faut nécessairement connaitre l'attribut de l'élément que vous voulez modifier, autrement le nom qui lui aura été donné, comme pour moi tout à l'heure avec mon paragraphe nommé "exemple". Une fois que vous connaissez ce nom, c'est très facile, il vous suffira de lui attribuer la forme, couleurs, marges souhaitées... encore faut-il pouvoir trouver ce fameux nom !
Pour cela, le staff de ForumActif a pensé à une chose VITALE : nous donner la Feuille de style CSS de base de notre forum, avec du coup tout les attributs nécessaires...ou presque ! Où est cette feuille ? En lien dans l'en-tête de votre page CSS vierge ! Cliquez dessus et vous verrez une looooongue feuille CSS (vous comprendrez alors l'intérêt de diviser ces mises en forme en différents blocs pour s'y retrouver... ^^). Elle vous paraitra être écrite en chinois au début, c'est normal, mais peu à peu vous verrez que vous parviendrez à lire et surtout à "voir" ce que donnent chaque ligne de code.

Basez-vous sur cette feuille pour vous amuser à modifier quelques trucs, des couleurs de fond, de texte... et progressivement vous parviendrez à prendre un réel plaisir à customiser votre espace de jeu ou de discussion :

Un exemple ?
a:link{ color: #cc3a47; } Voici le code permettant d'afficher vos liens d'une certaine couleur, il vous suffit de changer ce code-couleur (ici : #cc3a47) pour changer la couleur de vos liens.

Oui, c'est bien beau, mais comment peut-on savoir quel code couleur est celui de la couleur qu'on souhaite mettre ? Parce qu'avec Photoshop ou n'importe quel logiciel de retouche photo on a une palette de couleur avec les codes correspondant, mais si l'on ne possède pas de logiciel...on fait comment ?

Facile ! Vous pouvez trouver ce genre d'aide sur internet ! Rendez-vous sur le site Code-Couleur et vous aurez une palette exactement identique que sur photoshop, et le tour est joué : il vous suffit de sélectionner la couleur voulue, tester, recommencer, et tester encore... parce que c'est de cette manière que vous trouverez la teinte la plus harmonieuse à votre forum et au reste de votre design.

Un autre exemple peut-être ?
.bodylinewidth { width: 800px;} Ce morceau de code CSS applique une largeur fixe en "pixel" à l'ensemble de votre forum. Cela est bien pratique pour éviter que la largeur du forum ne se déforme avec certains design "fixe" qui doivent avoir une largeur qui n'est pas modifiée par les différentes résolutions d'écran de vos utilisateurs.

Il est important de savoir que VOTRE feuille de style CSS est prioritaire sur le CSS de base de ForumActif ! Ainsi, c'est bien vos modifications qui sont prises en compte, et ce même si dans le Panneau d'administration c'est une autre couleur qui a été attribuée aux liens.

Il peut arriver que votre CSS ne soit pas pris en compte, souvent parce que dans le CSS d'origine le style est noté comme "important" et donc prioritaire. Si malgré tout vous souhaitez que ce soit VOTRE mise en forme qui prime, présentez votre donnée de cette façon :
.bodylinewidth { width: 800px !important;} Ce "!important" donne un caractère prioritaire au style de la ligne sur laquelle il est appliqué.

• Osez vous aventurer dans les "Templates" !

• Sachez avant tout que ForumActif propose plusieurs types de "phpbb" de forum, il s'agit de structures différentes qui permettent plus ou moins de modiciations et avec des aspects quelques peu différents. Avec le CSS, on peut tous les modifiers... mais les Templates ne sont pas modifiables dans toutes les versions ! Seules les versions "pbpBB2" et "punBB" permettent leur modification librement. Dans les autres, il est possible de voir les Templates mais pas de les éditer.
• Autre information primordiale : vous devez être le fondateur du forum pour avoir accès aux Templates !

Les Templates se situent dans le Panneau d'administration : onglet Affichage. Je rappelle que si vous n'êtes "que" administrateur et non "fondateur" du forum vous ne pouvez pas y avoir accès, et d'ailleurs l'encadré des Templates ne sera même pas présent.
Mais que sont ces "Templates" finalement ? Et bien il s'agit d'une partie (quasi complète tout de même !) de l'ensemble de code permettant d'afficher votre forum ! Inutile de chercher, toute la partie programmation (PHP) n'y est pas, seuls les (x)HTML et CSS sont présents, ce qui laisse tout de même le champ libre à une personnalisation esthétique quasi illimitée.
Ces Templates sont présentés sous forme de "pages" portant un titre assez évocateur pour vous permettre de savoir ce que le code contenu à l'intérieur affiche sur votre forum. Dés lors, vous pouvez faire tout ce que vous voulez, y compris supprimer des morceaux de code... Attention donc, car vous pouvez facilement afficher d'énormes bug esthétique sur votre forum. Rassurez-vous cependant, rien n'est irréparable du moment que vous faites les choses avec un minimum de méthode. Vous pouvez d'ailleurs observer un lien vers le Template d'origine en bas de page de chaque Template. Un simple clic puis un copier coller et vous revenez avec l'apparence d'origine !

Voici cependant comment procéder pour modifier vos Templates sans risques pour votre forum et vous permettre de tenter beaucoup de changements sans angoisse :
• Travaillez avec les pages pas onglets dans votre navigateur de sorte d'avoir toujours un onglet ouvert avec le PA et vos templates, et un autre onglet avec le résultat donc le forum en lui-même. Cela vous évitera de galérer à retourner dans le PA si par exemple vous avez supprimé son lien... Si malgré tout cela vous arrive, mettez simplement "admin" après le premier slash de l'adresse de votre forum dans la barre d'adresse et vous y serez.
• Pour vous éviter de belles crises de nerf lorsque par un bug inopiné le Template revient à celui par défaut alors que vous approchiez du résultat voulu (oui ça arrive, surtout quand vous travaillez longtemps sur un template...) pensez à faire une copie du template modifié que vous mettez sur bloc note par exemple afin de pouvoir vous faire une sorte de "sauvegarde" !
• Si votre forum est déjà vivant et lancé, il n'est peut-être pas conseillé de tester directement les modifications sur lui... Dans ce cas, créez-vous un autre forum afin qu'il puisse être votre plate-forme de test !

Bon... Pas de panique, la modification des templates impressionne un peu la première fois, mais au final on s'y amuse bien. Commencez par des choses "simples", par suivre quelques "tuto" présents ici (ou ailleurs, après tout...) et peu à peu vous allez acquérir une certaine autonomie et de la confiance pour vous attaquer à toujours plus gros.

Vous pourrez, avec les templates, ajouter de nouveau blocs, de nouveaux textes, une nouvelle disposition... et chaque fois vous pourrez mettre VOS propres attributs (noms) avec lesquels il sera facile de faire une mise en forme dans la feuille CSS ! L'accès à ces templates démultiplie ainsi les possibilités de personnalisation de votre forum.

Bon courage à tous, et n'oubliez pas qu'une section d'Aide est présente sur le forum si jamais vous rencontrez des petits soucis dans vos mises en formes !

Consultez également le topic "Comprendre un Template" rédigé par Kazuya !