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.


    Chatbox en panneau latéral

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Ven 8 Mai 2015 - 18:58


    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
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Ven 8 Mai 2015 - 19:33

    Yo, j'me permet une remarque pendant que j'y pense avant de jeter un oeil à tes codes, mais l'aperçu en live sert à rien on ne le voit pas x) La CB est inaccessible aux invités xD

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Sam 9 Mai 2015 - 8:49

    Heuuuu certes, je n'avais pas du tout pensé à ça ^^' Enfin on peut au moins voir le panneau qui s'ouvre je crois, c'est l'essentiel... Les deux aperçus se complètent comme ça !
    Et désolée pour les codes, j'ai pas mal compacté...



    Alumine
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Mer 27 Mai 2015 - 10:48

    Désolée pour le double post ! Je viens de constater un petit bug: les boutons gras, italique, etc. ne sont plus cliquables. Du coup je vais un peu modifier tout ça ^^



    Alumine
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 27 Mai 2015 - 10:56

    Fais donc x) Je n'ai pas encore eu le temps de me pencher dessus de toute façon ><
    Préviens juste une fois que c'est bon (:

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Mer 27 Mai 2015 - 12:50

    Et voilà, c'est résolu (=
    Merci A-lice !



    Alumine
    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Mer 27 Mai 2015 - 15:16

    Je suis curieuse je vais tenter sa ^^ Merci

    EDIT - C'est tout simplement magnifique comme résultat ! merci Very Happy
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Mer 27 Mai 2015 - 15:50

    Contente que ça te plaise (=
    (non mais je me sens stalkée là... hihi <3 )



    Alumine
    Nemesis
    Nemesis
    FémininAge : 32Messages : 218

    Mer 27 Mai 2015 - 17:53

    Très nice comme effet !
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Jeu 20 Aoû 2015 - 17:47

    Merci j'adore ! :o



    YOU HELLA SAVED MY LIFE
    - chloe price
    Anonymous
    Invité

    Jeu 20 Aoû 2015 - 22:39

    Merci ! (*≧▽≦)
    v-r0
    v-r0
    FémininAge : 32Messages : 40

    Mer 26 Aoû 2015 - 14:15

    Wow! J'adoooore tout simplement! Very Happy
    Sakura-chan
    Sakura-chan
    FémininAge : 26Messages : 180

    Dim 30 Aoû 2015 - 16:37

    Merci du partage ! c: C'est très original, c'est chouette !
    Shatters
    Shatters
    FémininAge : 30Messages : 57

    Dim 30 Aoû 2015 - 22:34

    Merci !



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Jeu 3 Sep 2015 - 11:10

    merci :)
    Dreamyland
    Dreamyland
    FémininAge : 26Messages : 88

    Sam 5 Sep 2015 - 6:26

    Hoy, bien sympa cette cb, merci
    TiGraou
    TiGraou
    MasculinAge : 30Messages : 243

    Mer 9 Sep 2015 - 11:54

    Merci du partage ^^
    Grande
    Grande
    FémininAge : 36Messages : 207

    Mar 15 Sep 2015 - 0:53

    Merci



    Chatbox en panneau latéral 171074gwenj10
    Sasha57
    Sasha57
    FémininAge : 29Messages : 35

    Dim 18 Oct 2015 - 14:07

    J'aime beaucoup, ça change de la chatbox normale ^^
    QueenDancing13
    QueenDancing13
    FémininAge : 27Messages : 106

    Ven 25 Déc 2015 - 14:48

    Merci :)



    Chatbox en panneau latéral Christina_Aguilera_Signature_by_Sitic
    AlexTasie
    AlexTasie
    MasculinAge : 26Messages : 34

    Mar 5 Jan 2016 - 9:22

    ça à l'air sympa, je vais essayer :p
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Jeu 25 Fév 2016 - 13:42

    Merci beaucoup!
    Olympea59140
    Olympea59140
    FémininAge : 34Messages : 8

    Lun 21 Mar 2016 - 18:24

    Merci pour le partage :)
    KTMiz
    KTMiz
    MasculinAge : 25Messages : 47

    Dim 27 Mar 2016 - 3:04

    Merci



    Chatbox en panneau latéral Kjod95_sick_religion
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 24Messages : 60

    Dim 3 Avr 2016 - 16:22

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:38