Personaliser vos messages, topic, post & autres

Aujourd'hui, je vais vous donnez quelques code de ma réalisation pour personaliser vos messages sur le forum. Car, il est clai que niveau présentation, ici, c'est pas la joie --'
Donc voila, ces codes sont en HTML, je les utilise et je vous recommande des les utiliser non pas dans la catégorie jeux, mais lorsque vous poster une présentation, une annonces, un message important, etc

1) Les barres de titre

Citation :

TITRE EXEMPLE 1

Code:

[color=black][u][b]<div style="margin-bottom: 10px; background: #b2ccff; padding: 6px; height:auto; border: 2px solid #80aaff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><img src="http://imgur.com/T5Yc3.png" alt="" style="padding-right: 6px; vertical-align: middle;" />VOTRE TEXTE ICI</div>[/b][/u][/color]

Citation :

TITRE EXEMPLE 2

Code:

[color=black][u][b]<div style="margin-bottom: 10px; background: #b8e5a1; padding: 6px; height:auto; border: 2px solid #99e573; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><img src="http://imgur.com/OfPe3.png" alt="" style="padding-right: 6px; vertical-align: middle;" />VOTRE TEXTE ICI</div>[/b][/u][/color]

Citation :

TITRE EXEMPLE 3

Code:

[color=black][b][u]<div style="margin-bottom: 10px; background: #ffe5b2; padding: 6px; height:auto; border: 2px solid #ffd580; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><img src="http://imgur.com/8CbGc.png" alt="" style="padding-right: 6px; vertical-align: middle;" />VOTRE TEXTE ICI</div>[/u][/b][/color]

Citation :

TITRE EXEMPLE 4

Code:

[color=black][u][b]<div style="margin-bottom: 10px; background: #ffb2b2; padding: 6px; height:auto; border: 2px solid #ff8080; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><img src="http://imgur.com/0waNu.png" alt="" style="padding-right: 6px; vertical-align: middle;" />VOTRE TEXTE ICI</div>[/b][/u][/color]

2) Les textes préformatés:

Message 1 a écrit:

~ Salut ! ~

VOTRE TEXTE

~ Bye ! ~

✔ Message Joffrey4 V2.0
Ce message respecte les règles

Code:

