Just Be Zen...
Merci d'aller sur : http://im-gs.fr

Tuto CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tuto CSS

Message par Miettes le Lun 17 Déc - 13:42

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)
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 13:59

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:
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 14:14

¤ .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:
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 14:27

¤ 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.
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 14:40

¤ 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:
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 14:56

¤ .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 necessaire pour comprendre le CSS
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 15:05

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
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 15:09

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
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Lun 17 Déc - 15:12

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 Smile

n'oubliez pas de séparer chacun de vos codes par un ";"

Si vous avez des questions, n'hésitez pas Smile
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par m54 le Mer 19 Déc - 11:52

waw je savais pas tout ca !
Super Miettes

m54
*** Membre ***
*** Membre ***

Nombre de messages : 120
Age : 26
Date d'inscription : 30/08/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Miettes le Mer 19 Déc - 14:52

et bien voilà Smile

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
avatar
Miettes
*** Fondatrice ***
*** Fondatrice ***

Nombre de messages : 1705
Age : 30
Date d'inscription : 11/07/2007

Voir le profil de l'utilisateur http://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Re: Tuto CSS

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum