Installation de la ChatBox

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Installation de la ChatBox

Message par Shadow le Jeu 11 Juin 2015 - 10:49

Fonctionnement de la Chatbox


Installation de la Chatbox

Forumactif propose par défaut une ChatBox à mettre en place sur votre forum. Cette Chatbox est visible de tous les membres (donc les invités ne pourront pas la voir). Elle ne peut pas être paramétrable en fonction des groupes, ni d'un statut particulier. La ChatBox a été développée dans le but de donner la possibilité à une communauté de communiquer rapidement et simplement que par le biais de messages postés sur le forum.

Activer la chatbox

Panneau d'administration  Modules  ChatBox - Configuration



Votre ChatBox est maintenant installée sur votre forum.



Elle est très simple d'utilisation, les commandes sont basiques. Quand votre ChatBox est activée, il y a une légère modification de votre "Qui est en Ligne" : le nombre de connectés et leurs pseudos apparaissent, ainsi qu'un lien pour rejoindre la chatbox.

Paramétrage de la Chatbox

Deux paramètres essentiels à retenir :

  • Afficher les avatars des utilisateurs dans la chatbox : vous permet de choisir si oui ou non les avatars seront affichés dans les conversations, comme c'est le cas sur la capture précédente,

  • Affichage de la chatbox : détermine si la chatbox est affichée en haut de page (sous le message de la page d'accueil), en pied de page (après la zone "Qui est en ligne ?") ou les deux. Dans tous les cas, la chatbox n'est affichée que sur l'index de votre forum.

Nommer des modérateurs

Panneau d'administration  Modules  ChatBox - Modérateurs

Afin de gérer convenable les conversations qui se déroulent sur la ChatBox, vous pouvez nommer des modérateurs. Ils auront la possibilité de bannir/débannir, de supprimer la conversation en cours, de kicker (éjecter) les fauteurs de troubles.

Il suffit de rentrer le pseudo de la personne que vous souhaitez nommer et de valider. Si vous souhaitez supprimer un modérateur, il suffira de cochez en face du pseudo concerné, dans la colonne "supprimer" et de valider votre action.

Un administrateur connecté sur la ChatBox peut nommer des modérateurs sans avoir besoin de se rendre sur le Panneau d'administration. La commande /mod [pseudo] permet de nommer un modérateur et son contraire est /unmod [pseudo]. Ce modérateur aura un @ à côté de son pseudo afin de montrer aux membres qu'il dispose des pouvoirs de modération. Seul un administrateur peut nommer un modérateur. Ce n'est pas parce que les administrateurs et les modérateurs sur une ChatBox ont tous un @ que les droits sont les mêmes.

Les modérateurs peuvent effectuer les commandes suivantes:

/absPermet d'envoyer un message disant que vous êtes absent. Vous pouvez ajouter une raison qui sera affichée dans le message et visible par tous les membres connectés à la ChatBox (Ex: /abs raison). Notez que la commande /away permet de faire la même chose.
/clearPermet d'effacer les messages de la ChatBox. Notez que la commande /cls permet de faire la même chose.
/kickPermet de déconnecter un membre de la ChatBox. La commande doit-être suivie du pseudo de l'utilisateur à déconnecter (Ex : /kick pseudo). Le fait de déconnecter quelqu'un, ne l'empêchera pas de se reconnecter.
/banPermet de bannir un membre de la ChatBox. Cette commande doit être suivie du nom de l'utilisateur à bannir (Ex : /ban pseudo). Une fois l'utilisateur banni, il ne verra et n'aura plus accès à la ChatBox.
/unbanPermet de débannir un membre de la ChatBox. Cette commande doit être suivie du nom de l'utilisateur à débannir (Ex : /unban pseudo). Dès lors, il aura de nouveau accès à la Chatbox.
/mePlacé en début de phrase, cette commande sera remplacée par votre pseudo (Ex : /me aime Forumactif affichera "Pseudo aime Forumactif")
/exitPermet de vous déconnecter de la Chatbox. Vous pouvez également préciser la raison pour laquelle vous quittez la Chatbox. Cette dernière sera visible par les autres membres connectés (Ex : /exit raison)
/banlistPermet d'afficher la liste des utilisateurs bannis de la Chatbox (pour éventuellement les débannir)
/helpPermet d'afficher un récapitulatif des commandes de la Chatbox avec leurs explications.


Gestion des membres bannis

Panneau d'administration  Modules  ChatBox - Utilisateurs bannis

Sur cette page, un administrateur pourra décider de sélectionner des utilisateurs bannis en vue de les autoriser à nouveau à accéder à la chatbox (débannir). Un utilisateur banni ne peut se connecter à la chatbox et voit le message suivant : "Vous avez été banni de la chatbox".

Une autre voie existe pour connaitre la liste des utilisateurs bannis : si un modérateur de la ChatBox y est connecté, il peut la consulter en tapant la commande /banlist dans le champ de texte et une pop-up s'ouvrira avec les pseudos des personnes bannies de la ChatBox. Il pourra éventuellement les débannir.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23946
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.
  • 0

Tutoriel Personnalisation de la chatbox

Message par MlleAlys le Jeu 11 Juin 2015 - 19:36

Personnalisation de la Chatbox


Personnaliser la Chatbox

Pour compléter ce tutoriel, voici des codes CSS qui vous permettront de modifier l'apparence de la ChatBox. Les codes qui vous intéressent sont à copier/coller dans la feuille de style css de votre forum :

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Modifier les couleurs de fond
Modifier les couleurs des textes
Autres modifications (avatars, boutons, lignes, hauteur,...)


Modification des couleurs de fond de la ChatBox

Voilà un exemple de Chatbox avec les couleurs de fond modifiées, pour vous aider à vous repérer dans les codes plus bas Wink :

Pour chaque code, il vous faudra remplacer COULEUR par le code de la couleur souhaitée.


Modifier le fond de l'en-tête de la Chatbox (en bleu sur l'exemple)

