communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Débutant] Personnalisation de la page d'accueil d'un forum.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Illustre illustrateur
avatar
Cassie
Illustre illustrateur
Féminin Date d'inscription : 23/04/2011
Age : 19

MessageSujet: [Débutant] Personnalisation de la page d'accueil d'un forum.   Sam 19 Jan 2013, 18:02

Bonjour à tous ! Very Happy
Je vous propose aujourd'hui un tutoriel pour personnaliser la page d'accueil de votre forum, à savoir la barre de navigation, la cadre et les catégories. Je tiens à préciser que pour pouvoir réaliser ce tutoriel, vous devez obligatoirement avoir le statut d'administrateur sur le forum concerné, et donc avoir accès au panneau d'administration. Le forum doit aussi être en version PHPBB2.

I) Cadre du forum.
Le cadre du forum, c’est tout simplement ce qui entoure toute la partie « intérieure » du forum (les catégories, header, les sujets..). Dans le cas de Sims Artists, le cadre est simplement une bordure blanche, d’un pixel. Je vais vous montrer comment le personnaliser un peu plus, en ajoutant par exemple une ombre, l’épaissir, le doubler, ou même le mettre en pointillés. Smile

Tout va se passer dans la feuille de CSS du forum (Panneau d’administration > Affichage > Couleurs > Feuille de CSS). Pour en savoir plus sur l’utilité de la feuille de CSS, je vous invite fortement à faire un petit tour sur le tutoriel de Fuyaya. Smile

Bien, vous êtes dans votre fiche CSS. Et maintenant ? Et bien, vous allez commencer à créer un code ! En CSS, chaque partie du forum a un nom, que l’on utilise pour commencer le code. Le nom pour le cadre du forum est « .bodyline ». Lorsque vous créez des codes, vous devez obligatoirement les placer entre « { } » dans la fiche de CSS, sans quoi ils seront inutiles. Voilà donc comment commence votre code :

Code:
.bodyline {

}

Maintenant, il faut le remplir d’attributs, comme par exemple une bordure ou une ombre portée. Je vais vous faire pour exemple quelque chose qui ressemblera à ça :

Spoiler:
 

Je rajoute donc au cadre normal un peu d’épaisseur, je le change en pointillés et je lui ajoute une ombre noire. Voilà à quoi ressemblera le code :

Code:
.bodyline {
border: 3px dotted black;
box-shadow: 0px 0px 3px black;
}

/!\ N’oubliez pas qu’après chaque attribut, il faut ajouter un « ; » pour bien le séparer de tous les autres. Donc..
- l’attribut border correspond bien évidemment à la bordure, qui mesure en l’occurrence 3 pixels, dotted pour les pointillés et black pour la couleur. Pour faire une ligne en continue, la valeur ne sera pas « dotted » mais « solid ».
- l’attribut box-shadow sert à ajouter une ombre à la border, le premier 0px correspond au décalage de l’ombre vers la droite, le deuxième 0px au décalage vers le bas et le 3px correspond au degrés de flou de l’ombre. Donc si vous voulez une simple ombre derrière la bordure, sans aucun décalage, vous n’allez mettre plusieurs pixels qu’au dernier chiffre. Quand au black, c’est la couleur de l’ombre.

Il n’existe pas beaucoup d’autres attributs pour personnaliser le cadre d’un forum, donc je ne donne que cela. Smile



Dernière édition par - CASSOU* le Sam 27 Avr 2013, 18:09, édité 4 fois
Revenir en haut Aller en bas
Illustre illustrateur
avatar
Cassie
Illustre illustrateur
Féminin Date d'inscription : 23/04/2011
Age : 19

MessageSujet: Re: [Débutant] Personnalisation de la page d'accueil d'un forum.   Sam 19 Jan 2013, 18:08

II) Catégories du forum.
Les catégories sont les titres des parties du forum (Règlement et mode d’emplois du forum, Présentations, Absences, Espace Invités…). Pour Sims Artists, les catégories sont des écritures non personnalisées. Je vais vous apprendre les différents attributs qui sont à votre disposition pour embellir tout ça, comme par exemple une ombre au texte, une autre police, une autre couleur… Very Happy

Comme pour le cadre, tout passe par la fiche de CSS, et c’est donc là-bas que vous devez vous rendre pour personnaliser vos catégories. Et comme tous les parties d’un forum, en CSS, les catégories ont aussi un nom, comme je l’ai dit plus haut ! Cette fois-ci, ce n’est pas « .bodyline », mais « .forumlink ».

Je vais vous montrer un code pour obtenir un résultat comme celui-ci :

Spoiler:
 

Je modifie donc la police, la couleur du texte et la taille. Je met plus d’espace entre chaque lettre, je rajoute une ombre de la même couleur que le texte et je met le texte en italique.

Code:
.forumlink {
font-family: times new roman;
font-size: 25px;
color: hotpink;
text-shadow: 0px 0px 3px hotpink;
letter-spacing: 2px;
font-style:italic;
}

Ca commence à faire un bon petit code ça ! Donc..
- font-family, pour changer la police du texte.
- font-size, pour changer la taille.
- color, pour changer bien évidemment la couleur.
- text-shadow, pour ajouter une ombre au texte.
- letter-spacing, pour mettre plus d’espace entre chaque lettre. Il est possible d’enlever de l’espace entre chaque lettre en mettant par exemple -2px au lieu de 2px.
- font-style, pour mettre le texte en italique. Pour le mettre en gras, la valeur ne sera pas « italic » mais « bold ».

Pour les catégories, ont peu ajouter beaucoup de choses encore, je me limite pour ne pas en mettre trop et que ça devienne donc trop chargé. Smile Mais on peut mettre une marge (décaler le texte à gauche ou à droite), l’encadrer, le tourner légèrement, le faire clignoter etc…



Dernière édition par - CASSOU* le Sam 19 Jan 2013, 18:19, édité 1 fois
Revenir en haut Aller en bas
Illustre illustrateur
avatar
Cassie
Illustre illustrateur
Féminin Date d'inscription : 23/04/2011
Age : 19

MessageSujet: Re: [Débutant] Personnalisation de la page d'accueil d'un forum.   Sam 19 Jan 2013, 18:18

III) Barre de navigation.
La barre de navigation, c’est-ce qui se trouve juste en dessous de la bannière du forum (Accueil, Déconnexion, Messagerie, Profil, Membres, Groupes…). Il est possible de la personnaliser aussi, en ajouter exactement les mêmes choses que les catégories, ou presque ! Smile

Cette fois-ci, le nom de la partie du forum est « .mainmenu », le code commencera donc par cela. Voici le rendu qu’aura chaque lien après avoir mis le code dans la fiche de CSS toujours :

Spoiler:
 

Je n’utilise pas les mêmes attributs que pour les catégories, mais je pourrais. :DJe change donc la police, la taille et la couleur aussi. Je met toutes les lettres en majuscules et je rajoute un soulignement d’une autre couleur que le lien.

Code:
.mainmenu {
font-family: fangsong;
font-size: 16px;
color: olive;
text-transform: uppercase;
border-bottom: 1px solid indianred;
}

- text-transform, pour mettre toutes les lettres en majuscules. J’ai utilisé « uppercase » pour les mettres en majuscules, et je peux utiliser « lowercase » pour toutes les mettre en minuscules.
- border-bottom, pour rajouter une bordure en bas. Je peux utiliser « border-left » pour la mettre à gauche, « border right » pour la mettre à droite et « border-top » pour la mettre en haut. Si je veux totalement encadrer le cadre, et au lieu de répéter quatre fois l’action, je vais mettre direction « border ».

Comme pour les catégories, au niveau de la barre de navigation, on peut ajouter encore beaucoup d’attributs, comme l’ombre portée, l’espace diminué ou agrandi entre les lettres, enfin, la plupart de ceux que j’ai cité, et même d’autres encore. Very Happy

******
J'espère que ce tutoriel vous servira et qu'il est clair. :)Si quelque chose vous chagrine, n'hésitez pas à m'en faire part !

Bonne journée à tous ! I love you


MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée

Revenir en haut Aller en bas
As de l'acrylique
avatar
lolitaitu
As de l'acrylique
Féminin Date d'inscription : 11/07/2010
Age : 23
Localisation : Marseille

MessageSujet: Re: [Débutant] Personnalisation de la page d'accueil d'un forum.   Sam 19 Jan 2013, 18:37

Merci pour le tuto.
Revenir en haut Aller en bas
Admin
avatar
Delise
Admin
Féminin Date d'inscription : 05/04/2012
Age : 39
Localisation : Lyon

MessageSujet: Re: [Débutant] Personnalisation de la page d'accueil d'un forum.   Dim 17 Fév 2013, 10:19

Merci pour le tuto ! Smile




   
Sign by Lady, merci ♥ ♥
Spoiler:
 
Revenir en haut Aller en bas
Contenu sponsorisé


MessageSujet: Re: [Débutant] Personnalisation de la page d'accueil d'un forum.   

Revenir en haut Aller en bas
 
[Débutant] Personnalisation de la page d'accueil d'un forum.
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Connexion page d'accueil. Pourquoi faire ?
» [Blog] Page d'accueil pour navigateur Internet
» Changement page accueil hattrick
» page d'accueil youtube
» Messages gratuits: L'annuaire des sites

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: