Codage.
Cursus
Direction Affichage> Templates> Général> Index_box.
Nous voici devant le Template qui gère l’affichage de nos catégories. C’est aujourd’hui, LE TEMPLATE le plus modifié des forums et pour cause, les tutoriels le concernant sont nombreux et divers. Dans notre cas, nous allons le démembrer pour mieux le comprendre et mieux le trifouiller à l’exemple du tutoriel sur les Qui Est En Ligne présent dans les sections d’aides au codage.
Ce tableau affiche les premiers liens que l’on retrouve au-dessus des catégories, vous savez ceux-ci :
Ceci annonce le début de la catégorie puis l’ouverture du Header des catégories. C’est pourquoi par la suite, on retrouve le titre de la catégorie et des titres de colonnes comme Derniers Messages, Sujets, Messages.
Ensuite, on ouvre sur le cas où la hiérarchie serait compressée. C'est-à-dire où les catégories ne seraient pas séparées en bloc mais dans un seul et unique bloc. Pour ma part, je supprime souvent cette partie dans le template puis que je n’utilise jamais cette formation. Avis aux codeurs en herbe, il y a surement énormément de choses à réaliser sur ceci, c’est rare de voir des forums avec cette hiérarchie Wink
Enfin, on arrive à l’affichage des forums. C’est la partie donc la plus modifié des forums puisqu’aujourd’hui, elle fait partie intégrante des critères de sélection pour un utilisateur. Quelque chose de trop serré, trop carré donnera un effet d’oppression et en fera fuir plus d’un !
Affiche un espace s’il est activé puis l’image new/no new/lock du forum.
Affiche le titre du forum, c’est quelque chose à retenir pour pouvoir modifier ses catégories.
Dans l’ordre, la description des forums :
Les modérateurs des forums :
Et les sous-forums :
Par habitude, je supprime les modérateurs puisque je ne vois que très peu d’intérêt à les laisser. Leur affichage n’est jamais coché pour ma part.
Enfin dans l’ordre, l'affichage du nombre de Sujets:
Du nombre de messages :
Et du dernier message :
Vous avez toutes les clefs en main pour créer des catégories innovantes, mais pour ce tutoriel, nous allons créer des catégories toutes belles et toutes propres, alliant simplicité, ergonomie et efficacité. Avec le temps que nous avons passé précédemment à faire nos catégories, il est donc bien normal que nous commencions par le corps des catégories.
• Nous allons créer trois blocs, le header (Ou tête), le corps (Ou corps) et le footer (Ou Pied) de la catégorie. Pour créer le header, direction l.22. Avant :
Nous allons créer deux div. L’une affichant le header, l’autre le corps. Ce qui donne :
On ferme la div de "MidCategorie" après :
Ce qui donne :
Maintenant on insère le footer de la catégorie juste après le corps que nous avons créée. Vous obtenez ceci :
• Direction la feuille de style CSS -Je ne vais plus vous indiquer comme y aller, à force vous avez du retenir non ^^ ?- dans la partie réservée aux catégories, on ajoute nos trois div créés précédemment :
• Maintenant, on va leur affilier la taille de chacune de nos parties, les centrer grâce à un margin et leur attribuer un background avec son image, sa position (en haut au centre) et sa non-répétition. Ils auront pour dimensions celle des images. Si vous avez bien suivi, vous obtenez quelque chose similaire à ceci :
Alors, vous le voyez, nous allons devoir rajouter des marges extérieures en haut de chaque catégorie et je vais également vous apprendre la magie avec la propriété background. Vous avez pu le remarquer, le "MidCategorie" ne prend pas de hauteur pour qu'il puisse se répéter autant de fois qu'il est nécessaire.
Tout d’abord, appliquons la marge :
Ici, l’ordre des propriétés est très important. Le margin-top viendra annuler uniquement pour le top l’attribution du « auto » apportée par le margin. C’est la même chose pour border et border-top et toutes les autres propriétés de ce type.
Maintenant, passons au background. Plutôt que de prendre 3 voire 4 lignes dans le CSS, le background peut se comprimer de cette façon :
Le suffixe –image ou –position ou encore –repeat disparaît et on peut lui donner toutes les valeurs que l’on veut ! Le max qu’on pourrait faire pourrait être
Énorme non ? Le problème, c’est que lorsque l’on doit mettre plusieurs images comme notre « body », la propriété ne fonctionne pas et les suffixes doivent réapparaître.
On enregistre le CSS et on repasse dans le Template Index_box !
• Par soucis d’esthétisme, nous allons supprimer les lignes :
Elles ne nous serviront pas te viendront freiner notre imagination débordante, ce serai dommage ! Maintenant, on va déplacer le titre des catégories et le faire passer dans le Header des Catégories : « TopCategorie ». On va l’entourer d’une div que l’on appellera « CategorieTitle ».
Ensuite, on va agencer l’affichage de nos forums. Pour commencer, nous allons supprimer toutes traces du tableau qui constitue l’affichage des forums. Supprimez toutes les lignes qui s’y apparente (En prenant en compte que j’ai supprimé les parties que je ne trouve pas utile pour le tutoriel citées plus haut) comme
Votre Template doit ressemble à ceci :
• Pour la suite, nous allons créer des forums en deux colonnes comme sur Never Utopia actuellement. Nous allons donc créer une première div qui contiendra tous les forums puis une seconde qui contiendra le contenu d’un seul forum. Ca donne :
Le problème lorsque l’on mélange le corps de catégorie et le forum sur deux colonnes, c’est que l’affichage du corps est annulé par le float de nos forums, ainsi pour éviter ce désagrément, nous allons rajouter juste après :
Ceci :
L'élément suivant un élément flottant s'affichera dans l'espace laissé par la largeur du flottant. Ce comportement n'étant pas voulu, clear sera là pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. Donc notre corps de catégorie s’affichera parfaitement !
Enregistrez-votre travail et passez dans le CSS.
• Nous avons créé : CategorieTitle, Forums et TheForum. Nous allons donc les mettre en esthétique après le corps du forum :
Nous allons uniquement rajouter une marge intérieure dans le titre du forum pour qu’il s’affiche sur le bas du header. (Mettons disons 20px)
Ensuite, nous allons donner une largeur au bloc qui contiendra nos forums et le centrer dans le corps du forum.
Enfin, nous allons donner le style à nos catégories. Nous allons leur donner l’attribut float pour l’affichage en double colonne, une taille et un marge de 20px pour tous les cotés excepté en bas qui sera de 50px pour séparer chaque ligne et un background en image que je vous donne ici :
J'ai pris une couleur, un contour et j'ai passé le tout à 30% d'opacité puis enregistrer pour obtenir ce résultat)
Au final, on se retrouve à ceci :
Validez votre feuille et magie :
• On repasse maintenant dans Index_box. On va commencer par mettre en forme la description qui viendra en première dans l’affichage des forums. On va tout simplement l’entourer d’une div du nom de « ForumDescription ». Elle sera suivie d’une autre div nommée « ForumTitle » dans laquelle on va retrouver le … Titre du forum ! (Vous êtes bilingue non ?)
/ !\On ne gardera pas les span du titre / !\
On obtient au final :
• Maintenant, on va mettre en forme la partie Sous-Forums / Statistiques. Pour se faire, on va créer une troisième div du nom de « ForumStats » Qui contiendra le tout.
Ce qui donne :
J’ai rajouté gensmall car tous les span le contenait, l’ajouter après ForumStats avec un espace l’inclus dans le style à prendre (Je l’ai fais aussi sur ForumDescription, vous avez remarqué ?)
• Ensuite, on créer une boite pour les sous-forums, une autre pour les stats/dernier message et on donne une class à l’image de forum :
Oups, j’ai rajouté un id dans la div des sous-forums, mais pourquoi ?
Et bien nous allons les faire revenir à la ligne à l’aide d’un code JavaScript. Après la fin de la div des sous-forums ajoutez :
Ce qui donne :
Le script utilise JQuery pour récupérer l’id subforums, lorsque ceci est fait, il remplace la virgule par un saut de ligne.
Validez votre Template et passez à la feuille CSS !
• Nous avons créé beaucoup de div ce coup-ci ! Pour résumer, on a : ForumDescription, ForumTitle, ForumStats, ForumSous, ForumIcone et ForumLast
Nous allons ainsi les modifier !
• Pour commencer, attaquons par la description.
• Maintenant, on passe à la boite qui contient le titre du forum. On va lui donner un fond de couleur #01121a, des bordures de couleur #014165, une largeur (387px), une taille de police (12px).
• On va faire passer le tout en gras, lui modifier sa police (12px), le passer en lettre capitale, le centrer, lui donner une ombre (X= 0, Y=0, Z= 2 et couleur = #000) et lui imposer une marge extérieure de 5px en haut et en bas de la boite.
Ensuite, on va modifier directement le lien en lui-même pour faire comprendre que c’est un lien et pas seulement un texte. On va donc lui appliquer une transition. Il faut le récupere via .ForumTitle a et .ForumTitle a :hover.
Ca donne :
J’ai mis !important pour que la couleur soit celle appliquée et donc la plus importante dans l’affichage des couleurs. C’est souvent une manipulation récurrente à faire pour les liens sur ForumActif Wink !
• On modifie ensuite la boite qui contient les sous-forums et le dernier message : On ne va que lui ajouter des dimensions : 419*78
• On créer une boite pour afficher la barre de défilement s’il y a trop de sous-forums et on les fait flotter sur la gauche dans leur conteneur :
• Modifions maintenant l’affichage de l’image new/no new/lock. On va la placer de telle façon qu’elle empiète sur les derniers messages.
• Enfin, on termine par l’aspect du dernier message. On le fait flotter également, on lui ajoute un fond, des bordures, des dimensions, des marges de telle façon à ce qu’il soit assez éloigné , des ombres et un alignement central du texte.
Oh finalement, on va peut-être lui arrondir ses coins légèrement, 5px suffit !
•Pour finir, nous allons ajouter l’image de notre catégorie. Direction Général> Forum> Catégories&Forums puis cliquez sur l’une de vos catégories. A la place d’un texte mettez-y votre image comme ceci :
J'avais pensé à vous laisser organiser la chose comme vous le vouliez - Ce tuto est très bon et se prête incroyablement bien à nos catégories - Mais je suis finalement revenu sur ma décision pour vous donner quelque chose de sobre et simple.
• Direction Général> Forum> Catégories et Forums> Le forum
Nous allons réaliser quelque chose de très simple : Une image de dimension 35*100 (Largeur*Longueur) de Ce type qui flotte sur la gauche d'une boite avec une bordure sur la gauche et une barre de défilement (overflow: auto). Dans la description de votre forum, il suffit d'ajouter le code d'une image puis d'une div. Pour les moins débrouillards, voici le tout :
Pourquoi avoir ajouté Clear: both ? Et bien, c'est dis plus haut dans le tutoriel, il permet d'annuler le flottement et donc le bon affichage des statistiques qui viennent après !
• Nous avons donc créée deux class : "ForumDImg" et "ForumDText". Nous allons les mettre en style dans le CSS. Juste après :
On va ajouter :
• Modifions à présent le texte de la description. Nous voulons lui ajouter une bordure sur la gauche de 2px, solide de la couleur #053c5b. Ensuite, nous lui donnons des dimensions (325*100), une marge extérieure de 5px et un marge intérieure de 2px. On oublie pas ensuite, la barre de défilement - overflow: auto; -
Et voilà, nous avons terminé !
Récapitulatif du CSS :
C’est officiel, nous avons terminé nos catégories ! YOUPI ! Il est temps d’aller triturer le QEEL =D !
Précédent Suivant
Étape 5b - Installation des catégories
Passons donc à la création CODAGE de nos catégories. Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Auteur : Taktiik
Analyse du template
Direction Affichage> Templates> Général> Index_box.
Nous voici devant le Template qui gère l’affichage de nos catégories. C’est aujourd’hui, LE TEMPLATE le plus modifié des forums et pour cause, les tutoriels le concernant sont nombreux et divers. Dans notre cas, nous allons le démembrer pour mieux le comprendre et mieux le trifouiller à l’exemple du tutoriel sur les Qui Est En Ligne présent dans les sections d’aides au codage.
Ce tableau affiche les premiers liens que l’on retrouve au-dessus des catégories, vous savez ceux-ci :
Ceci annonce le début de la catégorie puis l’ouverture du Header des catégories. C’est pourquoi par la suite, on retrouve le titre de la catégorie et des titres de colonnes comme Derniers Messages, Sujets, Messages.
Ensuite, on ouvre sur le cas où la hiérarchie serait compressée. C'est-à-dire où les catégories ne seraient pas séparées en bloc mais dans un seul et unique bloc. Pour ma part, je supprime souvent cette partie dans le template puis que je n’utilise jamais cette formation. Avis aux codeurs en herbe, il y a surement énormément de choses à réaliser sur ceci, c’est rare de voir des forums avec cette hiérarchie Wink
Enfin, on arrive à l’affichage des forums. C’est la partie donc la plus modifié des forums puisqu’aujourd’hui, elle fait partie intégrante des critères de sélection pour un utilisateur. Quelque chose de trop serré, trop carré donnera un effet d’oppression et en fera fuir plus d’un !
Affiche un espace s’il est activé puis l’image new/no new/lock du forum.
Affiche le titre du forum, c’est quelque chose à retenir pour pouvoir modifier ses catégories.
Dans l’ordre, la description des forums :
Les modérateurs des forums :
Et les sous-forums :
Par habitude, je supprime les modérateurs puisque je ne vois que très peu d’intérêt à les laisser. Leur affichage n’est jamais coché pour ma part.
Enfin dans l’ordre, l'affichage du nombre de Sujets:
Du nombre de messages :
Et du dernier message :
Vous avez toutes les clefs en main pour créer des catégories innovantes, mais pour ce tutoriel, nous allons créer des catégories toutes belles et toutes propres, alliant simplicité, ergonomie et efficacité. Avec le temps que nous avons passé précédemment à faire nos catégories, il est donc bien normal que nous commencions par le corps des catégories.
Mise en place du corps de catégorie
• Nous allons créer trois blocs, le header (Ou tête), le corps (Ou corps) et le footer (Ou Pied) de la catégorie. Pour créer le header, direction l.22. Avant :
Nous allons créer deux div. L’une affichant le header, l’autre le corps. Ce qui donne :
On ferme la div de "MidCategorie" après :
Ce qui donne :
Maintenant on insère le footer de la catégorie juste après le corps que nous avons créée. Vous obtenez ceci :
• Direction la feuille de style CSS -Je ne vais plus vous indiquer comme y aller, à force vous avez du retenir non ^^ ?- dans la partie réservée aux catégories, on ajoute nos trois div créés précédemment :
EXERCICE :
• Entre "Début Catégories" et "Fin Catégories", placez les balises CSS suivantes :
- TopCategorie
- MidCategorie
- FootCategorie
• Entre "Début Catégories" et "Fin Catégories", placez les balises CSS suivantes :
- TopCategorie
- MidCategorie
- FootCategorie
• Maintenant, on va leur affilier la taille de chacune de nos parties, les centrer grâce à un margin et leur attribuer un background avec son image, sa position (en haut au centre) et sa non-répétition. Ils auront pour dimensions celle des images. Si vous avez bien suivi, vous obtenez quelque chose similaire à ceci :
Alors, vous le voyez, nous allons devoir rajouter des marges extérieures en haut de chaque catégorie et je vais également vous apprendre la magie avec la propriété background. Vous avez pu le remarquer, le "MidCategorie" ne prend pas de hauteur pour qu'il puisse se répéter autant de fois qu'il est nécessaire.
Tout d’abord, appliquons la marge :
Ici, l’ordre des propriétés est très important. Le margin-top viendra annuler uniquement pour le top l’attribution du « auto » apportée par le margin. C’est la même chose pour border et border-top et toutes les autres propriétés de ce type.
Maintenant, passons au background. Plutôt que de prendre 3 voire 4 lignes dans le CSS, le background peut se comprimer de cette façon :
Le suffixe –image ou –position ou encore –repeat disparaît et on peut lui donner toutes les valeurs que l’on veut ! Le max qu’on pourrait faire pourrait être
Énorme non ? Le problème, c’est que lorsque l’on doit mettre plusieurs images comme notre « body », la propriété ne fonctionne pas et les suffixes doivent réapparaître.
On enregistre le CSS et on repasse dans le Template Index_box !
Organisation du contenu des catégories
• Par soucis d’esthétisme, nous allons supprimer les lignes :
Elles ne nous serviront pas te viendront freiner notre imagination débordante, ce serai dommage ! Maintenant, on va déplacer le titre des catégories et le faire passer dans le Header des Catégories : « TopCategorie ». On va l’entourer d’une div que l’on appellera « CategorieTitle ».
Ensuite, on va agencer l’affichage de nos forums. Pour commencer, nous allons supprimer toutes traces du tableau qui constitue l’affichage des forums. Supprimez toutes les lignes qui s’y apparente (En prenant en compte que j’ai supprimé les parties que je ne trouve pas utile pour le tutoriel citées plus haut) comme
Votre Template doit ressemble à ceci :
• Pour la suite, nous allons créer des forums en deux colonnes comme sur Never Utopia actuellement. Nous allons donc créer une première div qui contiendra tous les forums puis une seconde qui contiendra le contenu d’un seul forum. Ca donne :
Le problème lorsque l’on mélange le corps de catégorie et le forum sur deux colonnes, c’est que l’affichage du corps est annulé par le float de nos forums, ainsi pour éviter ce désagrément, nous allons rajouter juste après :
Ceci :
L'élément suivant un élément flottant s'affichera dans l'espace laissé par la largeur du flottant. Ce comportement n'étant pas voulu, clear sera là pour préciser que cet élément ne sera pas influencé par le comportement d'un flottant. Donc notre corps de catégorie s’affichera parfaitement !
Enregistrez-votre travail et passez dans le CSS.
• Nous avons créé : CategorieTitle, Forums et TheForum. Nous allons donc les mettre en esthétique après le corps du forum :
Nous allons uniquement rajouter une marge intérieure dans le titre du forum pour qu’il s’affiche sur le bas du header. (Mettons disons 20px)
Ensuite, nous allons donner une largeur au bloc qui contiendra nos forums et le centrer dans le corps du forum.
Enfin, nous allons donner le style à nos catégories. Nous allons leur donner l’attribut float pour l’affichage en double colonne, une taille et un marge de 20px pour tous les cotés excepté en bas qui sera de 50px pour séparer chaque ligne et un background en image que je vous donne ici :
J'ai pris une couleur, un contour et j'ai passé le tout à 30% d'opacité puis enregistrer pour obtenir ce résultat)
Au final, on se retrouve à ceci :
Validez votre feuille et magie :
• On repasse maintenant dans Index_box. On va commencer par mettre en forme la description qui viendra en première dans l’affichage des forums. On va tout simplement l’entourer d’une div du nom de « ForumDescription ». Elle sera suivie d’une autre div nommée « ForumTitle » dans laquelle on va retrouver le … Titre du forum ! (Vous êtes bilingue non ?)
/ !\On ne gardera pas les span du titre / !\
On obtient au final :
• Maintenant, on va mettre en forme la partie Sous-Forums / Statistiques. Pour se faire, on va créer une troisième div du nom de « ForumStats » Qui contiendra le tout.
Ce qui donne :
J’ai rajouté gensmall car tous les span le contenait, l’ajouter après ForumStats avec un espace l’inclus dans le style à prendre (Je l’ai fais aussi sur ForumDescription, vous avez remarqué ?)
• Ensuite, on créer une boite pour les sous-forums, une autre pour les stats/dernier message et on donne une class à l’image de forum :
Oups, j’ai rajouté un id dans la div des sous-forums, mais pourquoi ?
Et bien nous allons les faire revenir à la ligne à l’aide d’un code JavaScript. Après la fin de la div des sous-forums ajoutez :
Ce qui donne :
Le script utilise JQuery pour récupérer l’id subforums, lorsque ceci est fait, il remplace la virgule par un saut de ligne.
Validez votre Template et passez à la feuille CSS !
• Nous avons créé beaucoup de div ce coup-ci ! Pour résumer, on a : ForumDescription, ForumTitle, ForumStats, ForumSous, ForumIcone et ForumLast
Nous allons ainsi les modifier !
• Pour commencer, attaquons par la description.
EXERCICE :
• "ForumDescription" va prendre les propriétés suivantes :
- Une hauteur de 115px
- Un texte justifié (text-align: justify)
- Une taille de police de 11px
• "ForumDescription" va prendre les propriétés suivantes :
- Une hauteur de 115px
- Un texte justifié (text-align: justify)
- Une taille de police de 11px
• Maintenant, on passe à la boite qui contient le titre du forum. On va lui donner un fond de couleur #01121a, des bordures de couleur #014165, une largeur (387px), une taille de police (12px).
• On va faire passer le tout en gras, lui modifier sa police (12px), le passer en lettre capitale, le centrer, lui donner une ombre (X= 0, Y=0, Z= 2 et couleur = #000) et lui imposer une marge extérieure de 5px en haut et en bas de la boite.
Ensuite, on va modifier directement le lien en lui-même pour faire comprendre que c’est un lien et pas seulement un texte. On va donc lui appliquer une transition. Il faut le récupere via .ForumTitle a et .ForumTitle a :hover.
Ca donne :
J’ai mis !important pour que la couleur soit celle appliquée et donc la plus importante dans l’affichage des couleurs. C’est souvent une manipulation récurrente à faire pour les liens sur ForumActif Wink !
• On modifie ensuite la boite qui contient les sous-forums et le dernier message : On ne va que lui ajouter des dimensions : 419*78
• On créer une boite pour afficher la barre de défilement s’il y a trop de sous-forums et on les fait flotter sur la gauche dans leur conteneur :
EXERCICE :
• "ForumSous" va prendre les propriétés et valeurs suivantes :
? Un flottement sur la gauche
? Une barre de défilement automatique (overflow: auto)
? Ayant pour dimensions 184*78
? Un texte centré
• "ForumSous" va prendre les propriétés et valeurs suivantes :
? Un flottement sur la gauche
? Une barre de défilement automatique (overflow: auto)
? Ayant pour dimensions 184*78
? Un texte centré
• Modifions maintenant l’affichage de l’image new/no new/lock. On va la placer de telle façon qu’elle empiète sur les derniers messages.
• Enfin, on termine par l’aspect du dernier message. On le fait flotter également, on lui ajoute un fond, des bordures, des dimensions, des marges de telle façon à ce qu’il soit assez éloigné , des ombres et un alignement central du texte.
Oh finalement, on va peut-être lui arrondir ses coins légèrement, 5px suffit !
•Pour finir, nous allons ajouter l’image de notre catégorie. Direction Général> Forum> Catégories&Forums puis cliquez sur l’une de vos catégories. A la place d’un texte mettez-y votre image comme ceci :
Organisation de sa description dans les forums
J'avais pensé à vous laisser organiser la chose comme vous le vouliez - Ce tuto est très bon et se prête incroyablement bien à nos catégories - Mais je suis finalement revenu sur ma décision pour vous donner quelque chose de sobre et simple.
• Direction Général> Forum> Catégories et Forums> Le forum
Nous allons réaliser quelque chose de très simple : Une image de dimension 35*100 (Largeur*Longueur) de Ce type qui flotte sur la gauche d'une boite avec une bordure sur la gauche et une barre de défilement (overflow: auto). Dans la description de votre forum, il suffit d'ajouter le code d'une image puis d'une div. Pour les moins débrouillards, voici le tout :
Pourquoi avoir ajouté Clear: both ? Et bien, c'est dis plus haut dans le tutoriel, il permet d'annuler le flottement et donc le bon affichage des statistiques qui viennent après !
• Nous avons donc créée deux class : "ForumDImg" et "ForumDText". Nous allons les mettre en style dans le CSS. Juste après :
On va ajouter :
• Modifions à présent le texte de la description. Nous voulons lui ajouter une bordure sur la gauche de 2px, solide de la couleur #053c5b. Ensuite, nous lui donnons des dimensions (325*100), une marge extérieure de 5px et un marge intérieure de 2px. On oublie pas ensuite, la barre de défilement - overflow: auto; -
Et voilà, nous avons terminé !
Récapitulatif du CSS :
C’est officiel, nous avons terminé nos catégories ! YOUPI ! Il est temps d’aller triturer le QEEL =D !
Précédent Suivant