Documentation :: cBB Chat


Quick Guide • Requirements

cBB Chat needs very few requirements to run correctly.

The basic requirements are:
  1. A phpBB forum whose version is equal or greater than 3.1.3 (3.1.9 is recommended).
  2. The explorer must be support Javascript to use and manage the mod.

Quick Guide • Install

If you already have basic knowledge of FTP and are sure that your system will run smoothly cBB Chat, just follow these simple steps to install it.

  1. Unzip the cBB Chat zip file in a local folder on your computer.
  2. Upload all files contained in the upload directory in that file (keeping the directory structure) to the ext directory in the root of your forum.
  3. Using your web browser, navigate to the Administration Panel and go to Customize >> Extensions
  4. Find cBB Chat and click in the Enable option.
  5. When the extension is enabled, go to ACP >> General and click in Clear cache.

If you experienced problems or do not know how to proceed with any of the steps above, you can put your problem in the correct section of this web forum, where it will help as we can.

Quick Guide • Update

  1. Using your web browser, navigate to the Administration Panel and go to Customize >> Extensions, Find cBB Chat and click in the Disable option.
  2. Delete the folder chat which is within the directory /ext/canidev/ in the server.
  3. Download and unzip the cBB Chat zip file in a local folder on your computer.
  4. Upload all files contained in the upload directory in that file (keeping the directory structure) to the ext directory in the root of your forum.
  5. Using your web browser, navigate to the Administration Panel and go to Customize >> Extensions, Find cBB Chat and click in the Enable option.
  6. When the extension is enabled, go to ACP >> General and click in Clear cache.

Quick Guide • Uninstall

cBB Chat can be uninstalled in a few steps:

  1. Using your web browser, visit the Administration Panel and go to Customise >> Manage Extensions
  2. Find cBB Chat and click in the Disable option.
  3. When the extension is disabled, if you want to delete completly, click in Delete data and remove the directory /ext/canidev/chat from your server.

Tricks and Customization • Multiline texts

By default, on press the "Enter" key, the chat sends the chat message.
You can write multiline texts by using the Key Combination Ctrl + Enter. This produces a line break in the message.

Tricks and Customization • Automatic list creation

The chat editor can be convert many lines in a shorted or numeric list automatically.
To use this function you must select the lines to convert and do click in the List or Numeric List BBcode.

For example:
Line 1
Line 2
Line 3
Will be converted to: [list]
[*]Line 1
[*]Line 2
[*]Line 3
[/list]

Tricks and Customization • Room Customization

Note:To perform this customization you need a basic knowledge of style sheets (CSS)

The chat allows to modify the visual aspect of the rooms independently (text color, backgrounds, sizes, etc ...).
To do this it is necessary to edit the CSS file of the style that is in use (/ext/canidev/chat/styles/{your style}/theme/chat.css), in which must include the code to modify your chat.

The most common codes are listed in the table below, all you have to do is change {ID} to the ID of the room you want to change.
This identifier can be found in the Manage rooms section of the Administration Panel.
Code Description
#chat-body[data-active="{ID}"] Global chat box.
#chat-body[data-active="{ID}"] #chat-title Chat title box.
#chat-body[data-active="{ID}"] #chat-content Inner box containing all chat elements.
#chat-body[data-active="{ID}"] #chat-conversation-container Box of conversations.
#chat-body[data-active="{ID}"] #chat-right-panel List of users on the right side.
#chat-body[data-active="{ID}"] #chat-tabs li Room tabs.
#chat-body[data-active="{ID}"] #chat-tabs li.active Active room tab (current).
#chat-body[data-active="{ID}"] #chat-message textarea Text input box.
#chat-body[data-active="{ID}"] #chat-dialog Dialog box.
#chat-body[data-active="{ID}"] .chat-row Message row.
#chat-body[data-active="{ID}"] .chat-row:nth-child(even) Message row (pairs only).
#chat-body[data-active="{ID}"] .chat-row:hover Message row (only when mouseover).
#chat-body[data-active="{ID}"] #chat-toolbar Toolbar.
#chat-body[data-active="{ID}"] #chat-toolbar a Toolbar links.
#chat-body[data-active="{ID}"] .chat-button Buttons.
#chat-body[data-active="{ID}"] .chat-button [class*="chat-icon-"] Button Icons.
#chat-body[data-active="{ID}"] .state-notice Notices Box.
#chat-body[data-active="{ID}"] .chat-tip-message Tips Box.
#chat-body[data-active="{ID}"] .ic-row-actions Box containing the actions of the rows.
#chat-body[data-active="{ID}"] .ic-row-actions a Actions of the rows.

