Tuto CSS
2 participants
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:
- body {
background-color: #e5e5e5;
background-image: url("https://i.servimg.com/u/f22/11/41/10/83/64291210.jpg");
background-attachment: scroll;
scrollbar-face-color: #dee3e7;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #dee3e7;
scrollbar-3dlight-color: #d1d7dc;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #efefef;
scrollbar-darkshadow-color: #98aab1;
background-attachment: fixed;
text-align: center;
}
font,th,td,p {
font-family: Comic; }
a:link,a:active,a:visited {
color : #000000;
text-align: center;
}
a:hover{
text-decoration: underline;
color : #000000;
}
hr{
height: 0px;
border: solid #ffffff 0px;
border-top-width: 1px;
}
.bodyline{
background-color: #ffffff;
border: 1px #006699 solid;
}
.bodylinewidth {
width:80%}
.forumline{
background-color: #000000;
border: 2px # solid;
text-align: center;
color: #ffffff;
}
td.row1{
background-color: #ffffff;
}
td.row2{
background-color: #ffffff;
}
td.row3{
background-color: #ffffff;
}
td.rowpic {
background-color: #000000;
background-image: url("https://i.servimg.com/u/f22/11/41/10/83/90175510.png");
}
th {
color: #000000;
font-size: 16px;
font-weight : bold;
text-transform: Capitalize;
background-color: #ffff99;
height: 25px;
background-image: url("https://i.servimg.com/u/f22/11/41/10/83/90175510.png");
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url("https://i.servimg.com/u/f22/11/41/10/83/90175510.png");
background-color:#ffff99;
border: #d9ac59;
border-style: solid;
height: 28px;
}
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold;
border: #ffffff;
border-style: solid;
height: 28px;
}
td.row3Right,td.spaceRow {
background-color: #ffffff;
border: #d9ac59;
border-style: solid;
}
td.pourcentback {
background-color : #e5e5e5;
}
th.thHead,td.catHead {
font-size: 14px;
border-width: 1px 1px 0px 1px;
}
th.thSides,td.catSides,td.spaceRow {
border-width: 0px 1px 0px 1px;
}
th.thRight,td.catRight,td.row3Right {
border-width: 0px 1px 0px 0px;
}
th.thLeft,td.catLeft {
border-width: 0px 0px 0px 1px;
}
th.thBottom,td.catBottom {
border-width: 0px 1px 1px 1px;
}
th.thTop {
border-width: 1px 0px 0px 0px;
}
th.thCornerL {
border-width: 1px 0px 0px 1px;
}
th.thCornerR {
border-width: 1px 1px 0px 0px;
}
.maintitle{
font-weight: bold;
font-size: 30px;
font-family: Comic;
line-height : 185%;
color : #000000;
text-align: center;
Text-decoration: underline;
}
.gen {
font-size : 16px;
Font-style: italic;
height: 22px;
line-height : 170%;
color: #000000;
}
.genmed {
font-size : 16px;
Font-style: italic;
}
.gensmall {
font-size : 14px;
}
.genmed,.gensmall {
color : #5e4a2c;
height: 20px;
line-height : 135%;
}
a.gen,a.genmed,a.gensmall {
color: #5e4a2c;
text-decoration: none;
}
a.gen:hover,a.genmed:hover,a.gensmall:hover{
color: #5e4a2c;
text-decoration: underline;
}
.mainmenu{
font-size : 14px;
color : #5e4a2c}
a.mainmenu{
text-decoration: none;
color : #5e4a2c;
text-align: center;
}
a.mainmenu:hover{
text-decoration: underline;
color : #5e4a2c;
}
.cattitle{
font-weight: bold;
font-size: 16px ;
letter-spacing: 1px;
color : #000000;
text-transform: Capitalize;
}
a.cattitle{
text-decoration: none;
color : #000000;
text-align: center;
text-transform: Capitalize;
}
a.cattitle:hover{
text-decoration: underline;
}
.forumlink{
font-weight: bold;
font-size: 16px;
color : #000000;
text-align: center;
text-transform: Capitalize;
}
a.forumlink {
text-decoration: none;
color : #000000;
text-align: center;
text-transform: Capitalize;
}
a.forumlink:hover{
text-decoration: underline;
color : #000000;
text-align: center;
}
.nav{
font-weight: bold;
font-size: 14px;
color : #000066;
text-transform: Capitalize;
height: 22px;
line-height : 170%;
}
a.nav{
text-decoration: none;
color : #000000;
}
a.nav:hover{
text-decoration: underline;
}
.topictitle,h1,h2{
font-weight: bold;
font-size: 16px;
color : #000000;
text-align: center;
}
a.topictitle:link{
text-decoration: none;
color : #000000;
}
a.topictitle:visited{
text-decoration: none;
color : #000000;
}
a.topictitle:hover{
text-decoration: underline;
color : #000000;
}
.name{
font-size : 16px;
color : #000000;
text-align: center;
}
.postdetails{
font-size : 16px;
color : #000000;
text-align: center;
}
.postbody{
font-size : 14px;
line-height: 18px;
color: #000000;
}
a.postlink:link{
Text-decoration: underline overline;
color : #000000}
a.postlink:visited{
Text-decoration: underline overline;
color : #000000;
}
a.postlink:hover{
Text-decoration: underline overline;
color : #000000}
.code{
font-family: Comic;
font-size: 14px;
color: #000000;
background-color: #e8dbb1;
border: #000000 dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}
.quote{
font-family:Comic;
font-size: 14px;
color: #000000;
line-height: 125%;
background-color: #e8dbb1;
border: #000000 dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}
.copyright{
font-size: 12px;
font-family: Comic;
color: #000000;
letter-spacing: -1px;
}
a.copyright{
color: #000000;
text-decoration: none;
text-align: center;
}
a.copyright:hover {
color: #000000;
text-decoration: underline;
}
.coloradmin {
color: #FF0000;}
.colormod {
color: #669933;}
img{
border:0}
input,textarea, select {
color : #000000 !important ;
font: normal 14px Comic;
border-color : #000000 !important;
}
input.post, textarea.post, select {
background-color : #FFFFFF;
}
input {
text-indent : 4px;
}
input.button {
background-color : #ffffcc;
color : #000000;
font-size: 14px;
font-family: Comic;
}
input.mainoption {
background-color : #ffffcc;
font-weight : bold;
}
input.liteoption {
background-color :#ffffcc;
font-weight : normal;
}
.helpline {
background-color: #f7d3f2;
border-style: none;
}
input {
background-color: #f7d3f2;
}
@import url("form_ie.css");
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
waw je savais pas tout ca !
Super Miettes
Super Miettes
m54- *** Membre ***
- Nombre de messages : 120
Age : 33
Date d'inscription : 30/08/2007
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
Just Be Zen... :: Informatique :: Help
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum