Tuto CSS
Just Be Zen... :: Informatique :: Help
Page 1 sur 1•
Tuto CSS
bonjour bonjour 
Certains d'entres vous ignore encore ce qu'est le CSS, et bien grace à celui ci, vous pouvez TOUT changer sur votre forum.
Vous pouvez mettre des images de fond partout, changer les écritures de chaque colonne etc...
¤ Mais comment ça marche?
Le CSS se présente sous cette forme (celui ci est celui de mon forum)
du chinois hein?
et bien nous allons apprendre petit à petit comment l'utiliser (bien entendu, ne faites pas ces changements directement sur votre forum hein ^^ utilisez un forum de test)
Certains d'entres vous ignore encore ce qu'est le CSS, et bien grace à celui ci, vous pouvez TOUT changer sur votre forum.
Vous pouvez mettre des images de fond partout, changer les écritures de chaque colonne etc...
¤ Mais comment ça marche?
Le CSS se présente sous cette forme (celui ci est celui de mon forum)
- Spoiler:
du chinois hein?
et bien nous allons apprendre petit à petit comment l'utiliser (bien entendu, ne faites pas ces changements directement sur votre forum hein ^^ utilisez un forum de test)
Re: Tuto CSS
nous allons donc d'abord voir point par point comment ça se présente :
¤ Body : correspond au fond de votre forum
¤ font,th,td,p : permet de modifier l'écriture de votre forum
¤ a:link,a:active,a:visited : ça, c'est pour les liens , ceux qui sont actifs et ceux que vous avez déjà visité
¤ a:hover: pour modifier ce qu'il se passe quand vous passer votre souris sur le lien
¤ hr : correspond à la barre de séparation entre le nom et la date du sujet et votre message
¤ Body : correspond au fond de votre forum
¤ font,th,td,p : permet de modifier l'écriture de votre forum
¤ a:link,a:active,a:visited : ça, c'est pour les liens , ceux qui sont actifs et ceux que vous avez déjà visité
¤ a:hover: pour modifier ce qu'il se passe quand vous passer votre souris sur le lien
¤ hr : correspond à la barre de séparation entre le nom et la date du sujet et votre message
- Spoiler:
Re: Tuto CSS
¤ .bodyline : ça c'est pour le contour de votre forum, le cadre quoi 
¤ .bodylinewidth : correspond à la largeur en % de votre forum (par exemple : 80% de l'écran)
¤ .forumline : correspond au "quadrillage" du forum et au contour des catégories
¤ td.row1 / td.row2 / td.row3 : correspondent respectivement à la premiere, troisième et "surlignement de la colonne 1" , deuxième et quatrième colonne
¤ .bodylinewidth : correspond à la largeur en % de votre forum (par exemple : 80% de l'écran)
¤ .forumline : correspond au "quadrillage" du forum et au contour des catégories
- Spoiler:
¤ td.row1 / td.row2 / td.row3 : correspondent respectivement à la premiere, troisième et "surlignement de la colonne 1" , deuxième et quatrième colonne
- Spoiler:
Re: Tuto CSS
¤ td.rowpic : permet de modifier le fond de la case qui se trouve sous "sujet, message, dernier message"
¤ th : permet de modifier tout ce qui se trouve sur la ligne "forum, sujet, message, nouveau message"
¤ td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom: permet de modifier toute la case correspondant au nom de la catégorie. (dans les images : "Votre 1ere catégorie")
on va passer quelques points, car je ne suis pas sure à 100% de leur utilité; continuons :
¤ .maintitle : ça, c'est le titre de votre forum
¤ .gen: correspond au petit texte sous votre titre
¤ .genmed : ça c'est pour les explications de vos catégories (en rose sur l'image ci dessous)
¤ .gensmall : je ne sais pas trop comment l'expliquer, alors ça correspond à ce qui est en bleu sur l'image ci dessus.
¤ th : permet de modifier tout ce qui se trouve sur la ligne "forum, sujet, message, nouveau message"
¤ td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom: permet de modifier toute la case correspondant au nom de la catégorie. (dans les images : "Votre 1ere catégorie")
on va passer quelques points, car je ne suis pas sure à 100% de leur utilité; continuons :
¤ .maintitle : ça, c'est le titre de votre forum
¤ .gen: correspond au petit texte sous votre titre
¤ .genmed : ça c'est pour les explications de vos catégories (en rose sur l'image ci dessous)
- Spoiler:
¤ .gensmall : je ne sais pas trop comment l'expliquer, alors ça correspond à ce qui est en bleu sur l'image ci dessus.
Re: Tuto CSS
¤ a.gen,a.genmed,a.gensmall : pour modifier la couleur est l'écriture des liens se trouvant à cette endroit.
¤ a.gen:hover,a.genmed:hover,a.gensmall:hover : pour modifier ce qu'il se passe lorsque la souris passe sur un lien de cet endroit
¤ .cattitle / a.cattitle / a.cattitle:hover: correspond au texte de votre catégorie (ici le texte est "Votre 1ère catégorie")
¤ .forumlink / a.forumlink / a.forumlink:hover : correspond au nom de chaque forum
¤ .nav : correspond au ":" que vous voyez en orange sur l'image ci dessous
¤ a.nav : correspond à ce qu'il y a en vert sur l'image ci dessous
¤ a.gen:hover,a.genmed:hover,a.gensmall:hover : pour modifier ce qu'il se passe lorsque la souris passe sur un lien de cet endroit
¤ .cattitle / a.cattitle / a.cattitle:hover: correspond au texte de votre catégorie (ici le texte est "Votre 1ère catégorie")
¤ .forumlink / a.forumlink / a.forumlink:hover : correspond au nom de chaque forum
¤ .nav : correspond au ":" que vous voyez en orange sur l'image ci dessous
¤ a.nav : correspond à ce qu'il y a en vert sur l'image ci dessous
- Spoiler:
Re: Tuto CSS
¤ .topictitle,h1,h2 : correspond aux textes "annonce" et "post it"
¤ a.topictitle:link : correspond au nom de chaque forum
¤ a.topictitle:visited : correspond au nom de chaque forum que vous avez lu
¤ a.topictitle:hover : correspond à ce qui se passe quand on passe la souris sur un des noms de forum
¤ .name : ça c'est la couleur du nom de chaque posteur
¤ .postdetails : pour modifier la couleur de la date du dernier message du forum, ainsi que le nom de message et de sujet dans le forum
¤ .postbody : pour modifier la couleur d'écriture des messages
¤ a.postlink:link : pour modifier la couleur des liens dans les messages
¤ a.postlink:hover : pour modifier ce qu'il se passe quand on met la souris sur un lien dans un message
¤ .code : sert à modifier la mise en page lorsque l'on met un texte entre [code ][/code ]
¤ .quote : sert à modifier la mise en page lorsque l'on met un texte entre [quote ][/quote ]
¤ .copyright / a.copyright / a.copyright:hover : tout ce qui concerne ce qui est écrit en bas du forum (en rose sur l'image)
¤ .coloradmin : inutile si vous avez fait un groupe particulier
¤ img : permet de mettre un contour lorsque l'on met une image dans un message
¤ input.post, textarea.post, select : correspond au fond de l'endroit où l'on écrit le message
Voilà ce fut long mais necessaire pour comprendre le CSS
¤ a.topictitle:link : correspond au nom de chaque forum
¤ a.topictitle:visited : correspond au nom de chaque forum que vous avez lu
¤ a.topictitle:hover : correspond à ce qui se passe quand on passe la souris sur un des noms de forum
¤ .name : ça c'est la couleur du nom de chaque posteur
¤ .postdetails : pour modifier la couleur de la date du dernier message du forum, ainsi que le nom de message et de sujet dans le forum
¤ .postbody : pour modifier la couleur d'écriture des messages
¤ a.postlink:link : pour modifier la couleur des liens dans les messages
¤ a.postlink:hover : pour modifier ce qu'il se passe quand on met la souris sur un lien dans un message
¤ .code : sert à modifier la mise en page lorsque l'on met un texte entre [code ][/code ]
¤ .quote : sert à modifier la mise en page lorsque l'on met un texte entre [quote ][/quote ]
¤ .copyright / a.copyright / a.copyright:hover : tout ce qui concerne ce qui est écrit en bas du forum (en rose sur l'image)
- Spoiler:
¤ .coloradmin : inutile si vous avez fait un groupe particulier
¤ img : permet de mettre un contour lorsque l'on met une image dans un message
¤ input.post, textarea.post, select : correspond au fond de l'endroit où l'on écrit le message
Voilà ce fut long mais necessaire pour comprendre le CSS
Re: Tuto CSS
Voyons maintenant quelques points important pour modifier votre CSS :
¤ Soulignement : Text-decoration: underline
¤ Ligne au dessus: Text-decorartion: overline
¤ Ligne au dessus et en dessous: Text-decoration: underline overline
¤ Mise en italique : Font-style: italic
¤ Mise en Gras: Font-weight: Bold
¤ Modification de la taille : font-size: Xpt (X est le chiffre correspondant à la taille désirée)
¤ Modification de la couleur : color: #xxxxxx (les xxxxxx correspondent à un code de couleur de votre choix).[pour les codes, allez ici ]
¤ Soulignement Coloré: Text-decoration: #xxxxxx underline
¤ Modification de la police: font-family: Verdana (remplacez Verdana par le nom de la police désirée)
¤ Suppression d' un soulignement: text-decoration: none
¤ Texte en petites Majuscules : font-variant: small-caps
¤ Mise en Majuscules: text-transform: Capitalize
¤ Mise en Minuscules : text-transform: lowercase
¤ Soulignement : Text-decoration: underline
¤ Ligne au dessus: Text-decorartion: overline
¤ Ligne au dessus et en dessous: Text-decoration: underline overline
¤ Mise en italique : Font-style: italic
¤ Mise en Gras: Font-weight: Bold
¤ Modification de la taille : font-size: Xpt (X est le chiffre correspondant à la taille désirée)
¤ Modification de la couleur : color: #xxxxxx (les xxxxxx correspondent à un code de couleur de votre choix).[pour les codes, allez ici ]
¤ Soulignement Coloré: Text-decoration: #xxxxxx underline
¤ Modification de la police: font-family: Verdana (remplacez Verdana par le nom de la police désirée)
¤ Suppression d' un soulignement: text-decoration: none
¤ Texte en petites Majuscules : font-variant: small-caps
¤ Mise en Majuscules: text-transform: Capitalize
¤ Mise en Minuscules : text-transform: lowercase
Re: Tuto CSS
Voyons maintenant ce qui concerne les bordures :
Il existe 4 bordures : la bordure superieure (border-top), la bordure inférieure (border-bottom), la droite et la gauche (respectivement border-right et border-left)
Les 4 bordures sont regroupées sous le terme border.
¤bordure normale : border: solid
¤ en pointillés: border: dotted
¤ en petits tirets: border: dashed
¤ en relief double: border: groove
¤ en relief creusé: border: inset
¤ en reliel exterieur : border: outset
¤ double: border: double
Il existe 4 bordures : la bordure superieure (border-top), la bordure inférieure (border-bottom), la droite et la gauche (respectivement border-right et border-left)
Les 4 bordures sont regroupées sous le terme border.
¤bordure normale : border: solid
¤ en pointillés: border: dotted
¤ en petits tirets: border: dashed
¤ en relief double: border: groove
¤ en relief creusé: border: inset
¤ en reliel exterieur : border: outset
¤ double: border: double
Re: Tuto CSS
Pour aligner son texte :
¤ à gauche: text-align: left
¤ au centre: text-align: center
¤ à droite: text-align: right
Et pour les fonds de celllule :
¤ en couleur : background: #XXXXXX
¤ une image: background-image: url('adresseurldel'image')
¤ transparent : background: transparent
et voilà, vous savez à peu près tout
n'oubliez pas de séparer chacun de vos codes par un ";"
Si vous avez des questions, n'hésitez pas
¤ à gauche: text-align: left
¤ au centre: text-align: center
¤ à droite: text-align: right
Et pour les fonds de celllule :
¤ en couleur : background: #XXXXXX
¤ une image: background-image: url('adresseurldel'image')
¤ transparent : background: transparent
et voilà, vous savez à peu près tout
n'oubliez pas de séparer chacun de vos codes par un ";"
Si vous avez des questions, n'hésitez pas
Re: Tuto CSS
et bien voilà 
moi j'ai appris en bidouillant, et j'avoue qu'il y a encore des choses que j'ignore, mais pour personnaliser un max son forum, rien de tel que le CSS
moi j'ai appris en bidouillant, et j'avoue qu'il y a encore des choses que j'ignore, mais pour personnaliser un max son forum, rien de tel que le CSS




















