Hello !
Après un temps, j'ai remarqué que la chatbox si elle était placé en haut du forum, elle était certes pleine à craqué, mais esthétiquement parlant, c'était pas top. Si elle était placé en bas, elle était vide et toujours aussi peu esthétique. Pourquoi ne pas la mettre sur le côté alors ?
Il y a trois façons différentes de mettre la chatbox. La première est à gauche, la deuxième est aussi à gauche mais avec un effet de coulissement et la troisième est à la droite du forum avec ce même effet de coulissement.
Voici la marche à suivre ;
ÉTAPE 1 ; En premier nous devons configurer la chatbox.
( panneau d'administration ▷ modules ▷ chatbox ▷ configuration ) Vous cochez OUI à activer la chatbox. Pour l'affichage de la chatbox, vous choisissez ne pas afficher.
ÉTAPE 2 ; Vous devez copier/coller le code du modèle de chatbox que vous désirez dans une page HTML.
( panneau d'administration ▷ modules ▷ html & javascript ▷ gestions des pages html ▷ créer une nouvelle page ) N'oubliez pas de cocher non à utiliser le haut et le bas de votre forum et utiliser cette page en tant que page d'accueil. Vous pouvez ensuite valider votre code.
CHATBOX À GAUCHE ; - Code:
-
jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td><iframe src="/chatbox/index.forum?page=front" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'chatboxpop\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );
CHATBOX À GAUCHE AVEC COULISSEMENT ; - Code:
-
jQuery(document).ready(function() { jQuery('body').append('<div style="position: fixed; bottom: 50px; height: 400px; left: 0px; z-index:10000;"><iframe src="/chatbox/index.forum?page=front" id="chatboxpop" scrolling="none" style="width: 800px; height: 400px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="float:left"><img src="http://img11.hostingpics.net/pics/490741ouvrir.png" id="chatboxopen"/><img src="http://img11.hostingpics.net/pics/901968fermer.png" id="chatboxclose" style="display:none;"></div></div>'); } );
CHATBOX À DROITE AVEC COULISSEMENT ; - Code:
-
jQuery(document).ready(function() { jQuery('body').append('<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:1000;"><iframe src=/chatbox/index.forum?page=front" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 600px; height: 350px; display: none; float:right;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery('#chatboxpop').animate({width:'toggle'},1200); jQuery('#chatboxopen,#chatboxclose').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://img11.hostingpics.net/pics/490741ouvrir.png" id="chatboxopen"/><img src="http://img11.hostingpics.net/pics/901968fermer.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );
ÉTAPE 3 ; Maintenant que les deux premières étapes sont faites, vous pouvez maintenant mettre votre chatbox sur votre forum. Pour ce faire, vous devrez copier/coller le code suivant dans la description de votre forum. Vous n'aurez qu'à modifier le chiffre 6 par celui de votre page HTML.
- Code:
-
<script type=text/javascript src=/-h6.htm></script>
Le tutoriel est maintenant terminé ! J'espère vous avoir aidé. ^^
Si vous rencontrez un problème n'hésitez pas à le dire, je me ferai un plaisir de vous aider au maximum de mes capacités.
Accueil 
