[Débutant] Personnalisation de la page d'accueil d'un forum.

Bonjour à tous !
Je vous propose aujourd'hui un tutoriel pour personnaliser la page d'accueil de votre forum, à savoir la barre de navigation, la cadre et les catégories. Je tiens à préciser que pour pouvoir réaliser ce tutoriel, vous devez obligatoirement avoir le statut d'administrateur sur le forum concerné, et donc avoir accès au panneau d'administration. Le forum doit aussi être en version PHPBB2.

I) Cadre du forum.
Le cadre du forum, c’est tout simplement ce qui entoure toute la partie « intérieure » du forum (les catégories, header, les sujets..). Dans le cas de Sims Artists, le cadre est simplement une bordure blanche, d’un pixel. Je vais vous montrer comment le personnaliser un peu plus, en ajoutant par exemple une ombre, l’épaissir, le doubler, ou même le mettre en pointillés.

Tout va se passer dans la feuille de CSS du forum (Panneau d’administration > Affichage > Couleurs > Feuille de CSS). Pour en savoir plus sur l’utilité de la feuille de CSS, je vous invite fortement à faire un petit tour sur le tutoriel de Fuyaya.

Bien, vous êtes dans votre fiche CSS. Et maintenant ? Et bien, vous allez commencer à créer un code ! En CSS, chaque partie du forum a un nom, que l’on utilise pour commencer le code. Le nom pour le cadre du forum est « .bodyline ». Lorsque vous créez des codes, vous devez obligatoirement les placer entre « { } » dans la fiche de CSS, sans quoi ils seront inutiles. Voilà donc comment commence votre code :

Code:

.bodyline {

}

Maintenant, il faut le remplir d’attributs, comme par exemple une bordure ou une ombre portée. Je vais vous faire pour exemple quelque chose qui ressemblera à ça :

Spoiler:

Je rajoute donc au cadre normal un peu d’épaisseur, je le change en pointillés et je lui ajoute une ombre noire. Voilà à quoi ressemblera le code :

Code:

.bodyline {
border: 3px dotted black;
box-shadow: 0px 0px 3px black;
}

/!\ N’oubliez pas qu’après chaque attribut, il faut ajouter un « ; » pour bien le séparer de tous les autres. Donc..
- l’attribut border correspond bien évidemment à la bordure, qui mesure en l’occurrence 3 pixels, dotted pour les pointillés et black pour la couleur. Pour faire une ligne en continue, la valeur ne sera pas « dotted » mais « solid ».
- l’attribut box-shadow sert à ajouter une ombre à la border, le premier 0px correspond au décalage de l’ombre vers la droite, le deuxième 0px au décalage vers le bas et le 3px correspond au degrés de flou de l’ombre. Donc si vous voulez une simple ombre derrière la bordure, sans aucun décalage, vous n’allez mettre plusieurs pixels qu’au dernier chiffre. Quand au black, c’est la couleur de l’ombre.

Il n’existe pas beaucoup d’autres attributs pour personnaliser le cadre d’un forum, donc je ne donne que cela.

II) Catégories du forum.
Les catégories sont les titres des parties du forum (Règlement et mode d’emplois du forum, Présentations, Absences, Espace Invités…). Pour Sims Artists, les catégories sont des écritures non personnalisées. Je vais vous apprendre les différents attributs qui sont à votre disposition pour embellir tout ça, comme par exemple une ombre au texte, une autre police, une autre couleur…

Comme pour le cadre, tout passe par la fiche de CSS, et c’est donc là-bas que vous devez vous rendre pour personnaliser vos catégories. Et comme tous les parties d’un forum, en CSS, les catégories ont aussi un nom, comme je l’ai dit plus haut ! Cette fois-ci, ce n’est pas « .bodyline », mais « .forumlink ».

Je vais vous montrer un code pour obtenir un résultat comme celui-ci :

Spoiler:

Je modifie donc la police, la couleur du texte et la taille. Je met plus d’espace entre chaque lettre, je rajoute une ombre de la même couleur que le texte et je met le texte en italique.

Code:

.forumlink {
font-family: times new roman;
font-size: 25px;
color: hotpink;
text-shadow: 0px 0px 3px hotpink;
letter-spacing: 2px;
font-style:italic;
}

Ca commence à faire un bon petit code ça ! Donc..
- font-family, pour changer la police du texte.
- font-size, pour changer la taille.
- color, pour changer bien évidemment la couleur.
- text-shadow, pour ajouter une ombre au texte.
- letter-spacing, pour mettre plus d’espace entre chaque lettre. Il est possible d’enlever de l’espace entre chaque lettre en mettant par exemple -2px au lieu de 2px.
- font-style, pour mettre le texte en italique. Pour le mettre en gras, la valeur ne sera pas « italic » mais « bold ».

Pour les catégories, ont peu ajouter beaucoup de choses encore, je me limite pour ne pas en mettre trop et que ça devienne donc trop chargé. Mais on peut mettre une marge (décaler le texte à gauche ou à droite), l’encadrer, le tourner légèrement, le faire clignoter etc…

III) Barre de navigation.
La barre de navigation, c’est-ce qui se trouve juste en dessous de la bannière du forum (Accueil, Déconnexion, Messagerie, Profil, Membres, Groupes…). Il est possible de la personnaliser aussi, en ajouter exactement les mêmes choses que les catégories, ou presque !

Cette fois-ci, le nom de la partie du forum est « .mainmenu », le code commencera donc par cela. Voici le rendu qu’aura chaque lien après avoir mis le code dans la fiche de CSS toujours :

Spoiler:

Je n’utilise pas les mêmes attributs que pour les catégories, mais je pourrais. :DJe change donc la police, la taille et la couleur aussi. Je met toutes les lettres en majuscules et je rajoute un soulignement d’une autre couleur que le lien.

Code:

.mainmenu {
font-family: fangsong;
font-size: 16px;
color: olive;
text-transform: uppercase;
border-bottom: 1px solid indianred;
}

- text-transform, pour mettre toutes les lettres en majuscules. J’ai utilisé « uppercase » pour les mettres en majuscules, et je peux utiliser « lowercase » pour toutes les mettre en minuscules.
- border-bottom, pour rajouter une bordure en bas. Je peux utiliser « border-left » pour la mettre à gauche, « border right » pour la mettre à droite et « border-top » pour la mettre en haut. Si je veux totalement encadrer le cadre, et au lieu de répéter quatre fois l’action, je vais mettre direction « border ».

Comme pour les catégories, au niveau de la barre de navigation, on peut ajouter encore beaucoup d’attributs, comme l’ombre portée, l’espace diminué ou agrandi entre les lettres, enfin, la plupart de ceux que j’ai cité, et même d’autres encore.

J'espère que ce tutoriel vous servira et qu'il est clair. :)Si quelque chose vous chagrine, n'hésitez pas à m'en faire part !

Bonne journée à tous !