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 en panneau latéral

    Partagez
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 8 Mai 2015 - 18:58

    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


    Chatbox en panneau latéral




    PHPBB2 - Aperçu - code légendé - CSS et templates - affichage uniquement sur la page d'accueil


    /!\ Avant toute chose regardez bien comment ça marche: à l'ouverture la chatbox fait se décaler tout le forum ! Ca ne fonctionnera pas bien avec un forum trop large.



    Cocher des trucs


    Vous pouvez aussi afficher la CB en haut et en bas de page si vous le souhaitez. Rendez-vous dans votre panneau d'administration > Modules > ChatBox > Configuration et cochez les trucs comme suit !
    Activer la CB: OUI
    Afficher les avatars: OUI
    Affichage de la CB: NE PAS AFFICHER
    (oui c'est bizarre de l'activer sans l'afficher... mais celle que l'on va rajouter n'est pas gérée par ce bouton )



    Template index_body


    C'est la structure HTML de la page d'accueil. (Affichage > Templates > général > index_body)
    Juste après le {JAVASCRIPT} qui est au début, ajoutez ceci:
    Code:

    <div id="cb">
      <iframe src="/chatbox/index.forum" style="width: 350px; height: 100%;" frameborder="0" cellspacing="0"></iframe>
    </div>

    Validez, publiez ! Donc là on vient de rajouter une chatbox supplémentaire uniquement sur la page d'accueil.



    CSS


    Affichage > Couleurs > feuille de style CSS
    Ajoutez tout ça à votre code ! Tout est légendé pour que vous puissiez facilement changer les couleurs et les polices.
    Code:
    /*CHATBOX, par Alu pour Never-Utopia********************************************************************/
    #cb, body{-webkit-transition:margin 2s ease, right 2s ease; transition:margin 2s ease, right 2s ease;}
    #cb{height:100%; position:fixed; right:-350px; bottom:0; z-index: 999;}

    body.chatbox{
      font-family:'sans-serif';/*police*/
      font-weight:200;/*epaisseur police(normal:enlever la ligne)*/
    }
    #chatbox_footer, #chatbox_footer .catBottom{height:60px !important;background-color:#C4FF6B; /*couleur du bas de la cb*/}
    #chatbox_header{width:100%; position:absolute;background-color:#C4FF6B; /*couleur du haut de la cb*/}
    .chatbox_row_2{background: #F0F0F0; /*couleur de la rangée message foncée*/}
    .chatbox_row_1, #chatbox{ background:#FFFFFF;/*couleur du fond de la cb et de la rangée message claire*/}
    #chatbox_members{width:100%; height: 50px;border:none; background-color:#68BF56 !important;/*couleur de fond de la partie membres en ligne*/ color:white;/*couleur du texte*/}

    /*phrases de connexion et déconnexion*/
    .msg span[style*="green"] strong{color:#68BF56; font-variant:small-caps; font-weight:normal;}
    .msg span[style*="red"] strong {color:black; font-variant:small-caps; font-weight:normal;}

    /*remplacer le titre de la chatbox*/
    #chatbox_header .cattitle strong { display: none; }
    #chatbox_header .cattitle:before {content:"Discussions ♪♫";font-weight:200}

    /*affichage des avatars*/
    #chatbox .cb-avatar > img { height: 66px !important; width: 30px !important;}
    #chatbox .cb-avatar {
      float: left;
      margin-right: 4px;
      background-color:white;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
      height: 40px !important;
      width: 30px;
      vertical-align: middle;
      overflow:hidden !important;
    }

    /*Ne pas toucher*/
    .chatbox td.catBottom{border:none !important;}
    #chatbox{top:80px; left:0; bottom:50px;}
    #chatbox_header .catBottom{height:30px;}
    .chatbox_row_2, .chatbox_row_1{margin:5px 4px 4px; border-radius:2px; box-shadow: inset 0px 0px 30px 0px #EFEFEF;}
    .text-styles td{vertical-align:top;}
    .chatfootertable{display:block;width:100%; top:13px; position:relative;}
    .text-styles td:last-child{display: block !important; position:absolute;right:10px; top:-27px;height:20px;}
    .text-styles td:last-child label{display: none;}

    .away-users li{display:inline;font-weight:400 !important;color:white !important;}
    body.chatbox strong{font-weight:400; font-variant:small-caps;letter-spacing:1px;}
    #chatbox .date-and-time {font-size:9px;}
    #chatbox_members .member-title{color:white;font-weight:400;font-variant:small-caps;}
    #chatbox > p {border-bottom: 1px solid #d5dde5;}

    /*bouton de la chatbox*/
    .bouton{
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      text-align:center;
      color:#FFFFFF;/*couleur du texte*/
      padding:5px 10px;
      border-radius:2px;
      border:none;
      font: 600 20px 'Amatic SC';/*police*/
      letter-spacing:2px;/*espacement des lettres*/
      text-shadow:0 1px 0 green;/*ombre du texte*/
      background-color:#68BF56;/*couleur de fond*/
      box-shadow: 0px 3px 0px 0px #3D992B;/*ombre*/
      -webkit-transition: background 0.2s ease;
      transition: background 0.2s ease-in-out;
    }
    .bouton:hover {background-color: #54B341;/*couleur de fond au survol de la souris*/}
    .bouton:active {box-shadow: 0px 1px 0px 0px #3D992B;padding-top:6px; padding-bottom:4px;}/*au moment du clic*/

    Voilà... Donc là logiquement la chatbox est invisible. Normal on n'a pas encore mis le bouton qui permet de l'ouvrir !



    Bouton


    Vous pouvez le mettre où vous voulez, et même le mettre plusieurs fois si vous voulez. Le plus simple est de le mettre dans votre message de page d'accueil. (Affichage > Page d'accueil > Généralités) La partie script contient le javascript qui fait fonctionner l'apparition / disparition de la chatbox. Les deux boutons, ouvrir et fermer, s'intervertissent quand on clique. A vous ensuite d'intégrer et de customiser ce bouton via le CSS pour l'intégrer à votre forum (=
    Code:
    <script type="text/javascript">
    function ouvrircb(name){
      document.getElementById('ouvrir_cb_'+name).style.display='none';
      document.getElementById('fermer_cb_'+name).style.display='block';
      document.body.style.marginRight='350px';
      document.getElementById('cb').style.right='0';
      }
    function fermercb(name){
      document.getElementById('ouvrir_cb_'+name).style.display='block';
      document.getElementById('fermer_cb_'+name).style.display='none';
      document.body.style.marginRight='';
      document.getElementById('cb').style.right='';
      } 
    </script>
    <div class="bouton" id="ouvrir_cb_1" onclick="javascript:ouvrircb(1);" style="width:150px;">Ouvrir CB</div>
    <div class="bouton" id="fermer_cb_1" onclick="javascript:fermercb(1);" style="width:150px;display:none;">Fermer CB</div>
     


    Et voilà, c'est installé ! Si vous rencontrez des problèmes n'hésitez pas à passer dans la section "problème avec mon code" pour qu'un codeur vous aide ! Je vous demanderai aussi de mettre un crédit à N-U quelque part sur votre forum.


    Dernière édition par Alumine le Mer 27 Mai 2015 - 21:41, édité 3 fois



    Alumine
    avatar
    Unleash
    MasculinAge : 17Messages : 81

    le Sam 9 Avr 2016 - 15:27

    ty
    avatar
    Kinjiro
    MasculinAge : 18Messages : 80

    le Dim 10 Avr 2016 - 18:57

    merci merci !



    avatar
    Hopefox
    FémininAge : 20Messages : 33

    le Mar 12 Avr 2016 - 15:52

    merci du partage ! Very Happy
    avatar
    Dark Fairy
    FémininAge : 19Messages : 218

    le Mar 19 Avr 2016 - 16:58

    Merchi!
    avatar
    paradox68
    MasculinAge : 35Messages : 11

    le Dim 29 Mai 2016 - 19:06

    Merci cool
    avatar
    mon-etoile
    FémininAge : 29Messages : 140

    le Mar 31 Mai 2016 - 13:55

    Merci beaucoup
    avatar
    Suisen
    FémininAge : 23Messages : 52

    le Ven 3 Juin 2016 - 15:37

    Merci beaucoup, c'est sublime ♥
    avatar
    Gladou
    MasculinAge : 22Messages : 114

    le Ven 3 Juin 2016 - 20:49

    c'est beau <3



    avatar
    Lilise
    FémininAge : 19Messages : 22

    le Sam 11 Juin 2016 - 0:47

    merci!
    avatar
    Sideris
    FémininAge : 22Messages : 111

    le Lun 11 Juil 2016 - 11:45

    Merci !









    avatar
    Kiowa
    FémininAge : 28Messages : 217

    le Lun 11 Juil 2016 - 18:46

    merci
    avatar
    Vixinte
    FémininAge : 19Messages : 90

    le Sam 16 Juil 2016 - 15:13

    Je suis curieuse.
    Je tente ! Merci du partage !
    avatar
    whowwillfallfirst
    MasculinAge : 18Messages : 54

    le Lun 18 Juil 2016 - 17:22

    Merci !
    avatar
    PhaerylGG
    FémininAge : 22Messages : 13

    le Mer 20 Juil 2016 - 22:19

    Ty pour le template
    avatar
    x_Titia
    FémininAge : 26Messages : 92

    le Jeu 21 Juil 2016 - 11:18

    Wow', les aperçus me donnent très envie d'essayer! Merci du partage! Very Happy
    avatar
    megb59
    FémininAge : 23Messages : 85

    le Jeu 11 Aoû 2016 - 14:35

    Ce code est super original! Very Happy
    avatar
    KimmyKinder
    FémininAge : 16Messages : 179

    le Sam 13 Aoû 2016 - 18:20

    Enorme **
    avatar
    Aidden
    MasculinAge : 23Messages : 45

    le Jeu 18 Aoû 2016 - 10:05

    Merci !
    avatar
    Velvet-Mist
    FémininAge : 26Messages : 41

    le Mar 23 Aoû 2016 - 15:51

    J'adore le concept =)
    Merci du tuto
    avatar
    chocapiix59
    FémininAge : 24Messages : 23

    le Dim 28 Aoû 2016 - 15:10

    Merci Very Happy
    avatar
    P'tite
    FémininAge : 19Messages : 26

    le Jeu 1 Sep 2016 - 4:10


    Un grand merci pour ce tutoriel ! :hihi:
    avatar
    Inamio
    FémininAge : 25Messages : 226

    le Sam 10 Sep 2016 - 21:29

    Merci beaucoup



    avatar
    Dacina moe
    FémininAge : 39Messages : 161

    le Jeu 13 Oct 2016 - 19:04

    merci <3
    avatar
    luna-chan86
    FémininAge : 28Messages : 179

    le Mar 18 Oct 2016 - 0:00

    Merci beaucoup Very Happy
    avatar
    Ptite Louve
    FémininAge : 27Messages : 33

    le Mer 2 Nov 2016 - 16:24

    Joli, merci du partage Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Nov 2017 - 12:02