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 : -25%
PC Portable Gamer 16,1” HP Victus 16 – 16 ...
Voir le deal
749.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
    Nephilime
    Nephilime
    FémininAge : 29Messages : 147

    Mer 30 Déc 2015 - 23:47

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

    Mer 17 Fév 2016 - 19:34

    Merci beaucoup !
    Lizbeth
    Lizbeth
    FémininAge : 27Messages : 164

    Mar 22 Mar 2016 - 13:32

    Merci !
    InfiniKey
    InfiniKey
    FémininAge : 38Messages : 58

    Mer 23 Mar 2016 - 19:55

    Merci beaucoup ^^
    Globule
    Globule
    FémininAge : 25Messages : 52

    Sam 14 Mai 2016 - 11:03

    Merci !
    Pretty Girl
    Pretty Girl
    FémininAge : 26Messages : 29

    Dim 15 Mai 2016 - 19:39

    Merci !
    Ari
    Ari
    FémininAge : 23Messages : 109

    Dim 22 Mai 2016 - 15:52

    merchi ^^
    Aidden
    Aidden
    MasculinAge : 30Messages : 45

    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)
    P'tite
    P'tite
    FémininAge : 26Messages : 26

    Jeu 1 Sep 2016 - 4:15


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

    Ven 9 Sep 2016 - 15:09

    mercii ^^
    Yukimura Esuki
    Yukimura Esuki
    MasculinAge : 28Messages : 131

    Ven 21 Oct 2016 - 2:21

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

    Jeu 12 Jan 2017 - 18:56

    Merci !
    Cloudygirl
    Cloudygirl
    FémininAge : 40Messages : 66

    Jeu 2 Fév 2017 - 23:22

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

    Mar 21 Fév 2017 - 23:17

    merci !
    Shylanova
    Shylanova
    FémininAge : 35Messages : 32

    Lun 17 Avr 2017 - 23:36

      Un super merci !! Very Happy
    Lie_MADcircus
    Lie_MADcircus
    MasculinAge : 32Messages : 37

    Lun 1 Mai 2017 - 3:49

    Merci.
    Jenova
    Jenova
    MasculinAge : 30Messages : 153

    Jeu 11 Mai 2017 - 15:35

    merci je jette un coup d'oeil !



    ChatBox latérale (avec ou sans transition) - Page 7 I3k3
    Kizuro hoki
    Kizuro hoki
    MasculinAge : 29Messages : 45

    Mar 27 Juin 2017 - 0:34

    Merci !
    Jixdu
    Jixdu
    FémininAge : 23Messages : 40

    Jeu 29 Juin 2017 - 22:12

    Merci beaucoup !
    Emy Liddell
    Emy Liddell
    FémininAge : 32Messages : 29

    Jeu 6 Juil 2017 - 13:02

    merci, je chercher comment la cacher : 3



    Audeol
    Audeol
    FémininAge : 31Messages : 11

    Jeu 6 Juil 2017 - 18:41

    Un tout grand merci, elle rend super bien sur mon forum !
    Simple petite question : est-il possible de faire exactement la même chose mais en ayant la chatbox sur la droite de la page ? Comme j'ai déjà une colonne à gauche, mon forum fait un peu chargé sur la gauche alors qu'il n'y a rien à droite.

    Sinon tout est nickel !
    Audeol
    Audeol
    FémininAge : 31Messages : 11

    Dim 9 Juil 2017 - 0:39

    UP?
    DarkWrestler.
    DarkWrestler.
    MasculinAge : 29Messages : 36

    Mer 23 Aoû 2017 - 15:55

    Merci
    ThunderTB
    ThunderTB
    MasculinAge : 40Messages : 15

    Ven 22 Sep 2017 - 16:57

    Merci !!
    Mariana Greyson
    Mariana Greyson
    FémininAge : 26Messages : 78

    Dim 3 Déc 2017 - 16:38

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:54