Examples of use:

In these examples, "1" is used as room ID (1 is equivalent to the General Room)

/* Change the text color of the whole chat */
#chat-body[data-active="1"] {
color: #fff;
}

/* Change the interior background */
#chat-body[data-active="1"] #chat-content {
background: black;
}

/* Change the conversation box and the box with the list of users */
#chat-body[data-active="1"] #chat-conversation-container,
#chat-body[data-active="1"] #chat-right-panel {
background: rgba(255,255,255,0.4);
border-color: #000;
}

/* Change the border color of all tabs */
#chat-body[data-active="1"] #chat-tabs li {
border-color: #000;
}

/* Change the active tab */
#chat-body[data-active="1"] #chat-tabs li.active {
background: rgba(255,255,255,0.8);
border-top-color: #000;
color: #000;
}

/* Background and color of the text box */
#chat-body[data-active="1"] #chat-message textarea {
background: rgba(0,0,0,0.6);
color: #fff;
}

/* New color for dialogues and rows with messages */
#chat-body[data-active="1"] #chat-dialog,
#chat-body[data-active="1"] .chat-row {
color: #000;
}

/* New background when we pass over a row */
#chat-body[data-active="1"] .chat-row:hover {
background: rgba(0,0,0,0.2);
}

Events • Core Events


chat.acp_config_vars

  • Added in version: 1.1.1
  • Location: acp\main_module.php
  • Arguments: display_vars, submit
  • Description: Event used to add / modify the parameters of the chat settings page.

chat.before_load_js

  • Added in version: 1.1.3
  • Location: jchat_scripts.php
  • Arguments: paths, base_folder, js_filename
  • Description: Event used to modify the path of the javascript file with the specific options for a particular style.

chat.custom_bbcodes_modify_sql

  • Added in version: 1.1.1
  • Location: chat.php
  • Arguments: sql_ary
  • Description: Event used to modify the query responsible of read bbcodes that appears on the chat.

chat.generate_bbcodes

  • Added in version: 1.1.1
  • Location: chat.php
  • Arguments: bbcode_name, template_key, row, item_ary
  • Description: Event used to add / modify bbcodes shown in chat.

chat.generate_smilies

  • Added in version: 1.1.1
  • Location: chat.php
  • Arguments: row, item_ary
  • Description: Event used to add / modify smilies shown in chat.

Events • Javascript Events


chat.beforeInit

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event which is loaded before displaying the chat.

chat.beforeSubmit

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event that is loaded when the user sends a message in chat, before it is processed.

chat.onBindRows

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event that loads when new messages are displayed in chat and assigned appropriate actiona.

chat.onBindTabs

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event that is loaded when allocating the actions of the chat tabs.

chat.onBindUserlist

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event that is loaded when assigning the actions of list of users.

chat.onConnect

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event that is loaded when the user connects to the chat.

chat.onDisconnect

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event that is loaded when the user disconnects from the chat.

chat.onInit

  • Added in version: 1.1.1
  • Arguments: None
  • Description: Event which is loaded when displaying the chat.

Events • Template Events


chat_body_after

  • Added in version: 1.1.1
  • Location: event\overall_footer_content_after.html
  • Description: Add content after the chat box.

chat_body_before

  • Added in version: 1.1.1
  • Location: event\overall_footer_content_after.html
  • Description: Add content before the chat box.

chat_bbcodebox_after

  • Added in version: 1.1.1
  • Location: event\overall_footer_content_after.html
  • Description: Add content to the end of the bbcodes box.

chat_smileybox_after

  • Added in version: 1.1.1
  • Location: event\overall_footer_content_after.html
  • Description: Add content to the end of the smilies box.