[Tuto] Feuille CSS pour forum phpbb2

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]

bonjour bonjour Smile

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("http://i22.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("http://i22.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("http://i22.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("http://i22.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)

_________________

SoP Story :: 2ème votes éliminatoires

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

Spoiler:

¤ .bodyline : ça c'est pour le contour de votre forum, le cadre quoi Smile

¤ .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:

_________________

SoP Story :: 2ème votes éliminatoires

¤ 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)

Spoiler:

¤ .gensmall : je ne sais pas trop comment l'expliquer, alors ça correspond à ce qui est en bleu sur l'image ci dessus.

¤ 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

Spoiler:

_________________

SoP Story :: 2ème votes éliminatoires

¤ .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)

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 nécessaire pour comprendre le CSS. Si vous avez des questions, n'hésitez pas Wink

_________________

SoP Story :: 2ème votes éliminatoires