AccueilDernières imagesRechercherS'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.

Le Deal du moment : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.99 €

    ChatBox latérale (avec ou sans transition)

    Denkou
    Denkou
    MasculinAge : 28Messages : 46

    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
    Angie Harkness
    Angie Harkness
    FémininAge : 41Messages : 725

    Ven 10 Jan 2014 - 3:14

    Merci c'est super^^
    melimêlo
    melimêlo
    FémininAge : 32Messages : 25

    Jeu 23 Jan 2014 - 18:02

    Merci Denkou pour le tuto permettant de mettre une cb latérale. J'ai réussi sans difficultés grâce à cette explication claire, précise, et surtout accessible pour les débutants en codage comme moi :p
    Maintenant je vais essayer de la mettre sur toutes les pages :p
    Black Diamond
    Black Diamond
    FémininAge : 35Messages : 90

    Mar 28 Jan 2014 - 22:50

    Ouah merci beaucoup c'est génial *o*



    chatbox d�roulante(indique - ChatBox latérale (avec ou sans transition) - Page 6 134089sihgzr

    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Mer 29 Jan 2014 - 2:22

    merci !



    chatbox d�roulante(indique - ChatBox latérale (avec ou sans transition) - Page 6 Ye49
    Saphiina
    Saphiina
    FémininAge : 30Messages : 26

    Dim 30 Mar 2014 - 21:14

    Merci Very Happy
    Loca63
    Loca63
    FémininAge : 25Messages : 11

    Mer 16 Avr 2014 - 20:01

    Merci ^^
    Araik
    Araik
    FémininAge : 29Messages : 250

    Jeu 1 Mai 2014 - 16:53

    Vraiment très pratique et très simple a utilisé en plus.
    Merci



    chatbox d�roulante(indique - ChatBox latérale (avec ou sans transition) - Page 6 Signat15
    Eilema
    Eilema
    Autre / Ne pas divulguerAge : 32Messages : 62

    Mar 13 Mai 2014 - 10:36

    Merci



    chatbox d�roulante(indique - ChatBox latérale (avec ou sans transition) - Page 6 1454137076-many-corgis-by-wildguardian-d6dfyv1-little
    Lisou
    Lisou
    FémininAge : 24Messages : 351

    Jeu 15 Mai 2014 - 16:03

    Merci, j'en avais besoin !
    Ashem
    Ashem
    FémininAge : 39Messages : 255

    Mer 11 Juin 2014 - 18:41

    Bonjour !

    Je dois probablement être la seule... mais chez moi ça bug !!

    Enfin j'ai essayer les deux version et l'une comme l'autre, le bouton ouvrir fermer prend toute la largeur de la page. Et je n'arrive pas a comprendre pourquoi.

    Si quelqu'un a une idée.... Je suis preneuse, merci d'avance.
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Jeu 12 Juin 2014 - 9:55

    Ashem, les questions sont à poster là (c'est indiqué dans le rappel "règlement du forum" avant les messages, pense à le lire. Il est différent dans chaque section) : https://www.never-utopia.com/f22-un-probleme-en-codage



     
    Anonymous
    Invité

    Ven 11 Juil 2014 - 15:15

    Merchiiiii!
    Schnappi
    Schnappi
    FémininAge : 33Messages : 113

    Mar 22 Juil 2014 - 19:04

    coucou,

    J'ai un petit soucis, j'ai utilisé la technique à placer dans le template, sauf que malgré tous mes essais je n'arrive pas a savoir comment modifier le fond Sad c'est pas faute d'avoir essayé Sad (placer des background-color partout, rajouter des !important mais rien n'y fait)

    Quelqu'un a une solution à ça ?
    Pokebip
    Pokebip
    MasculinAge : 26Messages : 69

    Lun 29 Sep 2014 - 20:55

    Denkou a écrit:Bonjour, voici un code qui vous permettera de faire ceci :

    Spoiler:

    Pour cela, allez dans P.A > Affichage > Generalité et dans le fenêtre Htlm inserer se code :

    Code:

    <table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.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>



    Pour personaliser :

    Code:

    <table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td>
    <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 690px; height: 390px; 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 L'IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE L'IMAGE OUVRIR')?'ADRESSE DE L'IMAGE FERMEE':'ADRESSE DE L'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.

    Edit pokebip: Pas mal, à ajouter pour une nouvelle version.Le sonore de la chat box au contact du message.
    Matantelie
    Matantelie
    FémininAge : 30Messages : 36

    Mer 5 Nov 2014 - 20:03

    MERCI
    Manue
    Manue
    FémininAge : 44Messages : 58

    Mer 7 Jan 2015 - 13:26

    Merci beaucoup !
    Anonymous
    Invité

    Sam 28 Mar 2015 - 18:27

    J'avais déjà vu cela sur plusieurs forums et l'idée m'intéresse réellement pour avoir une ChatBox plus accessible et moins encombrante ! Merci beaucoup !
    Tameless+
    Tameless+
    FémininAge : 27Messages : 252

    Mar 31 Mar 2015 - 21:27

    Woaaaa *-* j'adore les CB latérale, merci *o*



    chatbox d�roulante(indique - ChatBox latérale (avec ou sans transition) - Page 6 LwrfNGA
    LOUVE ☽
    LOUVE ☽
    FémininAge : 34Messages : 53

    Ven 1 Mai 2015 - 22:29

    merci :)
    xToshi-Shûx
    xToshi-Shûx
    Autre / Ne pas divulguerAge : 33Messages : 39

    Mar 28 Juil 2015 - 14:27

    Merci x)



    Sachem
    Sachem
    FémininAge : 28Messages : 51

    Mer 29 Juil 2015 - 14:29

    Merci! C:
    kiracamus
    kiracamus
    FémininAge : 38Messages : 18

    Dim 20 Sep 2015 - 15:19

    Superbe affichage de la box, merci
    Anonymous
    Invité

    Dim 20 Sep 2015 - 22:35

    Merci (*≧▽≦)
    BlondieMood
    BlondieMood
    FémininAge : 27Messages : 18

    Ven 6 Nov 2015 - 16:57

    ooooh *-* merci
    Mordiern
    Mordiern
    FémininAge : 47Messages : 285

    Dim 22 Nov 2015 - 10:31

    Merci pour le partage :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 6:11