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.2.0 (3.2.5 is recommended).
  2. The explorer must be support Javascript to use and manage the mod.

Quick Guide • Install

  1. Unzip the cBB Chat zip file in a local folder on your computer.
  2. Upload all the files contained in the upload folder of that file (maintaining the directory structure) to the ext directory located in the root directory of your forum.
    The final route for the extension files should be: /ext/canidev/chat/
  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.

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.

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}"] .cbb-btn Buttons.
#chat-body[data-active="{ID}"] .cbb-btn .fa 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


chat.acp_config_vars

  • Added in version: 1.1.1
  • Location: controller/acp_controller_config.php
  • Arguments: display_vars, submit

chat.acp_pages_vars

  • Added in version: 1.2.0
  • Location: controller/acp_controller_pages.php
  • Arguments: display_vars, page_data, submit

chat.acp_rooms_vars

  • Added in version: 1.2.0
  • Location: controller/acp_controller_rooms.php
  • Arguments: display_vars, room_data, submit

chat.acp_texts_vars

  • Added in version: 1.2.0
  • Location: controller/acp_controller_texts.php
  • Arguments: display_vars, submit

chat.after_action_run

  • Added in version: 1.2.0
  • Location: libraries/action_manager.php
  • Arguments: action, template_filename, json

chat.modify_user_row

  • Added in version: 1.2.0
  • Location: libraries/action_manager.php
  • Arguments: row, user_row

chat.modify_message_row

  • Added in version: 1.2.0
  • Location: libraries/action_manager.php
  • Arguments: row, ary

chat.generate_bbcodes

  • Added in version: 1.1.1
  • Location: chat.php
  • Arguments: template_key, row, item_ary

chat.custom_bbcodes_modify_sql

  • Added in version: 1.1.1
  • Location: chat.php
  • Arguments: sql_ary

chat.generate_smilies

  • Added in version: 1.1.1
  • Location: chat.php
  • Arguments: row, item_ary

Events • Javascript


chat.afterSend

  • Added in version: 1.2.0
  • Arguments: event

chat.beforeEventDispatch

  • Added in version: 1.2.0
  • Arguments: object

chat.beforeInit

  • Added in version: 1.1.1
  • Arguments: instance

chat.beforeSend

  • Added in version: 1.2.0
  • Arguments: event

chat.beforeSubmit

  • Added in version: 1.1.1
  • Arguments: event

chat.onBindInput

  • Added in version: 1.2.0
  • Arguments: object

chat.onBindRows

  • Added in version: 1.1.1
  • Arguments: instance

chat.onBindTabs

  • Added in version: 1.1.1
  • Arguments: instance

chat.onBindUserlist

  • Added in version: 1.1.1
  • Arguments: instance

chat.onCloseRoom

  • Added in version: 1.2.0
  • Arguments: object

chat.onConnect

  • Added in version: 1.1.1
  • Arguments: Ninguno

chat.onDisconnect

  • Added in version: 1.1.1
  • Arguments: Ninguno

chat.onInit

  • Added in version: 1.1.1
  • Arguments: instance

chat.onOpenRoom

  • Added in version: 1.2.0
  • Arguments: object

Events • Template


chat_body_after

  • Added in version: 1.1.1
  • Location: event/overall_footer_content_after.html

chat_body_before

  • Added in version: 1.1.1
  • Location: event/overall_footer_content_after.html

chat_bbcodebox_after

  • Added in version: 1.1.1
  • Location: event/overall_footer_content_after.html

chat_smileybox_after

  • Added in version: 1.1.1
  • Location: event/overall_footer_content_after.html