Index cursus codage
Index cursus graphisme

Etape 4 : mise en forme des catégories et création des icônes

Prêts pour la suite ? Allons-y ! Nous allons nous occuper des catégories en essayant de faire à la fois simple mais propre et agréable à regarder. Je ne vais pas apporter ici de codes ultra-mega-mortels, des trucs qui bougent s'ouvrent, tournent etc... Si vous souhaitez faire, par exemple, un affichage des forum en deux colonnes, le tutoriel se trouve sur le forum, je vous laisserais donc le loisir d'adapter d'autres astuces ou tutoriels à celui-ci pour le personnaliser comme vous le voulez.

1) Tout d'abord, vous pouvez voir sur le dernier screen réalisé que les tables (tableaux, donc les catégories) sont aussi larges que la bannière, et donc touchent de part et d'autres le bord du corps du forum. Je pourrais le laisser ainsi, ce ne serait pas choquant et il serait possible de trouver une esthétique agréable avec cette largeur. Cependant, ma préférence va pour des tables légèrement plus étroites que le corps, pour avoir une petite marge entre les bords. Du coup, voici le code qui permet, dans un premier temps, de réduire un peu cette taille :

Pourquoi mettre des pourcentage au lieu des pixels ? Tout simplement parce que les tables sont partout sur le forum, y compris dans le profil par exemple, or s'il est en deux colonnes, il ne faut pas qu'il fasse 800px de large, mieux vaut indiquer un pourcentage en fonction du contenant.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

2) Tout dépend du thème de base que vous aviez avant, mais dans mon cas j'ai des images sous les titres de catégories, et il faut que je les enlève Cela se fait tout simplement dans la gestion des images du PA.

3) Pour mettre en forme les catégories de manière simple, pour ceux qui ne voudraient pas trop s'aventurer dans les templates, voici comment procéder avec uniquement le css :

4) L'avantage est que c'est simple et discret. Vous pouvez pour agrémenter mettre une image de fond en haut ou en bas de chaque catégorie, comme par exemple un dégradé, ou une texture, ou bien un élément de décors (des nuages...) mais cela doit être discret, n'hésitez pas à baisser l'opacité si besoin.
Sachez que même si vous voulez modifier l'apparence des catégories via les templates, comme nous allons le faire ci-après, le forumline doit être mis en forme, car il est utilisé partout sur le forum (par exemple dans le cadre de recherche, le profil, les indications sous les messages, options de messages, etc...).

5) Pour la modification des catégories, je vais directement vous donner le template modifié directement ainsi que le css qui s'y applique. Je vous laisse regarder librement les codes si vous êtes curieux.

Le Template index_box dans son entier

Le morceau de CSS appliqué aux catégories

es descriptions des catégories

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

6) Désolé si c'est un peu rapide, mais je pense que ça vous laisse pas mal de possibilités en personnalisation tout de même.
Vous pouvez constater d'une part que les images des descriptions doivent avoir le "class="illu"" afin d'être mise en forme. D'autre part, le titre des catégories est un peu petit... Or, pour le mettre en forme, le css ne suffit pas, il faut intervenir directement dans chaque titre. Pour cela vous avez deux solutions
- mettre une "class" à chaque titre (la même class) et mettre en forme le titre dans le css ensuite
- créer une image pour chaque catégories et mettre l'image à la place du texte dans les titres.
C'est cette seconde solution que j'ai choisie, elle permet plus d'effets.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

Attention ! Un "détail" important concernant ces images : elles apparaissent aussi à l'intérieur du forum ! Et là... aie aie aie ! Ca déforme tout ! En effet, allez donc voir dans l'intérieur du forum (cliquez sur l'un des forum), l'image apparait dans la petite navigation qui est juste au dessus du cadre du forum... Alors si votre image est pas trop large comme la mienne ça va, mais sinon... et bien il faut la réduire ! Voici le code qui permet cela :

Vous pouvez bien sur adapter la taille en fonction de vos besoins !

7) Et voici pour l'image des titres de catégorie ! A présent il reste à faire les icônes de nouveaux messages pour que ce soit terminé en ce qui concerne les catégories. Pour cela, je vous laisse faire, sachez simplement que pour éviter de vous embêter mais avoir un résultat esthétique, vous pouvez simplement réutiliser la bannière et ses effets. Choisissez un élément de la bannière différent pour les trois icônes. Voici les miens pour exemple :

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

Etape 5 : élaboration du QEEL et du footer

1) Nous allons mettre en forme le QEEL ("Qui est en ligne ?") de manière assez sobre, simplement de façon à ce qu'il se fonde dans le reste de la page. Pour cela, il faut aller dans le template "Page d'accueil". Le contenu de votre QEEL se situe entre les codes suivants :

2) L'idée est donc de supprimer le contenu présent entre ces deux codes et de le remplacer par celui-ci :

Le premier bloc nommé "qeel_titre" va contenir l'image de votre en-tête de QEEL qui peut être plus ou moins élaborée.
La première partie contient les groupes, disposés en colonne. Le "#" remplace l'adresse du groupe. Pour avoir cette adresse, créez vos groupes et allez dans "groupes" (de la barre de navigation) puis affichez les informations sur le groupe choisis. Prenez alors l'adresse qui se situe dans la barre de navigation de votre navigateur.

2) Voici à présent le CSS utilisé pour mettre en forme ce QEEL.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

Comment puis-je faire pour enlever ou ajouter un groupe ? Ou même pour modifier leur contenu ?
Voici ci-dessous la marche à suivre pour cela.

3) Pour modifier le nom du groupe, renommez simplement le texte "groupe 1" etc... directement dans le template. De même, pour écrire la description du groupe, vous devez aller directement dans le template l'inscrire à la place du texte "Texte de description du groupe survolé".

4) Pour modifier la couleur du mot, il faut que vous alliez déjà mettre la couleur à votre groupe dans le panneau d'admin. Vous aurez là le code couleur correspondant à la couleur utilisée. Prenez ce code, et allez modifier le css. Par exemple, pour changer la couleur du groupe 1 c'est ici :

5) Retirer un ou plusieurs groupes c'est très simple. Commencez par aller dans le template. La ligne correspondant à un seul groupe se présente ainsi :

Supprimez donc simplement les lignes de groupe que vous ne voulez pas. Le css, même s'il est toujours là, n'affichera rien. Par contre, si vous voulez aussi enlever le css de ces groupes là vous pouvez, il suffit d'enlever ce qui se rapporte aux noms des groupes supprimés pour ne laisser que les infos des groupes maintenus.

6) Pour ajouter un groupe, dupliquez l'une des lignes de groupe (comme celle mise ci-dessus), puis collez là à la suite. Modifiez votre nom de groupe, et mettez dans le nom du groupe se trouvant entre guillemet "groupe6". Dans le css, vous devez alors ajouter "groupe6" ici comme fait dans l'exemple qui suit :

Vous devez également ajouter sa couleur en dessous en écrivant tout ceci dans le css :

Mettez bien sûr le code couleur qui vous convient.

Pour finir, afin que la description apparaissent au survol, vous devez ajouter "groupe6" à ce css là, comme fait ci-dessous :

Le contenu de CSS ne change pas, il faut simplement ajoute le ".groupe6:hover .groupe_contenu" dans la première ligne.

7) Pour terminer, ajoutons un footer, simplement avec le code CSS.

Il est évident que vous devez adapter ce footer. Mettez l'adresse de l'image choisie ou faite, attention car elle doit être de même largeur que la bannière et le forum ! Donc dans mon cas 950px ! Adaptez également la hauteur en mettant celle de votre image.

Il est OBLIGATOIRE de laisser les liens contenus dans le footer. Il s'agit du copyright ForumActif. C'est peu, c'est petit, quelques liens discrets de l'hébergeur qui nous permet d'avoir autant de possibilité pour nos jeux, notre passion... Ne les enlevez pas, excepté en passant par les crédits de votre forum (points acquis pouvant servir à l'achat de privilèges comme le retrait des pubs, etc...).

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

Etape 6 : réalisation des icônes et boutons manquants

1) Cette étape n'est pas difficile, mais elle est un peu longue et surtout peu intéressante. Pourtant, motivez-vous, car nous approchons de la fin !
Il s'agit donc de réaliser les icônes restants (pour les sujets) ainsi que les boutons (éditer, citer, etc...). Concernant ces icônes je ne vais pas vous faire l'affront d'une explication graphique, essayez simplement de respecter les règles suivantes :
- faites de petits formats
- réutilisez les mises en forme, effets et couleurs de la bannière pour de l'harmonie dans votre thème
- parfois n'afficher que le texte sans fond ni cadre, notamment pour les boutons, fait plus léger, plus clair, et au final plus joli.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

2) Concernant les icônes de modération, plus bas, j'utilise personnellement des icônes en libre service, colorées mais discrètes. Etant donné qu'elles ne sont pas ma réalisation mais proviennent d'un site les proposant en libre service pour une utilisation non commerciale, je n'ai pas plus de droits que vous sur ces icônes, et je vous les propose donc :

Veuillez par contre re-héberger ces images !

3) Un ensemble de code css est nécessaire pour enlever les bordures qui apparaissent par endroit sur les bords, le haut ou le bas des tables. Ce code est présent sur le forum, mais je vous le rappelle tout de même :

4) Restent les boutons "nouveau", "répondre" et "verrouillé", ainsi que les petits boutons "éditer" & co. Pour tout cela je vous laisse faire, un texte simple suffit, par contre veillez à bien choisir la couleur, pour qu'il se voit sur votre futur fond de message.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

5) Concernant les petits icônes d'alerte, allez dans "voir les modèles" (lien se trouvant juste en dessous du cadre où vous inscrivez l'adresse de l'image), et choisissez les icônes triangulaires, bien plus jolis que ceux de base.

