Codage.
Cursus
• Allez sur votre forum test
• Pour démarrer, nous allons commencer par mettre les réglages principaux d’affichage. J’entends par là, le logo centré, le titre du forum caché etc. Pour ce faire, direction Affichage > Page d’Accueil > En-tête et navigation.
Vérifiez que ces éléments correspondent sinon modifiés-les comme voulu :
Position du logo : Centré
Afficher le titre du forum : Non
Afficher seulement des images dans la barre des liens : Non
Position du menu : Centré
Forcer la barre de navigation à rester sur une ligne : Oui
• Ensuite, allez dans Général> Configuration>Structure des pages :
Largeur du forum (nombre ou %) : 948
• Allez maintenant dans Affichage > Page d’accueil > Structure et hiérarchie et assurez-vous à nouveau de ces réglages :
Séparer les catégories sur l’index : Moyen
Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
Longueur du titre du sujet affiché : 16
Lien vers les niveaux inférieurs : Oui
Afficher les modérateurs d'un forum : Non
Afficher les statistiques du forum : Uniquement sur l'index racine
Afficher les moteurs de recherche dans les statistiques du forum : Non
• Enfin, allez dans Affichage > Images et Couleurs > Gestion des Images et retirez-y TOUTES les images qui se trouvent dans : Général/Navigation – Icônes du forum – Icônes des sujets.
Ceci fait, vous vous trouverez à ce résultat :
Non ! Rangez-moi ces haches >.<, je ne vous ai pas fait faire ça pour rien, au contraire, ce sont des réglages parfois négligés qui jouent un rôle important dans la hiérarchie du forum ! Avant de vouloir construire vos catégories, il faut avoir un aspect global de ce que vous voulez de votre plateforme alors n’hésitez pas à consulter les sections d’aide à la conception de forum ;)
• Pour pouvoir enfin toucher au code, on va commencer par enlever les couleurs présentes sur le forum pour pouvoir mieux jouer avec le CSS. Allez donc dans Affichage > Couleurs et enlevez les couleurs de fond et les couleurs de contour.
• Maintenant, on passe au code pur et dur ! Il faut mettre en forme le fond et le corps du forum. Aussi, nous allons modifier la balise « body », littéralement « corps » en anglais mais un faux-ami ici puisqu'elle constitue le fond de votre forum. Nous allons tout d’abord commencer par y ajouter le fond que nous avons créée précédemment et retirer les espaces qui sont en haut et en bas entre le forum et la page web avec « margin : 0px » :
Afin que le rectangle blanc contenant les publicités soit de la même couleur que le fond intérieur, il faut aller dans les couleurs mettre #052231 en temps que "Couleur du fond de page". Nous allons également colorer les espaces où l'on peut écrire, mettez donc #17344F en temps que "Couleur zones de saisie, menus déroulants et cadre de l'en-tête "
Je rappelle que vous pouvez modifier toutes les couleurs que je propose, tout ceci reste qu'une application et je ne vais pas aborder plusieurs nuances ou tons de thèmes, c'est infini et ça prendrait beaucoup trop de temps pour vous, comme pour moi ;P !
Récapitulatif du CSS :
Précédent Suivant
Étape 3 - Poser les fondations du codage du forum
Après avoir créée notre bannière, notre fond et avoir organisé notre feuille de style CSS, nous devons terminer les préparatifs par poser les fondations du codage du forum. Afin de pouvoir réaliser l'installation avec cette application, le forum doit être en phpBB2. Vous devez également être le fondateur du forum pour avoir accès aux templates. Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP
Auteur : Taktiik
Réglages prioritaires
• Allez sur votre forum test
• Pour démarrer, nous allons commencer par mettre les réglages principaux d’affichage. J’entends par là, le logo centré, le titre du forum caché etc. Pour ce faire, direction Affichage > Page d’Accueil > En-tête et navigation.
Vérifiez que ces éléments correspondent sinon modifiés-les comme voulu :
Position du logo : Centré
Afficher le titre du forum : Non
Afficher seulement des images dans la barre des liens : Non
Position du menu : Centré
Forcer la barre de navigation à rester sur une ligne : Oui
• Ensuite, allez dans Général> Configuration>Structure des pages :
Largeur du forum (nombre ou %) : 948
• Allez maintenant dans Affichage > Page d’accueil > Structure et hiérarchie et assurez-vous à nouveau de ces réglages :
Séparer les catégories sur l’index : Moyen
Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui
Longueur du titre du sujet affiché : 16
Lien vers les niveaux inférieurs : Oui
Afficher les modérateurs d'un forum : Non
Afficher les statistiques du forum : Uniquement sur l'index racine
Afficher les moteurs de recherche dans les statistiques du forum : Non
• Enfin, allez dans Affichage > Images et Couleurs > Gestion des Images et retirez-y TOUTES les images qui se trouvent dans : Général/Navigation – Icônes du forum – Icônes des sujets.
Ceci fait, vous vous trouverez à ce résultat :
Non ! Rangez-moi ces haches >.<, je ne vous ai pas fait faire ça pour rien, au contraire, ce sont des réglages parfois négligés qui jouent un rôle important dans la hiérarchie du forum ! Avant de vouloir construire vos catégories, il faut avoir un aspect global de ce que vous voulez de votre plateforme alors n’hésitez pas à consulter les sections d’aide à la conception de forum ;)
• Pour pouvoir enfin toucher au code, on va commencer par enlever les couleurs présentes sur le forum pour pouvoir mieux jouer avec le CSS. Allez donc dans Affichage > Couleurs et enlevez les couleurs de fond et les couleurs de contour.
Premiers pas dans notre CSS
• Maintenant, on passe au code pur et dur ! Il faut mettre en forme le fond et le corps du forum. Aussi, nous allons modifier la balise « body », littéralement « corps » en anglais mais un faux-ami ici puisqu'elle constitue le fond de votre forum. Nous allons tout d’abord commencer par y ajouter le fond que nous avons créée précédemment et retirer les espaces qui sont en haut et en bas entre le forum et la page web avec « margin : 0px » :
Background-color équivaut à une couleur de fond
Background-image équivaut à une image de fond, ici il y en a deux donc nous avons mis le bas (BodyBottom) en premier séparé d'une virgule (= au mot "et") puis mis le fond (BodyTop)
Background-position équivaut à la position des images du fond. Le bas commence en bas à gauche (Bottom left) et le haut en haut à gauche (Top left)
Background-repeat équivaut à la répétition des images du fond. Le bas ne se répète pas, le haut se répète sur l'axe des ordonnés (Si c'était uniquement le cas, on aurait mis repeat-y), donc de haut en bas et sur l'axe des abscisses (Si c'était uniquement le cas, on aurait mis repeat-x), donc de gauche à droite.
Background-attachment équivaut à l'attachement du fond à la page web. Scroll signifie qu'il ne suit pas la page web lorsqu'elle déroule (à l'inverse de fixed qui déroule en même temps que la page et reste donc fixe)
• Maintenant, on ajoute une couleur, des bordures, une taille et une ombre au corps du forum :
Background-image équivaut à une image de fond, ici il y en a deux donc nous avons mis le bas (BodyBottom) en premier séparé d'une virgule (= au mot "et") puis mis le fond (BodyTop)
Background-position équivaut à la position des images du fond. Le bas commence en bas à gauche (Bottom left) et le haut en haut à gauche (Top left)
Background-repeat équivaut à la répétition des images du fond. Le bas ne se répète pas, le haut se répète sur l'axe des ordonnés (Si c'était uniquement le cas, on aurait mis repeat-y), donc de haut en bas et sur l'axe des abscisses (Si c'était uniquement le cas, on aurait mis repeat-x), donc de gauche à droite.
Background-attachment équivaut à l'attachement du fond à la page web. Scroll signifie qu'il ne suit pas la page web lorsqu'elle déroule (à l'inverse de fixed qui déroule en même temps que la page et reste donc fixe)
border-left équivaut à une bordure sur la gauche du corps. Elle sera de 1px de large, de consistance "solide" (c'est à dire sans coupure ou dédoublement) avec une couleur de #095279
border-right est le même procédé sauf que tout ce passe sur la bordure droite.
margin: auto viendra centrer le forum en laissant automatique les marges extérieurs du corps du forum. Il se centre donc automatiquement !
width donne une largeur au corps. On utilise "height" pour sa longueur mais ici, c'est inutile de l'utiliser.
border-right est le même procédé sauf que tout ce passe sur la bordure droite.
margin: auto viendra centrer le forum en laissant automatique les marges extérieurs du corps du forum. Il se centre donc automatiquement !
width donne une largeur au corps. On utilise "height" pour sa longueur mais ici, c'est inutile de l'utiliser.
Afin que le rectangle blanc contenant les publicités soit de la même couleur que le fond intérieur, il faut aller dans les couleurs mettre #052231 en temps que "Couleur du fond de page". Nous allons également colorer les espaces où l'on peut écrire, mettez donc #17344F en temps que "Couleur zones de saisie, menus déroulants et cadre de l'en-tête "
Je rappelle que vous pouvez modifier toutes les couleurs que je propose, tout ceci reste qu'une application et je ne vais pas aborder plusieurs nuances ou tons de thèmes, c'est infini et ça prendrait beaucoup trop de temps pour vous, comme pour moi ;P !
Récapitulatif du CSS :
Précédent Suivant