Codage.
Cursus
Nous allons directement commencer par manipuler dans topics_list_box et retirer les lignes qui correspondent aux titres tels que "Vues" "Réponses" etc... Qui ne vont pas nous servir.
• Ainsi, retirez les lignes suivantes :
Nous voici maintenant face à ce qui gère directement l'affichage de la liste des sujets :
• Nous allons y créer un tableau de manière astucieuse entre :
Et
Ainsi, il faudra créer une cellule qui englobera toutes les autres.
Maintenant que nous avons crée ce qui va contenir notre liste de sujets, nous allons organiser son contenu. A la fin de notre passage nous avons :
Le but va être de créer une seule cellule qui contiendra une div du nom de "SujetPosted" et qui contiendra le nombre de vues, de réponses et les informations relatives au dernier message.
•Il faut déjà supprimer les autres colonnes et donner la class à la toute première :
Vous l'aurez remarqué, la création de la div entraine la suppression des spans ! Maintenant, nous allons créer une div autour des statistques et retirer la ligne qui gère l'affichage de l'auteur du sujet, nous la réimplanterons quelque part d'autre.
C'est terminé pour cette partie, nous allons maintenant modifier un peu plus au-dessus dans le template, je parle de cette partie :
Ensuite, en-dessous de la div qui contient le titre, nous allons y ajouter celle qui contiendra l'auteur du nom de "SujetAuteur"
Enfin, nous allons déplacer l'affichage de l’icône et le mettre à coté de l'ensemble. Juste avant la cellule qui englobe le tableau, juste ici :
Coupez donc cette ligne :
Et collez-là juste après :
Changez la classe en "SujetIcone" et on arrive à :
Au final, le template devient :
Passons maintenant à la modification CSS !
Dans la première partie de l'étape, nous avons crée plusieurs classes dont : "Sujet", "SujetIcone", "SujetTitle", "SujetAuteur", "SujetsStats" et "SujetPosted".
Ainsi, nous copions ceci dans le css entre la section qui est prévu à la modification des sujets :
• "SujetIcone" va seulement prendre une position: absolute.
• Ensuite, a.Sujettitle, le titre du sujet donc, va avoir une taille de police de 13px, des lettres capitales et une ombre portée (X= 0, Y=0, Z=1 et en couleur: #000000).
• Puis, la div qui contient l'auteur du sujet et sa phrase va prendre les modifications suivantes :
- Une taille de police de 10px
- Une texte en italique
• "SujetsStats" va prendre une bordure en bas d'1px, solide, de couleur #095279; une police de taille 10px et une marge extérieure en bas de 1px.
• Enfin, "SujetPosted" va prendre les modifications suivantes :
- Une couleur de fond de couleur #052231
- Une bordure sur tous les côtés de 1px, solide, de couleur #095279
- La div aura pour dimensions 200*50
- Une police d'écriture de 10px
- Une marge extérieure de 5px
- Une ombre portée avec X = 0, Y = 0, Z = 3 et pour couleur #000000
Vous l'aurez remarqué sur le screen, l'image catégorie nous déforme l'affichage du forum, nous allons donc ajouter un code qui va la redimensionner de partout sur le forum (Sujets et messages). Ce sera un code à retenir et à garder près de vous si vous utilisez des images catégories !
Passons à la création des images de sujets, à savoir :
• Nouveaux messages
• Pas de nouveaux messages
• Sujet Verrouillé
• Annonce
• Post-it
Tout comme les images New/No New/Lock que nous avons crée pour les catégories, nous allons faire des textes pour les images des sujets.
• Créez un document qui a pour dimensions : 44*80 (Largeur*Longueur)
• Utilisez l'outil de texte horizontal et marquez "Post-it -Marquez un saut de ligne- Sujet" en taille 10px.
• Placez la typographie au milieu du document et double-cliquez sur le claque du texte.
• Appliquez :
- Une incrustation en dégradé : Angle = 0°
(#005585 -- #00304c) - Une ombre portée d'opacité 100%, Distance 2px, Grossi 0%, Taille : 1px.
• Fusionnez les claques et enregistrez le document en tant que .png
• Réalisez la même démarche pour "Sujet Annonce" !
• Passons aux images New/No New/Lock. Ouvrez un document de même dimensions précédentes.
• Utilisez l'outil de texte horizontal et marquez "MESS -Marquez un saut de ligne- NEW" en taille 18px.
• Placez la typographie au milieu du document et double-cliquez sur le claque du texte.
• Appliquez :
- Une incrustation en dégradé : Angle = 0°
(#005585 -- #00304c)
- Une ombre portée d'opacité 100%, Distance 2px, Grossi 0%, Taille : 1px.
• Utilisez la même démarche pour No New et Lock en variant les dégradés (Noir pour le lock, bleu pâle pour le no new) !
Précédent Suivant
Titre principal
"En voilà une chose ! Pourquoi devrait-on changer l'affichage des sujets, et puis, ça se modifie ?"
"Sortez les canons et les baïonnettes, cet homme ne doit plus vivre !"
Plus sérieusement, j'ai dis que le QEEL était un élément négligé, mais je pense que les sujets sont encore plus que négligés, ils sont ... oubliés, souillés, poussiéreux, enfouis dans un tour recouvert par des kilomètres de souvenirs lointains et ... Bref. Parfois, une petite organisation en rajoutant en cadre ou autre peut tout simplement suffire et pourtant, c'est un template totalement omis, peut-être parce que personne ne le comprend ou parce que personne ne prend la peine de le comprendre ... ou encore parce que l'on est aujourd'hui trop concentré sur l'apparence de la façade de notre forum ! Cette étape sera donc entièrement consacrée aux sujets et leur affichage. Le template qui gère l'affichage des sujets s'appelle topics_list_box. Contrairement aux démarches que nous avons précédemment utilisées, nous n'analyserons pas ce template puisqu'il sera entièrement analysé dans un tutoriel à venir. Disons que j'estime que le minimum à expliquer sera fait pendant la manipulation ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
"Sortez les canons et les baïonnettes, cet homme ne doit plus vivre !"
Plus sérieusement, j'ai dis que le QEEL était un élément négligé, mais je pense que les sujets sont encore plus que négligés, ils sont ... oubliés, souillés, poussiéreux, enfouis dans un tour recouvert par des kilomètres de souvenirs lointains et ... Bref. Parfois, une petite organisation en rajoutant en cadre ou autre peut tout simplement suffire et pourtant, c'est un template totalement omis, peut-être parce que personne ne le comprend ou parce que personne ne prend la peine de le comprendre ... ou encore parce que l'on est aujourd'hui trop concentré sur l'apparence de la façade de notre forum ! Cette étape sera donc entièrement consacrée aux sujets et leur affichage. Le template qui gère l'affichage des sujets s'appelle topics_list_box. Contrairement aux démarches que nous avons précédemment utilisées, nous n'analyserons pas ce template puisqu'il sera entièrement analysé dans un tutoriel à venir. Disons que j'estime que le minimum à expliquer sera fait pendant la manipulation ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Auteur : Taktiik
Manipulation HTML
Nous allons directement commencer par manipuler dans topics_list_box et retirer les lignes qui correspondent aux titres tels que "Vues" "Réponses" etc... Qui ne vont pas nous servir.
• Ainsi, retirez les lignes suivantes :
Nous voici maintenant face à ce qui gère directement l'affichage de la liste des sujets :
• Nous allons y créer un tableau de manière astucieuse entre :
Et
Ainsi, il faudra créer une cellule qui englobera toutes les autres.
EXERCICE :
• Créez une cellule entre tr et /tr
• Créez une tableau qui aura comme classe : Sujet
• Créez une ligne au tableau (tr) englobant le reste des cellules.
Vous pouvez comme toujours me MP si vous n'avez pas compris certaines choses dans les exercices ou si vous avez besoin de plus amples informations !
• Créez une cellule entre tr et /tr
• Créez une tableau qui aura comme classe : Sujet
• Créez une ligne au tableau (tr) englobant le reste des cellules.
Vous pouvez comme toujours me MP si vous n'avez pas compris certaines choses dans les exercices ou si vous avez besoin de plus amples informations !
Maintenant que nous avons crée ce qui va contenir notre liste de sujets, nous allons organiser son contenu. A la fin de notre passage nous avons :
Le but va être de créer une seule cellule qui contiendra une div du nom de "SujetPosted" et qui contiendra le nombre de vues, de réponses et les informations relatives au dernier message.
•Il faut déjà supprimer les autres colonnes et donner la class à la toute première :
Vous l'aurez remarqué, la création de la div entraine la suppression des spans ! Maintenant, nous allons créer une div autour des statistques et retirer la ligne qui gère l'affichage de l'auteur du sujet, nous la réimplanterons quelque part d'autre.
C'est terminé pour cette partie, nous allons maintenant modifier un peu plus au-dessus dans le template, je parle de cette partie :
Ensuite, en-dessous de la div qui contient le titre, nous allons y ajouter celle qui contiendra l'auteur du nom de "SujetAuteur"
Enfin, nous allons déplacer l'affichage de l’icône et le mettre à coté de l'ensemble. Juste avant la cellule qui englobe le tableau, juste ici :
Coupez donc cette ligne :
Et collez-là juste après :
Changez la classe en "SujetIcone" et on arrive à :
Au final, le template devient :
Passons maintenant à la modification CSS !
Manipulation CSS
Dans la première partie de l'étape, nous avons crée plusieurs classes dont : "Sujet", "SujetIcone", "SujetTitle", "SujetAuteur", "SujetsStats" et "SujetPosted".
Ainsi, nous copions ceci dans le css entre la section qui est prévu à la modification des sujets :
EXERCICE :
• "Sujeté va prendre les propriétés suivantes :
- Un fond de couleur : #17344f
- Une bordure solide de 1px sur tous les cotés de couleur : #095279
- Une largeur de 890px
- Une taille minimum de 30px (min-height: Xpx)
- Une marge intérieure de 15px sur la gauche
- Une marge intérieure de 5px
- Une marge extérieure sur le haut et le bat de 5px
- Une marge extérieure sur la gauche de 20px
- Un arrondis de 20px
- Une ombre avec X = 0, Y = 0, Z = 3px et pour couleur #000000
Je parie que certains d'entre vous sont tombés dans le piège pour le padding et ont mis en premier le padding-left en premier, puis le padding "général" en second. C'est une erreur à éviter mais ne vous inquiétez pas, ça deviendra un automatisme bientôt Wink !
• "Sujeté va prendre les propriétés suivantes :
- Un fond de couleur : #17344f
- Une bordure solide de 1px sur tous les cotés de couleur : #095279
- Une largeur de 890px
- Une taille minimum de 30px (min-height: Xpx)
- Une marge intérieure de 15px sur la gauche
- Une marge intérieure de 5px
- Une marge extérieure sur le haut et le bat de 5px
- Une marge extérieure sur la gauche de 20px
- Un arrondis de 20px
- Une ombre avec X = 0, Y = 0, Z = 3px et pour couleur #000000
Je parie que certains d'entre vous sont tombés dans le piège pour le padding et ont mis en premier le padding-left en premier, puis le padding "général" en second. C'est une erreur à éviter mais ne vous inquiétez pas, ça deviendra un automatisme bientôt Wink !
• "SujetIcone" va seulement prendre une position: absolute.
• Ensuite, a.Sujettitle, le titre du sujet donc, va avoir une taille de police de 13px, des lettres capitales et une ombre portée (X= 0, Y=0, Z=1 et en couleur: #000000).
• Puis, la div qui contient l'auteur du sujet et sa phrase va prendre les modifications suivantes :
- Une taille de police de 10px
- Une texte en italique
• "SujetsStats" va prendre une bordure en bas d'1px, solide, de couleur #095279; une police de taille 10px et une marge extérieure en bas de 1px.
• Enfin, "SujetPosted" va prendre les modifications suivantes :
- Une couleur de fond de couleur #052231
- Une bordure sur tous les côtés de 1px, solide, de couleur #095279
- La div aura pour dimensions 200*50
- Une police d'écriture de 10px
- Une marge extérieure de 5px
- Une ombre portée avec X = 0, Y = 0, Z = 3 et pour couleur #000000
Vous l'aurez remarqué sur le screen, l'image catégorie nous déforme l'affichage du forum, nous allons donc ajouter un code qui va la redimensionner de partout sur le forum (Sujets et messages). Ce sera un code à retenir et à garder près de vous si vous utilisez des images catégories !
Manipulation Graphique
Passons à la création des images de sujets, à savoir :
• Nouveaux messages
• Pas de nouveaux messages
• Sujet Verrouillé
• Annonce
• Post-it
Tout comme les images New/No New/Lock que nous avons crée pour les catégories, nous allons faire des textes pour les images des sujets.
• Créez un document qui a pour dimensions : 44*80 (Largeur*Longueur)
• Utilisez l'outil de texte horizontal et marquez "Post-it -Marquez un saut de ligne- Sujet" en taille 10px.
• Placez la typographie au milieu du document et double-cliquez sur le claque du texte.
• Appliquez :
- Une incrustation en dégradé : Angle = 0°
(#005585 -- #00304c) - Une ombre portée d'opacité 100%, Distance 2px, Grossi 0%, Taille : 1px.
• Fusionnez les claques et enregistrez le document en tant que .png
• Réalisez la même démarche pour "Sujet Annonce" !
• Passons aux images New/No New/Lock. Ouvrez un document de même dimensions précédentes.
• Utilisez l'outil de texte horizontal et marquez "MESS -Marquez un saut de ligne- NEW" en taille 18px.
• Placez la typographie au milieu du document et double-cliquez sur le claque du texte.
• Appliquez :
- Une incrustation en dégradé : Angle = 0°
(#005585 -- #00304c)
- Une ombre portée d'opacité 100%, Distance 2px, Grossi 0%, Taille : 1px.
• Utilisez la même démarche pour No New et Lock en variant les dégradés (Noir pour le lock, bleu pâle pour le no new) !
Précédent Suivant