Hello hello...
Avant tout, ce tutoriel s'adresse à ceux ayant déjà quelques notions de CSS.

Nous allons donc utiliser le système de censure de forumactif pour installer ce système.
Je vous recommande d'activer le HTML sur votre forum.

Donc, allons dans cette page de gestion de la censure : Général/Censure/Censure des mots
Ensuite, vous allez ajouter un nouveau mot avec les propriétés suivantes :

Code:

Mot : [exemple]
Remplacement : <span class="exemple">

Validez, puis refaites la même opération avec ceci :

Code:

Mot : [/exemple]
Remplacement : </span>

Validez. Maintenant, il va falloir ajouter les propriétés que vous souhaitez donner au texte, via le CSS, en ajoutant la classe correspondante dans le SF.

Code:

.exemple { propriétés css }

A partir de là, il ne vous reste plus qu'à entrer vos "balises bbcode" lorsque vous le souhaitez dans vos messages.
Attention, elles devront être espacées avant et après des autres mots.

Code:

 [exemple] Texte spécial ici [/exemple]

Petit exemple, sur le SF j'ai rajouté ces propriétés :

Code:

.exemple { text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color: #ffffff; }

Ce qui donne : Texte spécial ici

Wow, super l'astuce, franchement merci !

Salut à toutes et à tous,
tout d abord merci pour cette astuce

Vous pouvez aussi insérer une image quelque soit l'extension, avec
des coins arrondis.
Image par 32px × 32px.
Modifiez comme bon vous semble le lien de l'image

Voici mon code en l'ayant nommé "Bouton".

Code:


.bouton{

background-image: url("LIEN IMAGE x");
background-position:left center;
background-repeat:no-repeat;
padding-top:0,5px;
padding-left:35px;
padding-right:20px;
padding-bottom:20px;

border: 1px solid #FF7900;
-moz-border-radius-top:10px;
-<b class="wbk">Webkit</b>-border-radius-top:10px;
-moz-border-radius: 10px;
-<b class="wbk">Webkit</b>-border-radius: 10px;

text-shadow:0 0 4px white, 0 -5px 4px #9A908A, 2px -10px 6px #9A908A, -2px -15px 11px #9A908A, 2px -25px 18px #9A908A; color: #FF7900;

}

Voici le résultat en image:





En espérant que cela vous servira les ami(e)s.

Milouze14
a++

Bonjour Milouze,

Euh, y a un truc dans ton code qui me parait pas très correct...
Que vient faire ce HTML dans ton code CSS, surtout qu'il n'y en a pas besoin du tout de cette façon ?

Si on donne le même radius qu'aux autres à des coins particuliers, pas besoin de les écrire à part (comme le radius-top de ton exemple).

D'autre part, il manque la ligne "boder-radius" simple qui permet maintenant que Opera voie aussi les coins arrondis.

Donc ça donnerait :

.bouton{
background-image: url('LIEN IMAGE');
widht: 32px; height: 32px;
background-position: left center;
background-repeat: no-repeat;
padding-top: 0,5px;
padding-left: 35px;
padding-right: 20px;
padding-bottom: 20px;

border: 1px solid #FF7900;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

text-shadow:0 0 4px white, 0 -5px 4px #9A908A, 2px -10px 6px #9A908A, -2px -15px 11px #9A908A, 2px -25px 18px #9A908A; color: #FF7900;
}

Salut Final-Blond,

ben tu sais moi, je teste et si çà fonctionne
je le dépose .

Merci à toi pour avoir modifié pour Opera.

Bonne journée mon ami.
Milouze14

"Mon amiE" : Mon pseudo est en anglais = Blonde-Finie

milouze14 a écrit:ben tu sais moi, je teste et si çà fonctionne
je le dépose

Le problème, c'est que nous utilisons plusieurs navigateurs (par nos membres de nos forums et par nos invités), si ça passe avec un ou deux navigateurs, ça ne passera avec d'autres qui seront plus rigoureux.
Il y en a qui sont intraitables avec les erreurs de CSS, et d'autres intraitables avec les erreurs HTML.
Donc avec Opera par exemple, je n'aurais jamais pu voir avec ces erreurs, même si tu avais mis la ligne "border-radius".


Une bonne journée à toi aussi mon ami.

désolé mon amie

Merci pour ce complément d'informations .

A bientôt.

Allez je vais jusqu"à la bise