Code:
#chatbox_header, td.catBottom, #chatbox_header.main-head {
  background: COULEUR;
}

Modifier le fond de la partie liste des membres (en vert sur l'exemple)

Code:
#chatbox_members {
  background: COULEUR;
}

Modifier le fond des titres dans la partie liste des membres (en rouge sur l'exemple)

Code:
#chatbox_members .member-title {
  background: COULEUR;
}

Modifier le fond de la partie chat (en violet sur l'exemple)

Code:
#chatbox {
  background: COULEUR;
}

Modifier la couleur de fond des lignes impaires de discussion dans la partie chat (en orange sur l'exemple)

Code:
.chatbox_row_1 {
  background: COULEUR;
}

Modifier la couleur de fond des lignes paires de discussion dans la partie chat (en turquoise sur l'exemple)

Code:
.chatbox_row_2 {
  background: COULEUR;
}

Modifier la couleur de fond de la barre des boutons (en rose sur l'exemple)

Code:
#chatbox_messenger .catBottom, body.chatbox, #chatbox_footer {
  background: COULEUR;
}

Modifier le fond de la zone de saisie du message (en gris clair sur l'exemple)

Code:
#chatbox_footer #message {
  background: COULEUR;
}


Modification des couleurs des textes de la ChatBox


Modifier la couleur du titre de la ChatBox

Code:
.chatbox a.cattitle, .chatbox-title, .chatbox-title a.chat-title {
  color: COULEUR !important;
}

Le !important est à laisser juste après le code couleur.

Modifier la couleur des liens et options en haut à droite de la ChatBox

Code:
.chatbox-options a, .chatbox-options li, .chatbox-options li a, .chatbox-options li label {
  color: COULEUR;
}

Modifier la couleur des titres dans la partie liste des membres ("en ligne", "absent")

Code:
#chatbox_members .member-title {
  color: COULEUR;
}

Modifier la couleur des messages verts lors de la connexion d'un membre

Code:
.msg span[style="color:green"] strong {
  color: COULEUR;
}

Modifier la couleur des messages rouges lors de la déconnexion d'un membre

Code:
.msg span[style="color:red"] strong {
  color: COULEUR;
}

Modifier la couleur des messages en "/me"

Code:
.msg span[style="color:undefined"] {
  color: COULEUR;
}

Modifier la couleur de l'heure des messages

Code:
.date-and-time {
  color: COULEUR;
}


Autres modifications


Ne pas afficher l'heure et la date des messages

Code:
.date-and-time {
  display: none;
}

Modifier la couleur de la bordure entre les messages (quand l'affichage des avatars est activé)

Code:
#chatbox > p {
  border-color: COULEUR !important;
}

Supprimer la bordure entre les messages (quand l'affichage des avatars est activé)

Code:
#chatbox > p {
  border: none !important;
}

phpBB3 : Supprimer l'espace entre les messages

Code:
#chatbox > p {
  margin: 0;
}

Modifier la taille des avatars dans la ChatBox

Code:
#chatbox .cb-avatar {
  width: auto !important;
  height: auto !important;
}
#chatbox .cb-avatar > img {
  width: auto !important;
  height: auto !important;
  max-width: 50px;  /*largeur maximale des avatars dans la cb*/
  max-height: 50px;  /*hauteur maximale des avatars dans la cb*/
}

Modifiez les valeurs de la hauteur maximale et de la largeur maximale (ici 50px pour les deux) à votre préférence.
Ce code qui passe par des dimensions maximales sans en imposer une précise permet également d'éviter la déformation des images. Wink

Supprimer la couleur de fond sous les avatars

Code:
#chatbox .cb-avatar {
  background: none !important;
}

Modifier les boutons de mise en forme de la ChatBox

Le code suivant permet la modification de la couleur de fond des boutons, du texte des boutons, et de la bordure des boutons :

Code:
#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COULEUR !important;
  color: COULEUR !important;
  border: 1px solid COULEUR;
}

Remplacez les COULEUR par le code de la couleur de votre choix.
Les !important sont à laisser juste après les codes des couleurs.

Vous pouvez le modifier et/ou compléter ce code à votre guise, en ajoutant par exemple
border-radius: 50%;
pour avoir des boutons ronds, ce qui donnerait le code suivant :

Code:
#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COULEUR !important;
  color: COULEUR !important;
  border: 1px solid COULEUR;
  border-radius: 50%;
}

Modifier la largeur de la colonne de la liste des membres

Code:
#chatbox_members {
  width: 100px;  /*largeur de la colonne de la liste des membres connectés à la cb*/
}
#chatbox {
  left: 101px;  /*même largeur que la colonne + 1px */
}

Modifiez les valeurs (ici 100px et 101px) à votre préférence.

Modifier la hauteur de la chatbox sur l'index

Code:
#chatbox_top, #chatbox_bottom {
  height: 500px !important;
}

Modifiez la valeur (ici 500px) par la hauteur souhaitée.
Le !important doit être laissé juste après la valeur.


Tutoriels relatifs :
- Dix codes pour la Chatbox
- Le CSS, comment ça marche ?
- Plus de tutoriels sur la Chatbox ?



MlleAlys
+ Hyperactif +

Messages : 4476
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum