AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    ChatBox latérale (avec ou sans transition)

    Partagez
    avatar
    Denkou
    MasculinAge : 21Messages : 46

    le Mer 16 Déc 2009 - 11:21

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Bonjour, voici un code qui vous permettra de faire ceci :

    Spoiler:

    Ensuite, on va aller mettre la chatbox où vous voulez qu'elle soit.

    Si vous voulez qu'elle apparaisse uniquement sur l'index, vous allez dans :
    Panneau d'administration > Affichage > Page d'accueil > Generalité

    Si vous voulez qu'elle apparaisse sur toutes les pages, vous allez dans :
    Panneau d'administration > Affichage > Templates > Général > overhall_header
    Et vous allez mettre le code juste sous la balise body. Pour phpBB2, la balsie body ressemble à ceci :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">




    Puis, vous mettez le code de la chatbox à l'endroit choisi.

    Code normal de la chatbox :
    Code:
    <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; 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>

    Code de la chatbox avec transition fluide :
    Code:
      <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
        <tr>
          <td style="background-color: #ffffff; padding: 2px;">
            <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" 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.left=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'0px':'-804px';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>




    Pour personnaliser, vous pouvez utiliser les codes ci-bas :

    Code normal de la chatbox :
    Code:
    <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="ADRESSE DE L'IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='ADRESSE DE IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMEE':'ADRESSE DE IMAGE OUVRIR';"/></td></tr></table>

    Code de la chatbox avec transition fluide :
    Code:
      <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
        <tr>
          <td style="background-color: #ffffff; padding: 2px;">
            <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
            </iframe>
          </td>
          <td style="vertical-align: bottom;">
            <img src="ADRESSE DE IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.left=(this.src=='ADRESSE DE IMAGE OUVRIR')?'0px':'-804px';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMER':'ADRESSE DE IMAGE OUVRIR';"/>
          </td>
        </tr>
      </table>

    Voilà !




    Important : Faites attention aux " et aux ', sans cela le code ne fonctionne pas.

    Histoire de ne pas avoir 2 ChatBox, allez dans : P.A > Module > ChatBox > Ne plus afficher.

    Voilou !

    Edit Sparrow : veillez à avoir deux adresses d'image DIFFERENTES pour l'ouverture et la fermeture de la CB. Si vous souhaitez mettre la même image, hébergez-la deux fois pour que les adresses soient différentes.

    Vous avez une question ou un problème pour installer ou personnaliser ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


    Dernière édition par Denkou le Mer 16 Déc 2009 - 11:41, édité 1 fois
    avatar
    Lesliie
    FémininAge : 18Messages : 129

    le Sam 30 Juin 2012 - 21:24

    Merci beaucoup ! :)
    avatar
    Ptite-Ly
    FémininAge : 21Messages : 859

    le Mar 3 Juil 2012 - 13:56

    Merci pour le partage! Very Happy
    avatar
    Chocolakato
    FémininAge : 26Messages : 768

    le Mer 1 Aoû 2012 - 19:13

    C'est génial! Mais du coup, je ne peux pas me connecter :'(



    avatar
    Touny
    FémininAge : 20Messages : 2

    le Mer 1 Aoû 2012 - 21:22

    Hello ! C'est super ! Par contre, gros souci peu esthétique : Le bouton "ouvrir " est décalé par rapport au bord de la page et le bouton "fermer" est à 3km de la chatbox, que faire ? :0
    avatar
    Angelusia
    FémininAge : 32Messages : 1159

    le Mar 14 Aoû 2012 - 19:38

    Merci du Tuto :)

    @ Chocolakato : Ce problème est dit plusieurs fois. :)

    Pour te connecter tu remplaces

    Code:
    /chatbox/chatbox.forum?page=front&

    Par :

    Code:
    /chatbox/index.forum?page=front

    @ Touny : Pour enlever l'espacement tu mets dans ta feuille de style css

    Code:
    td, tr, table {padding: 0px}

    C'est ce que j'ai fait pour moi et ça fonctionne :)
    avatar
    Kiwix
    FémininAge : 21Messages : 66

    le Lun 27 Aoû 2012 - 21:29

    Merci beaucoup !
    En revanche, je ne sais pas si c'est mon forum qui bug, mais je n'arrive pas à me connecter..
    avatar
    Snop5
    MasculinAge : 26Messages : 31

    le Sam 29 Sep 2012 - 22:05

    il en est de même pour moi... :/
    Faut faire comment? Sad
    avatar
    Derek Lafleur
    MasculinAge : 41Messages : 30

    le Jeu 1 Nov 2012 - 18:11

    Idem que naruto-seikô , j'ai eu le meme soucis et quand je rentre que le prmier code un autre soucis : je peu pas me connecter et je n'ai pas les smileys ,la barre de texte et les options qui vont avec.

    Quelqu'un pourrait il me guider ?

    Merci :)
    avatar
    Missa
    FémininAge : 20Messages : 54

    le Lun 5 Nov 2012 - 11:38

    Bonjour,

    J'ai utilisé ce code qui marchais très bien mais depuis hier, je ne peux pas me connecter à la chatbox :/



    avatar
    Chucky'
    MasculinAge : 19Messages : 80

    le Dim 11 Nov 2012 - 17:31

    merci



    avatar
    Jeckle
    MasculinAge : 27Messages : 18

    le Lun 10 Déc 2012 - 9:42

    Merci ♥
    avatar
    Clémentine
    FémininAge : 24Messages : 201

    le Sam 29 Déc 2012 - 17:33

    Merci ♪



    avatar
    Samluna
    FémininAge : 17Messages : 96

    le Sam 5 Jan 2013 - 22:20

    THANKS !!!!! :3

    Là où je l'ai mis : http://the-vd-the-early.forums-rpg.com/




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    avatar
    bibi0712
    FémininAge : 39Messages : 66

    le Dim 3 Fév 2013 - 16:59

    Bonjour
    Je me demandais si c'était possible de mettre l'image "Fermer" sur le haut plutôt que sur le côté droit .
    J'ai déjà essayé mais je n'y arrives pas , alors je me dis que je n'ai peut être pas regardé correctement mais en fait je ne
    sais même pas si cela est faisable ^^
    Bonne journée et merci pour toutes les astuces ^^
    avatar
    Leiden
    FémininAge : 26Messages : 25

    le Sam 23 Mar 2013 - 16:22

    Merci beaucoup !
    Par contre, du coup, mon forum met longtemps à charger la page d'accueil. C'est normal ?

    Edit : autant pour moi ! Ca ne venait pas de la Chatbox et c'est réglé Very Happy
    avatar
    Cléophé
    FémininAge : 23Messages : 5

    le Mer 27 Mar 2013 - 22:53

    Est-ce qu'il faut créer une fenêtre HTML pour mettre ce code ou elle existe déjà ? (je débute et je suis un peu perdu ^^' et j'utilise forumactif)
    avatar
    Max Rénix
    MasculinAge : 22Messages : 55

    le Lun 8 Avr 2013 - 22:58

    merci
    avatar
    Siobhan
    FémininAge : 26Messages : 34

    le Mer 22 Mai 2013 - 15:18

    @Derek Lafleur a écrit:Idem que naruto-seikô , j'ai eu le meme soucis et quand je rentre que le prmier code un autre soucis : je peu pas me connecter et je n'ai pas les smileys ,la barre de texte et les options qui vont avec.

    Quelqu'un pourrait il me guider ?

    Merci :)

    Bonjour,
    Déjà merci pour ce code c'est vraiment mieux que la CB traditionnelle Wink
    Par contre j'ai un petit soucis qui semble venir de là :
    dans mes sujets , je n'ai plus la barre d'édition des messages Sad

    Je pense que c'est lié car je n'ai pas touché à autre chose aujourd'hui et lorsque j'enlève le script dans le template tout est bon .

    Spoiler:

    Vous pourriez m'aider ?
    avatar
    Siobhan
    FémininAge : 26Messages : 34

    le Mer 22 Mai 2013 - 15:28

    Pardon je voulais supprimer mon message précédent pour le mettre dans la bonne catégorie : aide aux tutos >.<
    avatar
    Rapsodie♥
    FémininAge : 24Messages : 63

    le Sam 1 Juin 2013 - 14:52

    Un énorme merci ! Je voulais faire ça depuis longtemps. Je n'est pas de problèmes de connexion ou autres mais néanmoins je me permet de vous poser une question :

    Je voudrais que la chat box ne soit affichée que sur le coté dans cette onglet mais quand je mets "activer la chat box : non", et que je clique sur l'onglet ce la écrit : la chat box n'est pas activée.

    Pouvez-vous m’aider ? Merci d'avance :)



    - Ecrire, c'est ranger le bordel qu'on a dans sa tête. -
    avatar
    Louna Luna
    FémininAge : 21Messages : 123

    le Jeu 6 Juin 2013 - 20:23

    Merci !



    avatar
    Kiryuu02
    FémininAge : 28Messages : 25

    le Dim 4 Aoû 2013 - 4:37

    Merci pour le tuto
    avatar
    Offrande
    FémininAge : 25Messages : 186

    le Dim 20 Oct 2013 - 10:50

    Merci beaucoup pour le partage, je vais tester cette petite astuce de suite !
    Bonne journée.
    avatar
    Alec Sing Toa
    FémininAge : 25Messages : 65

    le Mer 8 Jan 2014 - 23:31

    Merci pour ce tutoriel, il est très pratique.
    avatar
    Noruenu
    FémininAge : 24Messages : 119

    le Jeu 9 Jan 2014 - 20:51

      Merci du partage !  :hug: 
    Contenu sponsorisé


      La date/heure actuelle est Lun 1 Mai 2017 - 0:25