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

Rejoignez le forum, c'est rapide et facile

Just Be Zen...
Merci d'aller sur : http://im-gs.fr
Just Be Zen...
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-21%
Le deal à ne pas rater :
LEGO® Icons 10329 Les Plantes Miniatures, Collection Botanique
39.59 € 49.99 €
Voir le deal

Tuto CSS

2 participants

Aller en bas

Tuto CSS Empty Tuto CSS

Message par Miettes 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:

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

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

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

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

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

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Miettes 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.
Miettes
Miettes
*** Fondatrice ***
*** Fondatrice ***

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

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

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Miettes 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
Miettes
Miettes
*** Fondatrice ***
*** Fondatrice ***

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Miettes 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
Miettes
Miettes
*** Fondatrice ***
*** Fondatrice ***

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Miettes 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
Miettes
Miettes
*** Fondatrice ***
*** Fondatrice ***

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Miettes 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
Miettes
Miettes
*** Fondatrice ***
*** Fondatrice ***

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

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

waw je savais pas tout ca !
Super Miettes

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

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

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Miettes 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
Miettes
Miettes
*** Fondatrice ***
*** Fondatrice ***

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

https://be-zen.exprimetoi.net

Revenir en haut Aller en bas

Tuto CSS Empty Re: Tuto CSS

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser