Aujourd'hui, nous allons voir ce qu'est le code CSS sur les fiches de Forum pour personnaliser ceux-ci!
Alors, tout d’abord, c'est quoi, la fiche CSS du Forum? C'est très simple ♪ Sur votre panneau d'administration de forum (veillez à avoir mis en "avancé" et non "simple" les options), dirigez vous vers la partie "Affichage" puis Image & Couleurs, et enfin couleur. Vous avez deux onglets :
vous cliquerez, bien entendu, sur "Feuille de style CSS" ! Sinon, allez vous achetez des neurones auprès de votre médecin généraliste .w. /ÉVENTAIL/ Je plaisante! ♥ Vous savez bien comment je suis~ 'Fin bref...
Maintenant que nous somme sur votre petite page de CSS, nous allons tenter de réaliser ceci:
Passez la souris sur le texte~
Cela va vous initier à la création de classe!
Tout d’abord, sachez que chaque classe que vous créerez devra obligatoirement commencer avec un . sinon, ça ne fonctionnera pas. Commençons!
Sachez aussi que après le titre de votre classe, il faut ouvrir les
paramètres qui s’appliquerons par un { et à la fin, vous devrez les fermer avec un }. Exemple;
Chaque
paramètres sera sur une ligne. Vous devrez changer de ligne pour en faire un deuxième, sans oublier le ; sinon ça ne marchera pas! Exemple;
.Tuto1 {
paramètre1;
paramètre2;
paramètre3;
}
Si vous avez compris cela, c'est bien, car vous venez d'apprendre comment se constituaient les classes. Nous allons donc passer aux paramètres!
Tout d'abord, il faut définir le police -font, typo, comme vous voulez, en gros, l'écriture choisis- sinon, elle sera automatiquement appliqué comme la police principale de votre forum. Ce paramètre ce nomme
font-family. Nous allons utiliser
Time New Roman en police. Plaçons tout cela ;
.Tuto1 {
font-family: Time New Roman;
}
Une bonne chose de faite! Passons ensuite à la couleur du texte! Il suffit de mettre
color et ensuite, mettre le code couleur souhaiter sous
#000000. J'ai un site pour pouvoir choisir précisément son code couleur :
Clicquez ici et allez tout en bas de la page, a "Codes couleurs personnalisés illimtés". Se que vous devez savoir avec les codes couleurs, c'est qu'ils sont tous constitués de 6 lettres-chiffre.
Ensuite, une fois votre couleur choisis, nous allons placer le paramètre. Je vais, par défaut, utiliser le noir, notifié #000000 en code couleur.
.Tuto1 {
font-family: Time New Roman;
color: #000000;
}
Voilà! Passons ensuite a quelque chose de moins basique. Mais qui le reste quand même ! l'espace entre les lettres qui se notifiera
letter-spacing. Ici, nous allons mettre la police avec -1
px d'écart.
px = une unité de mesure, comme un centimètre par exemple. Ça ferais donc -1 centimètre. Plaçons le:
.Tuto1 {
font-family: Time New Roman;
color: #000000;
letter-spacing: -1px;
}
Bravo, vous avez bien suivit jusqu'ici! Mais ce n'est pas la partie la plus dure~
Ensuite, nous allons mettre une ombre derrière votre police! Ce paramètre se nomme
text-shadow. Plaçon le correctement ;
.Tuto1 {
font-family: Time New Roman;
color: #000000;
letter-spacing: -1px;
text-shadow: #000000 1px 1px 1px;
}
Encore une fois, il y a un code couleur. Choisissez la couleur que vous voulez en ombre derrière votre texte! Ensuite, il faut placer cette ombre, et c'est pour cela que les trois 1
px sont là. si vous mettez 0px partout, l'ombre ne sera pas visible. Si vous mettez "0px 0px 1px", l'ombre se verras juste assez pour donner un effet léger et sympathique. Sinon, mettez les trois px à 1 ou plus, pour voir distinctement l'ombre derrière.
Nous avons près que fini la première partie! Nous allons déterminer la taille du texte grâce à
font-size. Plaçons ce paramètre;
.Tuto1 {
font-family: Time New Roman;
color: #000000;
letter-spacing: -1px;
text-shadow: #000000 1px 1px 1px;
font-size: 20px;
}
Et voilà, nous avons notre première classe de faite! Passons à la deuxième étape!
La deuxième étape consiste a créer un "
hover". Les
hover, c'est quand on passe la souris par exemple sur le texte. C'est pour changer les caractéristiques et paramètres à ce moment là, comme dans l'exemple en début de poste du résultat finale! Vous avez compris? C'est partis! Commençons a écrire la première partie de la classe.
.Tuto1:
hover {
font-family: Time New Roman;
text-shadow: #000000 1px 1px 1px;
color: #000000 ;
font-size: 20px;
}
Nous remettons les mêmes paramètres qu'avant, SAUF pour le
letter-spacing! Au lieu d'enlever de l'espace avec -1
px, nous allons en ajouter en mettant 1
px! Comme ceci:
.
Tuto1:hover {
font-family: Time New Roman;
text-shadow: #000000 1px 1px 1px;
color: #000000 ;
font-size: 20px;
letter-spacing: 1px;
}
Et voilà, le tour est joué! Enregistrez votre feuille de style CSS. Maintenant, nous allons voir comment appliquer cela à un texte.
Imaginons que vous voulez mettre "I Love Breakounet ♥" -je ne me lance pas des fleures!- avec les paramètre que vous venez de créer. Pour ce faire, vous allez marquer:
- Code:
-
<div class="Tuto1">I Love Breakounet ♥</div>
Et voilà, plus qu'à poster et c'est prêt! Le résultat:
I Love Breakounet ♥
Bien entendu, vous pouvez changer le nom de
Tuto1 par ce que vous voulez, mais il faudra changer aussi les parties de même couleur que je vous ai colorer pour que vous compreniez. (Je n'ai pas pu colorer le "Tuto1" dans la baliste div class donc faite attention a bien changer le nom de la classe si vous l'avez changer!)
Voilà, c'était tout pour aujourd'hui! Bybye ♥
Accueil 
