Infos
 |
Le support pour cette chatbox est suspendu jusqu'à ce qu'une nouvelle version stable soit réalisée Pour des alternatives voir ce message |
Tutorial pour installer une ChatBox Ajax Blueimp dans votre forum :
Cette ChatBox est basée sur le moteur de Blueimp.
Les versions sont :
ChatBox Ajax v0.8.3
phpBB3 v 3.0.7PL1
(En préalable, vous devez déjà avoir installé votre forum... ce tutoriel n'est pas là pour ça...)
Vous obtiendrez le résultat suivant sur votre page d'index :
Clique sur l'image pour l'agrandir
Étape 1 : Télécharger
Aller sur le site : https://blueimp.net/ajax/
Télécharger : ajax_chat-0.8.3_phpBB3.zip
Documentation : http://sourceforge.net/apps/mediawiki/a ... =Main_Page (en anglais uniquement) - http://forums.phpbb-fr.com/mods-indepen ... 48305.html
Étape 2 : Installer le moteur de chat
Copier dans le répertoire : votre_forum/chat
installer en lançant : http://.../votre_forum/chat/install.php
l'installation est réussie lorsque vous obtenez l'écran :
Database tables created successfully - please delete this file (install.php).
Ensuite aller dans le répertoire : votre_forum/chat et supprimer le fichier install.php
Etape 3 : Intégrer la chatbox dans votre forum phpBB3 (v3.0.7PL1)
Dans le fichier : votre_forum/includes/functions.php
Ajouter :
- Code: Tout sélectionner
'SHOUTBOX' => getShoutBoxContent(),
Après :
- Code: Tout sélectionner
// The following assigns all _common_ variables that may be used at any point in a template.
$template->assign_vars(array(
Puis ajouter :
- Code: Tout sélectionner
function getShoutBoxContent()
{
global $phpEx, $phpbb_root_path;
// Get the URL to the chat directory:
if (!defined('AJAX_CHAT_URL'))
{
define('AJAX_CHAT_URL', $phpbb_root_path . 'chat/');
}
// Get the real path to the chat directory:
if (!defined('AJAX_CHAT_PATH'))
{
if (empty($_SERVER['SCRIPT_FILENAME']))
{
$_SERVER['SCRIPT_FILENAME'] = $_SERVER['DOCUMENT_ROOT'] . $_SERVER['SCRIPT_URL'];
}
define('AJAX_CHAT_PATH', realpath(dirname($_SERVER['SCRIPT_FILENAME']) . '/chat') . '/');
}
// Validate the path to the chat:
if (@is_file(AJAX_CHAT_PATH . 'lib/classes.' . $phpEx))
{
// Include Class libraries:
require_once(AJAX_CHAT_PATH.'lib/classes.' . $phpEx);
// Initialize the shoutbox:
$ajaxChat = new CustomAJAXChatShoutBox();
// Parse and return the shoutbox template content:
return $ajaxChat->getShoutBoxContent();
}
return null;
}
Avant :
- Code: Tout sélectionner
?>
Dans le fichier : votre_forum/styles/[votre_style]/theme/stylesheet.css
Ajouter :
- Code: Tout sélectionner
@import url("../../../chat/css/shoutbox.css");
à la fin du fichier.
dans le fichier : votre_forum/styles/[votre_style]/theme/forms.css
Ajouter à la fin :
- Code: Tout sélectionner
iconchatbox {
background-color: #FFFFFF;
border: 1px solid #c0c0c0;
color: #333333;
padding: 2px;
cursor: text;
width: 80%;
}
.chatboxicon {
background-color: #FFFFFF;
border: 1px solid #c0c0c0;
color: #333333;
padding: 2px;
cursor: text;
width: 85%;
height: 40px;
margin-top:2px;
overflow:auto;
}
.chatboxinput {
margin-top:2px;
}
.chatcopyright {
border: 1px solid #c0c0c0;
cursor: text;
padding: 2px;
text-align:right;
margin-top:2px;
height: 32px;
width: 12%;
}
Dans le fichier votre_forum\chat\lib\template\shoutbox.html
Remplacer la ligne :
- Code: Tout sélectionner
<input id="ajaxChatInputField" type="text" maxlength="[MESSAGE_TEXT_MAX_LENGTH/]" onkeypress="ajaxChat.handleInputFieldKeyPress(event);"/>
Par :
- Code: Tout sélectionner
<input id="ajaxChatInputField" type="text" class="chatboxinput" maxlength="[MESSAGE_TEXT_MAX_LENGTH/]" onkeypress="ajaxChat.handleInputFieldKeyPress(event);" style="float:left"/>
</div>
<div id="submitButtonContainer" class="ajaxLeft chatboxinput" style="float:right";>
<input type="button" id="submitButton" value="[LANG]messageSubmit[/LANG]" onclick="ajaxChat.sendMessage();"/>
</div>
<div id="emoticonsContainer" class="chatboxicon" style="float:left" dir="ltr" >
Et remplacer à la fin du fichier :
- Code: Tout sélectionner
<div id="ajaxChatCopyright"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <a href="https://blueimp.net">blueimp.net</a></div>
par :
- Code: Tout sélectionner
<div id="ajaxChatCopyright" class="chatcopyright" style="float:right"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <br><a href="https://blueimp.net">blueimp.net</a></div>
Dans le fichier : chat\lib\config.php
Chercher :
- Code: Tout sélectionner
// Default language:
$config['langDefault'] = 'en';
et mettre fr à la place de en :
- Code: Tout sélectionner
// Default language:
$config['langDefault'] = 'fr';
Dans le fichier : chat\css\shoutbox.css
Rechercher :
- Code: Tout sélectionner
#ajaxChatContent #ajaxChatChatList .delete {
background:url('../img/delete.png') no-repeat right;
Et remplacer par :
- Code: Tout sélectionner
#ajaxChatContent #ajaxChatChatList .delete {
background:url('chat/img/delete.png') no-repeat right;
dans le fichier : votre_forum/styles/[votre_style]/template/index_body.html
Pour que la ChatBox ne soit visible que par tous les membres du forum qui sont connectés ->
chercher :
- Code: Tout sélectionner
<!-- IF S_DISPLAY_ONLINE_LIST -->
<!-- IF U_VIEWONLINE --><h3><a
et avant ajouter :
- Code: Tout sélectionner
<!-- IF S_USER_LOGGED_IN -->
<!-- IF not S_IS_BOT -->
<div style="font-size: 1.2em; margin-bottom: 20px;">{SHOUTBOX}</div>
<!-- ELSE -->
<div id="ajaxChatCopyright"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <a href="https://blueimp.net">blueimp.net</a></div>
<!-- ENDIF -->
<!-- ENDIF -->
Etape 4 : Rafraichir les caches
Ensuite aller dans le console d'administration du forum :
- Dans l'onglet Style, sélectionner Template et rafraichir votre thème.
- Dans l'onglet Style, sélectionner Thème et rafraichir votre thème.
- Dans l'onglet Général, Vider le cache.
pour chaque opération vous devez confirmer l'action en cliquant sur Oui. L'action réussit affiche un écran vert.
Vous pouvez maintenant utiliser votre ChatBox !
Options :
Pour encadrer votre ChatBox comme les différents éléments de votre style :
Dans le fichier : votre_forum/styles/[votre_style]/template/index_body.html
Rechercher :
- Code: Tout sélectionner
<!-- IF not S_IS_BOT -->
<div style="font-size: 1.2em; margin-bottom: 20px;">{SHOUTBOX}</div>
<!-- ELSE -->
<div id="ajaxChatCopyright"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <a href="https://blueimp.net">blueimp.net</a></div>
<!-- ENDIF -->
Et remplacer par :
- Code: Tout sélectionner
<div class="forumbg">
<div class="inner"><span class="corners-top"><span></span></span>
<table class="table1" cellspacing="1">
<thead>
<tr>
<th style="text-align:left;">
<a href="http://ip_ou_adresse_de_votre_site/répertoire_de_votre_forum/chat/">Chatbox</a> </th>
</tr>
</thead>
<tbody>
<tr class="bg3">
<td>
<!-- IF not S_IS_BOT -->
<div style="font-size:1.2em; margin-bottom:20px;">{SHOUTBOX}</div>
<!-- ELSE -->
<div id="ajaxChatCopyright"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <br><a href="https://blueimp.net">blueimp.net</a></div>
<!-- ENDIF -->
</td>
</tr>
</tbody>
</table>
<span class="corners-bottom"><span></span></span></div>
</div>
Attention à bien renseigner la ligne "<a href="http://ip_ou_adresse_de_votre_site/répertoire_de_votre_forum/chat/">Chatbox</a>" dans le code ci-dessus !
Pour régler la hauteur de votre ChatBox :
Dans le fichier : chat\css\shoutbox.css
Rechercher :
- Code: Tout sélectionner
#ajaxChatContent #ajaxChatChatList {
height:300px;
overflow:auto;
}
Et remplacer la valeur de la variable height par celle de votre choix.
Pour ne rendre accessible votre ChatBox qu'à un groupe d'utilisateurs :
Dans le fichier : includes/functions.php
Trouver :
- Code: Tout sélectionner
// The following assigns all _common_ variables that may be used at any point in a template.
Avant ajouter :
- Code: Tout sélectionner
if ( !function_exists('group_memberships') )
{
include($phpbb_root_path . 'includes/functions_user.'.$phpEx);
}
$groups = group_memberships(false,$user->data['user_id']);
foreach ($groups as $grouprec)
{
$template->assign_vars(array(
'S_IN_GROUP_' . $grouprec['group_id'] => true
));
}
Créer un nouveau groupe (par exemple : Chat_OK), puis à l'aide PhpMyAdmin, aller dans la table phpbb_groups et regarder l'id du groupe ainsi créé.
Dans notre exemple, il s'agit du groupe 14.
Dans le fichier : index_body.html
Rechercher :
- Code: Tout sélectionner
<!-- IF S_USER_LOGGED_IN -->
<div class="forumbg">
<div class="inner"><span class="corners-top"><span></span></span>
<table class="table1" cellspacing="1">
<thead>
<tr>
<th style="text-align:left;">
<a href="http://ip_ou_adresse_de_votre_site/répertoire_de_votre_forum/chat/">Chatbox</a> </th>
</tr>
</thead>
<tbody>
<tr class="bg3">
<td>
<!-- IF not S_IS_BOT -->
<div style="font-size:1.2em; margin-bottom:20px;">{SHOUTBOX}</div>
<!-- ELSE -->
<div id="ajaxChatCopyright"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <br><a href="https://blueimp.net">blueimp.net</a></div>
<!-- ENDIF -->
</td>
</tr>
</tbody>
</table>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->
et remplacer la première ligne :
- Code: Tout sélectionner
<!-- IF S_USER_LOGGED_IN -->
par :
- Code: Tout sélectionner
<!-- IF S_IN_GROUP_14 -->
Il est aussi possible d'utiliser la condition suivante :
- Code: Tout sélectionner
<!-- IF not S_IN_GROUP_2 -->
Et même :
- Code: Tout sélectionner
<!-- IF S_IN_GROUP_5 or S_IN_GROUP_14 -->
Afficher le numéro id du groupe dans la la console d'administration "Gérer les groupes" :
ouvrir adm/style/acp_groups.html
cherchez:
- Code: Tout sélectionner
<td><strong>{groups.GROUP_NAME}</strong></td>
remplacez par:
- Code: Tout sélectionner
<td><strong>{groups.GROUP_NAME} ({groups.GROUP_ID})</strong></td>
puis ouvrir includes/acp/acp_groups.php
cherchez:
- Code: Tout sélectionner
'GROUP_NAME' => $group_name,
avant ajoutez:
- Code: Tout sélectionner
'GROUP_ID' => $group_id,
puis videz le cache du forum.
Questions fréquentes :
Les messages ne s'affiche pas dans la chatbox :
Ce soucis est fréquent si vous êtes chez Free car en fait il faut absolument créer un dossier nommé sessions qui dois se trouver à la racine de l'hébergement et non dans le dossier du forum.
Correction de l'erreur "Object #<an HTMLObjectElement> has no method 'create'" et du bug du son sous Chrome
Ouvrir chat/js/FABridge.js
Trouver :
- Code: Tout sélectionner
if (/Explorer/.test(navigator.appName) || /Konqueror|Safari|KHTML/.test(navigator.appVersion))
Remplacer par :
- Code: Tout sélectionner
if((!(/Chrome/.test(navigator.appVersion))) && ((/Explorer/.test(navigator.appName) || /Konqueror|Safari|KHTML/.test(navigator.appVersion))))
Merci à Daredevil pour ce correctif
 Infos |
Bien sur cela ne vous dispense pas de faire une vérification de vos modifications faites sur les fichiers de votre forum |
Merci à phpbb-fr.com et RMcGirr83.org pour leur précieuse aide.
Qui est en ligne
News
Plan de site
SitemapIndex
Flux RSS
