Je commence par une chatbox latérale tout en html très très simple.

Grâce à ce code, vous obtiendrez ceci :





Donc, ce code consiste à faire en sorte que la chatbox de son forum, au lieu de se trouver tout en haut ou tout en bas du forum comme nous le proposer habituellement forumactif, puisse se placer sur la droite ou la gauche et être rétractable. Ainsi, avec un bouton judicieusement placer, vous pourrez ouvrir ou fermer votre chatbox.
C'est-y pas beau ?

Allez go, on attaque, vous verrez c'est bête comme choux !

Voici le code en question :

Code:

<table style="position: fixed; bottom: 150px; right: 0px;background-color: #0F3E6A;z-index:10000;"><tr><td>
<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 850px; height: 390px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="LIEN DE VOTRE BOUTON OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'block':'none';this.src=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'LIEN DE VOTRE BOUTON FERMER':'LIEN DE VOTRE BOUTON OUVRIR';"/>
</td></tr></table>

Ce code est tout en html et il est à placer dans le message d'accueil de votre forum. Pas de panique, il n'y apparaîtra pas comme tel, enfin sauf si vous avez oublier d'activer le html.
Donc, se rendre ici : "Panneau de configuration --> Affichage --> Généralités --> Message sur la page d'accueil"


Houlala, ça m'a l'air un peu compliqué tout ce charabia de code, alors on va détailler !

Code:

<table style="position: fixed; bottom: 150px; right: 0px;background-color: #0F3E6A;z-index:10000;">

position: fixed: 150px <-- fixe la position de votre chatbox. Vous pouvez régler sa hauteur sur votre page en pixel (150px dans mon exemple).
right: <-- signifie ici que la chatbox se trouve à droite du forum. Pour l'avoir à gauche, mettez left à la place.
background-color: #0F3E6A <-- c'est tout simplement la couleur qui entourera l'image de votre bouton "ouvrir/fermer" de la chatbox. Là, vous pouvez changer comme bon vous semble.

Code:

<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 850px; height: 390px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe>

Nous plaçons ici la chatbox dans une iframe. Ainsi, vos boutons "ouvrir/fermer" serons visible sur la droite ou la gauche de votre forum, suivant où vous désirez votre chatbox. Vous verrez que lorsque vous monter et descendez dans votre forum, le bouton "ouvrir/fermer" reste toujours à l'écran, ainsi votre chatbox sera toujours visible peu importe où vous vous trouvez sur votre page d'accueil.

width: 850px; height: 390px; <-- il s'agit de la taille de votre chatbox. Vous pouvez la modifier comme bon vous semble, mais veillez toutefois à ne pas la faire trop grande ni trop petite. Comme elle apparaîtra sur votre page d'accueil, vous devez faire en sorte qu'elle soit certes visible, mais qu'elle ne cache pas non plus toute votre page à l'écran.

Code:

<td style="vertical-align: bottom;"><img src="LIEN DE VOTRE BOUTON OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'block':'none';this.src=(this.src=='LIEN DE VOTRE BOUTON OUVRIR')?'LIEN DE VOTRE BOUTON FERMER':'LIEN DE VOTRE BOUTON OUVRIR';"/>

Toute cette partie concerne les boutons "ouvrir/fermer" de votre chatbox.
Partout où vous voyez "LIEN DE VOTRE BOUTON OUVRIR", vous devrez placer l'adresse d'hébergement de votre image du bouton ouvrir. Cela implique donc de devoir créer ce fameux bouton et de l'héberger sur un site comme imageshack par exemple.
Idem pour le bouton fermer qui est donc à placer là où c'est marqué "LIEN DE VOTRE BOUTON FERMER".

Petit détail à savoir : une fois connecté comme utilisateur sur votre chatbox, que vous laissiez ouverte ou fermée votre chatbox à l'aide du bouton OUVRIR/FERMER, vous resterez toujours connecté à votre chatbox, ce qui peut être bien pratique pour naviguer plus aisément sur votre page d'accueil.

Et voilà, c'est fini pour ce premier tuto !

Enfin, là c'est vraiment du très très simple, pour le prochain je partirais dans quelque chose de plus compliqué. Faut bien vous faire souffrir un peu !

Cool ! J'hésitais justement à me lancer là-dedans, mais si c'est quelqu'un comme toi qui explique, c'est encore mieux 8D Merci pour ce topic

C'est une idée génial, merci merci merci Marc, sa va m'aider
C'est vrai que c'est toi qui tes occupé du design du forum, je devrais m'y mettre mais j'ai peur que soit trop difficile. Avec tes explications sa parait plus facile

Ca semble difficile, mais en réalité ça ne l'est pas tant que ça.
Avec l'habitude ça va tout seul, le tout est de comprendre quel code fait quoi. ^^

Ca me fait penser Mirage qu'il faudrait que tu actives le html de ton forum : Panneau de configuration --> Messages et Emails --> Configuration --> Autoriser le html

Je l'ai fait

Pixel ma sauveuse ♥♥♥♥ :<3: