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
    Nephilime
    FémininAge : 21Messages : 147

    le Mer 30 Déc 2015 - 23:47

    Merci beaucoup pour ce code et les explications qui vont m'être bien utiles !
    avatar
    SamLine
    FémininAge : 18Messages : 26

    le Mer 17 Fév 2016 - 19:34

    Merci beaucoup !
    avatar
    Lizbeth
    FémininAge : 19Messages : 136

    le Mar 22 Mar 2016 - 13:32

    Merci !
    avatar
    InfiniKey
    FémininAge : 30Messages : 46

    le Mer 23 Mar 2016 - 19:55

    Merci beaucoup ^^
    avatar
    Globule
    FémininAge : 17Messages : 47

    le Sam 14 Mai 2016 - 11:03

    Merci !
    avatar
    Caroline Forbes
    FémininAge : 19Messages : 22

    le Dim 15 Mai 2016 - 19:39

    Merci !
    avatar
    Ariemm
    FémininAge : 16Messages : 99

    le Dim 22 Mai 2016 - 15:52

    merchi ^^
    avatar
    Aidden
    MasculinAge : 22Messages : 44

    le Ven 19 Aoû 2016 - 15:36

    Est-il possible de faire apparaitre et disparaitre la chatbox avec déplacement visible de cette dernière ? Plutôt que de la voir apparaitre ou disparaitre, on la verrait s'ouvrir doucement (un peu comme le centre de notification sur un smartphone, mais horizontalement)
    avatar
    P'tite
    FémininAge : 18Messages : 26

    le Jeu 1 Sep 2016 - 4:15


    Un énorme remerciement pour ce tutoriel, il me servira à coup sûr ! :yaay:
    avatar
    kaitorla
    MasculinAge : 27Messages : 12

    le Ven 9 Sep 2016 - 15:09

    mercii ^^
    avatar
    Yukimura Esuki
    MasculinAge : 21Messages : 114

    le Ven 21 Oct 2016 - 2:21

    Merci beaucoup ! Very Happy
    avatar
    Baby Pikachu
    FémininAge : 20Messages : 72

    le Jeu 12 Jan 2017 - 18:56

    Merci !
    avatar
    Cloudygirl
    FémininAge : 32Messages : 65

    le Jeu 2 Fév 2017 - 23:22

    Merci bien pour le partage, ça va m'être bien utile ! =)
    avatar
    Flavien1309
    MasculinAge : 23Messages : 38

    le Mar 21 Fév 2017 - 23:17

    merci !
    avatar
    Shylanova
    FémininAge : 27Messages : 19

    le Lun 17 Avr 2017 - 23:36

      Un super merci !! Very Happy
    avatar
    Lie_MADcircus
    MasculinAge : 24Messages : 35

    le Lun 1 Mai 2017 - 3:49

    Merci.
    avatar
    Jenova
    MasculinAge : 22Messages : 120

    le Jeu 11 Mai 2017 - 15:35

    merci je jette un coup d'oeil !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 25 Mai 2017 - 20:13