6) En image, vous pouvez également (si vous les utilisez) faire les mini-icônes de sujets. Pour eux, faites petit et très simple, évitez les gif scintillants, excepté éventuellement pour "nouveau".

Etape 7 : mise en forme des profils & messages

1) Dans un premier temps, nous allons donner un peu de personnalité aux profils et aux messages. Pour cela, une petite modification des templates est nécessaire, afin d'englober l'ensemble du profil dans un bloc auquel on appliquera une mise en forme.
Ouvrez le template "affichage d'un sujet" (ou "viewtopic_body") et allez à la ligne 91. C'est là, avec le "span class="name"..." que commence le profil. En tout début de ligne, avant ce "span", mettez donc ceci :

2) Allez ensuite à la ligne 100, à la fin du code présent sur cette ligne, refermez votre bloc avec ceci :

3) Afin de pouvoir mettre en forme l'avatar également, allez à la ligne 94 et entourez ce code :

...de cette façon :

4) Affichez ensuite le css suivant pour mettre en forme votre profil. Vous pouvez bien sûr le modifier loisir et selon les couleurs et formes de votre design, y compris en y mettant une image de fond.

Image redimensionnée, pour afficher l'image en taille réelle cliquez dessus.

5) Une fois le profil en place, donnons juste un peu de style aux messages. Pour bien faire, allons dans le template "viewtopic_body" (le même que celui modifié pour le profil), et rendez-vous à la ligne 147. Là, remplacez le code de la ligne par :

J'ai simplement donné un nom (une "class") au bloc déjà présent.

6) Puis mettez votre code CSS.

7) Reste à mettre en forme les spoilers, codes et citations, et pour cela je vous renvoie tout simplement à ce tutoriel qui vous expliquera comment faire avec quels codes.

Etape 8 : corrections des erreurs

Toute modification des templates ou du CSS engendre son lot de petits problèmes, parfois mineurs, d'autres fois très ennuyeux. Il faut le savoir et pouvoir y remédier. Dans notre cas, une erreur apparait dans la boite de messagerie : la barre indiquant le pourcentage de remplissage de la boite déforme la page.
Pourquoi ? Parce que dans les templates, cette petite table comporte la "class" : "bodyline", or notre bodyline est modifié et une largeur en pixel est indiquée pour bloquer le corps à la largeur de la bannière... du coup, cette petite table prend elle aussi la largeur de la bannière, et ça évidemment, c'est pas bon.
Comment corriger ? Allez dans les templates "Poster & Messages privés", puis dans celui se nommant "privmsgs_body". Là, vous allez trouver à la ligne 18 votre table.

Une seconde erreur apparait dans l'affichage des messages. En effet, sous la liste complète des messages se trouve un bloc avec les pages éventuelles et leur lien. Ce bloc est décalé sur la gauche. C'est un détail, mais cela peut nuire à l'esthétique globale de votre forum et titiller le perfectionnisme de certain x). Pour corriger ce problème, j'ai déterminé une largeur en pixel du "page-body" (l'intérieur de la page contenant l'ensemble des blocs et tables forumline notamment).

Puis, vu que la largeur de page est fixée, j'ai mis les forumline et les tables à 100%, ce qui force tout les cadres à occuper toute la largeur de ce "page-body".

Mais...Mon problème n'est pas résolu ! Tout les blocs sont alignés mais se décalent sur la droite...
Si un tel décalage se produit (ce qui n'est pas forcément le cas), l'erreur vient d'un élément qui déforme la page. J'ai moi-même eu ce problème sur le forum test où j'ai produits le design que je vous offre dans ce tutoriel, et la faute revenait à l'image utilisé pour afficher le titre des catégories.

Voici notre coupable :

Pour corriger ce problème, il faut imposer une réduction de cette image uniquement dans la navigation interne, afin qu'elle soit tout de même assez large sur la page d'accueil, au dessus de vos catégories. Voici le code permettant de régler la taille de cette image dans cette navigation interne uniquement, par css :

Changez simplement le mot "bodyline" en "forumline", puisque notre forumline est en pourcentage et donc qu'il ne se déformera pas, il définira sa taille par rapport à l'élément qui le contient.

Le tutoriel est à présent terminé, vous pouvez constater qu'afin de réaliser un thème complet très simple il faut déjà pas mal de temps et de patience... Il m'en a fallu pas mal aussi pour réaliser ce tutoriel, pendant lequel je réalisais en même temps et pas à pas le thème servant d'appuis.
J'espère qu'il vous aura été utile et vous permettra peut-être d'aimer la réalisation de thèmes complets. Vous pouvez en effet découvrir par vous-même tout un panel de personnalisations possibles, que ce soit seulement avec le CSS ou avec l'aide des templates.
Je vous rappelle que je n'autorise pas la copie de ce tutoriel, par contre vous pouvez le lier si vous le souhaitez.
Bon courage pour vos prochaines réalisations ! Et n'oubliez pas le principal : amusez-vous ;)

Index cursus codage
Index cursus graphisme