[center][img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_1.png[/img]
[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Salut ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]

Votre TEXTE

[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Bye ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]
[img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_1.png[/img][/center]
[size=9][right][color=green]✔[/color][font=Arial Black][b]      [/b][/font]Message Joffrey4 [color=green][b]V2.0[/b][/color]
Ce message respecte [url=http://animalcrossing.forumactif.com/regles-du-forum-f5/][u]les règles[/u][/url][/right][/size]

Message 2 a écrit:

~ Salut ! ~

VOTRE TEXTE

~ Bye ! ~

✔ Message Joffrey4 V2.0
Ce message respecte les règles

Code:

[spoiler][center][img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_2.png[/img]
[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Salut ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]

VOTRE TEXTE

[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Bye ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]
[img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_2.png[/img][/center]
[size=9][right][color=green]✔[/color][font=Arial Black][b]      [/b][/font]Message Joffrey4 [color=green][b]V2.0[/b][/color]
Ce message respecte [url=http://animalcrossing.forumactif.com/regles-du-forum-f5/][u]les règles[/u][/url][/right][/size]

Message 3 a écrit:

~ Salut ! ~

Votre TEXTE

~ Bye ! ~

✔ Message Joffrey4 V2.0
Ce message respecte les règles

Code:

[center][img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_3.png[/img]
[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Salut ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]

Votre TEXTE

[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Bye ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]
[img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_3.png[/img][/center]
[size=9][right][color=green]✔[/color][font=Arial Black][b]      [/b][/font]Message Joffrey4 [color=green][b]V2.0[/b][/color]
Ce message respecte [url=http://animalcrossing.forumactif.com/regles-du-forum-f5/][u]les règles[/u][/url][/right][/size]

Message 4 a écrit:

~ Salut ! ~

VOTRE TEXTE ICI

~ Bye ! ~

✔ Message Joffrey4 V2.0
Ce message respecte les règles

Code:

[center][img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_4.png[/img]
[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Salut ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]

VOTRE TEXTE

[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Bye ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]
[img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/Showcase_Div_4.png[/img][/center]
[size=9][right][color=green]✔[/color][font=Arial Black][b]      [/b][/font]Message Joffrey4 [color=green][b]V2.0[/b][/color]
Ce message respecte [url=http://animalcrossing.forumactif.com/regles-du-forum-f5/][u]les règles[/u][/url][/right][/size]

Message 5 a écrit:

~ Salut ! ~

VOTRE TEXTE

~ Bye ! ~

✔ Message Joffrey4 V2.0
Ce message respecte les règles

Code:

[center][img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/ShinySwap2.png[/img]
[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Salut ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]

VOTRE TEXTE

[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]~ Bye ! ~[img]http://i722.photobucket.com/albums/ww228/doomwyte/rose.png[/img]
[img]http://i389.photobucket.com/albums/oo338/Vhale_Web/Banners/ShinySwap2.png[/img][/center]
[size=9][right][color=green]✔[/color][font=Arial Black][b]      [/b][/font]Message Joffrey4 [color=green][b]V2.0[/b][/color]
Ce message respecte [url=http://animalcrossing.forumactif.com/regles-du-forum-f5/][u]les règles[/u][/url][/right][/size]

3) Modifier le favicon de votre topic:
Avant toute chose, sachez que modifier le favicon d'un topic est temporaire et sans danger. Il ne provoque aucun ralentissement et s'enlève dès que vous enlevrez le code suivant dans votre message.
Pour ceux qui ne savent pas ce que c'est, le favicon est le petit logo, différent pour tout les sites, qui se trouve a gauche dans votre onglet & à gauche de votre barre de navigation !

Code:

<link rel="shortcut icon" href="URL-DU-FAVICON" type="image/x-icon" /><link rel="icon" href="URL-DU-FAVICON" type="image/x-icon" />

Il vous suffit de remplacer les deux URL-DU-FAVICON par une adresse comme http://exemple.com/favicon.ico.
Si vous désirer réaliser un favicon via une image qui se trouve sur votre pc, il vous suddit de me faire un ptit MP et je vous réenverrai un lien a mettre dans ce code
Attention: Ce code ne sera pas visible sur votre message... vous verrai à la place 2 ligne ou il n'y a rien. C'est pour cela que je conseille de la mettre en fin de message !
Si vous désirez un exemple, il vous suffit de regarder la barre des tache et vous verrai que le favicon n'est plus le même ^^

4) Titres simple: [color=red]
Voici des titres simple, et 100% personalisable !

Citation :

MON TEXTE

Code:

<div style="border-bottom:1px solid #00ff00;"><div style="padding-bottom:4px; font-size:15px;"><div style="background-color:#00ff00; width:20px; height:20px; margin-right:5px; float:left"><img src="http://home-of-stolle.de/board/images/headlineD.png" /></div><b>MON TEXTE</b></div></div>

Citation :

MON TEXTE

Code:

<div style="border-bottom:1px solid #1166ff;"><div style="padding-bottom:4px; font-size:15px;"><div style="background-color:#1166ff; width:20px; height:20px; margin-right:5px; float:left"><img src="http://home-of-stolle.de/board/images/headlineD.png" /></div><b>MON TEXTE</b></div></div>

Citation :

MON TEXTE

Code:

<div style="border-bottom:1px solid #ee0000;"><div style="padding-bottom:4px; font-size:15px;"><div style="background-color:#ee0000; width:20px; height:20px; margin-right:5px; float:left"><img src="http://home-of-stolle.de/board/images/headlineD.png" /></div><b>MON TEXTE</b></div></div>

Citation :

MON TEXTE

Code:

<div style="border-bottom:1px solid #eeee00;"><div style="padding-bottom:4px; font-size:15px;"><div style="background-color:#eeee00; width:20px; height:20px; margin-right:5px; float:left"><img src="http://home-of-stolle.de/board/images/headlineD.png" /></div><b>MON TEXTE</b></div></div>

Citation :

MON TEXTE

Code:

<div style="border-bottom:1px solid #9900ee;"><div style="padding-bottom:4px; font-size:15px;"><div style="background-color:#9900ee; width:20px; height:20px; margin-right:5px; float:left"><img src="http://home-of-stolle.de/board/images/headlineD.png" /></div><b>MON TEXTE</b></div></div>

Je ne vous ai montré ici que des couleurs simple... Mais vous aller pouvoir faire des titres de la couleur que vous voulez ! Pour cela, allez sur http://code-couleur.com/ pour choisir votre couleur.
Ensuite, il vous suffit de prendre de code et d'y remplacer les deux champs #XXXXXX par le code de votre couleur... et puis vous poster sur votre sujet

Code:

<div style="border-bottom:1px solid #XXXXXX;"><div style="padding-bottom:4px; font-size:15px;"><div style="background-color:#XXXXXX; width:20px; height:20px; margin-right:5px; float:left"><img src="http://home-of-stolle.de/board/images/headlineD.png" /></div><b>MON TEXTE</b></div></div>

Attention: votre code couleur doit commencer par # et contenir 6 caractères !

5) Barres de progression:
Voici deux barres de progression. Celles-ci sont comme les titres du dessus, vous pouvez personnalisez les couleurs mais c'est un peux plus complexe. Donc si vraiment vous avez besoin d'une autre couleur, c'est pas MP

Citation :

TEXTE

   41%

Code:

<div>TESTE <div style="background:url(http://home-of-stolle.de/board/images/progress_back.png) repeat-x; border:1px solid black; width:50%; height:18px;"><div style="background-color:#0000ff;width:XX%; height:9px;"></div><div style="background-color:#0000ff; width:XX%; height:9px; opacity:0.8;"></div></div><div style="color:#ffffff; font-weight:bold; margin-top:-19px; position:absolute;">   XX%</div></div>

Remplacer TEXTE par du texte ^^ et les trois XX% par le pourcentage de votre barre de progression !

Citation :

TEXTE

   80%

Code:

<div>TEXTE <div style="background:url(http://home-of-stolle.de/board/images/progress_back.png) repeat-x; border:1px solid black; width:50%; height:18px;"><div style="background-color:#ff0000;width:XX%; height:9px;"></div><div style="background-color:#ff0000; width:XX%; height:9px; opacity:0.8;"></div></div><div style="color:#000000; font-weight:bold; margin-top:-19px; position:absolute;">   XX%</div></div>

Remplacer TEXTE par du texte ^^ et les trois XX% par le pourcentage de votre barre de progression !

6) Prolonger sa signature: News !
Minimax nous à limiter la taille de la signature... je vous propose donc un code pour maintenir cette limite tout en la ralongeant ^^

Code:

[table border="1"][tr][td] <div style="width:695px;height:275px;overflow:scroll;">
VOTRE SIGNATURE ICI
</div> [/td][/tr][/table]

Copier/coller l'entierté de ce code dans votre signature et remplacer le "VOTRE SIGNATURE ICI" par votre signature


7) Ecrire un titre plus grand que la valeur maximale:
Voici maintenant une petite astuce html qui vous permet, comme pour le litre de ce sujet, d'écrire plus grand que 24px ! ().

Code:

 [size=24]<FONT SIZE=7>[u][b][color=black][font=Arial Black]EXEMPLE TEXTE[/font][/color][/b][/u]</FONT>[/size]

Voila . Alors, vous allez me demander si on peu aller plus haut que sept... et c'est non ! Si vous remplacer la valeur 7 pas 189, la police ne sera pas plus grande car elle est déjà a valeur maximale !

Les fautes d'orthographes
C'est toujours plus beau un message sans fautes volontaire ou involontaire, donc, préférez Firefox qui souligne et corrige vos fautes

Voila, j'espère que ce topic vous aidera et rendra ce forum plus beau (car le but est d'utiliser ceci ^^) et bye !

_______________________________________

Meurci encore Joffreynouney ! =D

J'espère que ça vous aideraaa ~

Hey,
Un petit UP !
Je viens de mettre a jour les codes existants et j'en ai rajouté des nouveau ^^
Enjoyed
Pas besoin de répondre car je saurais si vous les utilisez en regardant le forum et puis lubna va supprimer vos message ^^.
Voila; bye !