Codage.
Cursus
Étape 6 - Élaboration du "Qui est en ligne?"
Le Qui Est En Ligne, ou QEEL, est la partie qui vient clore avec votre Footer, votre forum. Malheureusement, elle fait partie des parties les plus négligées avec l’affichage des sujets et des messages … C’est dommage parce que ces choses négligées laissent un arrière-goût de travail bâclé et donc pas terminé dans l'esprit du visiteur. Au final, il sera peut-être beaucoup moins motivé pour rejoindre le forum. Vous l’aurez donc compris, le QEEL et son cousin le Footer sont à l’honneur.
Auteur : Taktiik
Création du titre QEEL
Tout d’abord, nous allons créer notre titre QEEL. Ce sera une image de ce type :
• Ouvrez Photoshop et créez un nouveau document de dimensions
948*127. (Largeur * Longueur)
• A l’aide du pot de peinture, remplissez le document de la couleur #17344f et supprimez la moitié du document (En hauteur).
• Créez une typographie
« QUI EST EN LIGNE ? » – J’ai pris Blue Highway – et placez la au centre de la barre : Taille de police :
52px, couleur : #224c74.
Appliquez lui une ombre portée : Opacité 44%, Angle 90°, Distance : 2px, Grossi : 0%, Taille : 1px.
• Créez une nouvelle typographie
« sur le forum » – J’ai pris Exmouth – et placez la en-dessous du mot « LIGNE » : Taille de police :
36px, couleur : #4574a2.
Appliquez lui une ombre portée : Opacité 44%, Angle 90°, Distance : 2px, Grossi : 0%, Taille : 1px.
• Fusionnez les calques
(CTRL+MAJ+E) et enregistrez le document en
.PNG
Analyse du template
Tout d’abord, Où se trouve-t-il ce petit QEEL ?
Et bien il est dans le Template nommé
Index_Body, vous savez celui qui modifie l’apparence de la Page Accueil, de l’emplacement de votre Chatbox … Des éléments essentiels Wink !
Commençons par une compréhension large du Template :
Le Template commence par un tableau tout mignon qui est votre PA.
Il est délimité en deux parties :
Partie qui va gérer l’affichage du titre de votre Page Accueil
Et :
Partie qui va gérer l’affichage du contenu de la Page Accueil.
C’est pourquoi si vous voulez modifier l’affichage du cadre des catégories, il suffit de modifier la class="" du premier et de la modifier dans le CSS, Facile non ?
Voilà un gros pavé de lignes pour gérer la connexion (Comme quoi, on peut croire que c’est du chinois mais le commentaire HTML l’annonce clairement Razz (User_Login) Gros pavé suivi de deux lignes intéressantes :
Ceci gère l’affichage de la Chatbox lorsqu’elle est affichée en haut, c'est-à-dire qu’on peut prendre cette ligne et la mettre en bas, elle s’affichera en bas, mais c’est plutôt inutile, il y a son homonyme plus loin.
Ceci annonce l’affichage des catégories ! Ceci implique deux choses : La mobilité de chaque élément dans le Template (La PA peut devenir le QEEL et inversement) mais aussi le mélange de plusieurs éléments, comme actuellement sur Never Utopia où le QEEL est directement mélangé à la Page Accueil.
Comme dans les categories, ce sont les petits liens qui suivent vos catégories « Supprimer les cookies du forum » etc…
On retrouve notre pave. Hé oui, après la connexion en haut, elle vient en bas si on l’a coché dans les options !
La partie qui va nous intéresser puisqu’elle gère l’affichage du QEEL ! On la laisse de coté pour l’approfondissement pour plus tard !
Enfin, c’est ce qui affiche vos trois icones de catégories tout en bas de votre forum. Je vous conseille de les supprimer –Pour ma part, c’est déjà fait - C’est une petite tâche d’esthétisme assez inutile au vue des images que nous avons puisqu’elle indique l’état du forum.
Modification du QEEL
• Procédons enfin à la modification du QEEL. Nous allons l’organiser en trois colonnes séparées, ce seront trois blocs juxtaposés. Ciblons la partie que nous allons traiter :
Pour commencer, nous allons supprimer la partie qui concerne la Chatbox.
Supprimez donc cette partie :
Maintenant, nous allons reprendre ces lignes :
Pour les reporter juste après le commentaire HTML qui ouvre le QEEL. Nous allons créer le titre du qeel via une div.
Il sera donc nécessaire de supprimer les lignes précédemment citées.
Etat du Template :
• Maintenant, nous allons créer une div qui contiendra le tableau du QEEL. Ainsi, juste avant le début du
table créez une div du nom de
« Qeel ». Fermez-la juste après que le tableau soit clos. Ensuite, supprimez tous les attributs -
Ils ont la forme de :Nomattribut="" - et ne gardez que la
class="forumline". Remplacez forumline par
« QeelTable».
• Validez le Template et passez dans le Feuille de Style. Juste avant nous avons crée 3 div :
« QeelIMG »,
« Qeel » et
« QeelTable ». Nous allons les ajouter dans la partie qui est prévue pour le QEEL :
• Nous allons à donner
« QeelIMG » pour fond le titre que nous avons crée au début et le positionner en bas au centre.Il prendra pour dimensions celle du fond et sera centré.
• Maintenant, pour
« Qeel », on lui donne une position relative, c'est-à-dire qu’il deviendra plus important. On évitera l’affichage de la bordure du Footer qui ne va servir que dans toutes les autres pages. Le Qeel aura pour couleur de fond : #17344f, une bordure en bas de 1px de couleur #17344f. Ses dimensions sont 948*330 et aura une marge extérieure en bas négative [-28px] ; C'est-à-dire qu’au lieu de se décaler vers le haut, il se rapprochera du bas.
EXERCICE :
• "Qeel" va prendre les propriétés et valeurs suivantes :
- Une position relative (Position primordiale sur les autres éléments)
- Une fond de couleur #17344f
- Une bordure sur le bas de 1px, solide de couleur #17344f
- Ayant pour dimensions 948*330
- Une marge extérieure en bas de -28px
• "QeelTable" va prendre les propriétés et valeurs suivantes :
- Une largeur de 848px
- Une centrement automatique (margin : auto)
Validez le CSS et retournez dans le Template !
• Nous allons commencer à nouveau par supprimer la partie qui gère l’affichage de l’image QEEL que l’on ajoute dans la gestion d’image.