Chatbox en panneau latéral

Rappel du premier message :

Chatbox en panneau latéral

/!\ 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.

ty

merci merci !

merci du partage !

Merchi!

Merci cool

Merci beaucoup

Merci beaucoup, c'est sublime ♥

c'est beau <3

merci!

Merci !

merci

Je suis curieuse.
Je tente ! Merci du partage !

Merci !

Ty pour le template

Wow', les aperçus me donnent très envie d'essayer! Merci du partage!

Ce code est super original!

Enorme **

Merci !

J'adore le concept =)
Merci du tuto

Merci

Merci beaucoup

merci <3

Merci beaucoup

Joli, merci du partage