Citations/codes/spoiler personnalisables ^^

voici un code que j'ai fais hier pour pouvoir personnaliser les citations/codes et spoiler ^^.

Il faut savoir que les balises des ces trois éléments sont les suivantes :

citation => quote
code => code
spoiler => spoiler

Maintenant afin de les personnaliser comme vous le souhaiter, voici un code de base :

Code:: .quote {

border [vous pouvez différencier les quatre cotés avec top[haut], bottom[bas], left[gauche] et right[droite]): taille en px color type;
-moz-border-radius: (vous aurez ainsi un bord arrondi) Xpx;
font-family:(pour avoir une écriture différente);
font-size: (la taille de l'écriture) Xpx;
color: (couleur de l'écriture);
background-color: (couleur de fond);
background-image:(image de fond) url("url de votre image");
background-repeat:(pour répéter ou non le fond) no-repeat[pas de répétition], repeat[répétition totale], repeat-x [en largeur], repeat-y [en longeur].
overflow:(sers à mettre une barre de défilement sur le coté) auto [se mettra automatiquement si vous dépassez la hauteur mise]; scroll [mettra automatique la barre même si la hauteur est pas dépassée;
height (hauteur de votre citation, elle sera toujours de cette hauteur) Xpx;
max-height (cela permet de mettre une hauteur max qui une fois dépassée, mettra en place la fonction overflow et donc la barre de défilement) Xpx;
width: (largeur de votre citation) Xpx;

voici un exemple que j'ai fais hier :

exemple

Vous pouvez appliquer ce code aux autres balises de votre forum ^^

Voilà ^^

Merci beaucoup pour le partage ^^
Seulement que le lien vers ton exemple ne marche pas ><

ah je le reup ^^ (petit soucis de ftp =/)

maintenant c'est bon ^^

Invité

L'effet est génial , merci beaucoup lichan , cela va aider plein de membres Citations/codes/spoiler personnalisables ^^ 644124

Heureuse que ça aide ^^ (c'est fait pour ^^)

Merci beaucoup =)
C'est très utile ( je ne savais pas ce code x) )

je l'ai appris en bidouillant ^^

Bon alors j'ai un ti soucis ><"

Voici le code que j'ai mis:

Code:: .quote spoiler code {
border-top: 1px dotted #ffffff;
border-bottom: 1px dotted #ffffff;
border-left: 1px dotted #ffffff;
border-right: 1px dotted #ffffff;
-moz-border-radius: 10px;
font-family:Commic sans MS;
font-size: 12px;
color: #ffffff;
background-color: #000000;
background-image: none;
background-repeat: no-repeat;
overflow: none;
height 5px;
max-height: none;
width: 35px;}

C'est donc censé me donner des bords arrondis avec un contour blanc dans un fond noir et une écriture blanche.
Jusqu'a ce que je ne rajoute pas spoiler et code en haut, mes citations et spoiler était correcte, comme je les attendais, mais pas mes codes. Donc il y a un problème, parceque la ils sont comme ils devraient être sans code.
On peut m'aider ? lol

Déjà fait un code par balise :

.quote
.code
.spoiler

(ça sera mieux)

alors voyons ce qui cloche ^^

Citation :: .quote spoiler code {
border-top: 1px dotted #ffffff;
border-bottom: 1px dotted #ffffff;
border-left: 1px dotted #ffffff;
border-right: 1px dotted #ffffff;
-moz-border-radius: 10px;
font-family:Comic sans MS;
font-size: 12px;
color: #ffffff;
background-color: #000000;
height 5px; <= je pense que 5 pixel de hauteur c'est pas assez ^^;;;
width: 35px; <= idem}

Voilà essaye ^^

tu mettrait combien si tu pense que c'est pas assez ? J'ai vraiment mis au pif au metre ><"

sa va mieux comme ca merci

width: 6OOpx;
Height: 250px;

Voilà ce que je te conseillerai ^^

Ok merci je vais de suite modifier ^^

J'ai eu beau chercher, je ne comprends pas mon erreur. La barre de défilement ne marche pas chez moi, le fond & le contour non plus.. ça me fait seulement un fond blanc.. j'aurai fais une erreur ? >>

J'ai fais copier/coller pour chaque Code Quote & Spoiler mais la barre de défilement ne marche que pour le Code .
& pour le spoiler c'est complétement bizarre le truc..

Spoiler:

Code:: .quote {

border: #ffffff 3px solid;
-moz-border-radius: 10px;
font-size: 11px;
color-background: #383633;
font-family: Courier new;
-color: #8d7864;
height: 250px;
max-height: 250px;
overflow: scroll;
width: 400px;

}

Merci beaucoup en tout cas pour ce super tuto!

Coucou,

Pour le spoiler, fais ceci :

Code:: .spoiler_content {
border: #ffffff 3px solid;
-moz-border-radius: 10px;
font-size: 11px;
color-background: #383633;
font-family: Courier new;
-color: #8d7864;
height: 250px;
max-height: 250px;
overflow: scroll;
width: 400px;}

Merci ça a marchéééé =D

& pour le reste tu saurais ? ^^

» Codes CSS & titre
» Section codes
» Thèmes F.A, des thèmes, des ressources, des codes et astuces !