Emoticons


You can download different sets of emoticons at our download center. We also provide a simple click-and-select tool to build your own emoticon list by choosing from 900 animated images: Emoji Tool


Lists of emojis and emoticons are displayed when users click on the yellow icon on the left of the text box.

BlaB! AX Pro supports two types of emoticons - native emoji and image emoticons incl. animated images. Native emojis are preinstalled on all recent phones and computers as a single image font. Native emoji can be inserted in a message directly from the provided list, from a display keyboard on IOS and Android devices and there are emoji extensions for the desktop browsers.

The list of image emoticons can be found as a PHP array in the file emocodes.php. The actual images, can be in GIF / PNG / WEBP / SVG format or base64 encoded entries in emoticons.css. A single emoticon from emocodes.php looks like this:

$emoticons[]=':code: css_selector 1';

There are three parameters separated by a blank space: [1] an emoticon code to post with, [2] a CSS selector from emoticons.css, [3] visibility - (1 or 0) which determines if the emoticon is displayed in the list of emoticons. If 0, the emoticon can be posted in chat with its code but neither code nor image is visible in the list of image emoticons. We call this an alias.

emocodes.php

$emoticons[] = ':anguished: svg_emo_anguished 1';
$emoticons[] = ':astonished: webp_emo_astonished 1';
$emoticons[] = ':bandage: svg_emo_bandage 1';
$emoticons[] = ':coldsweat: webp_emo_coldsweat 1';
// etc etc

emoticons.css

.svg_emo_anguished    {background-image: url("data:image/svg+xml;base64,...")}
.webp_emo_astonished  {background-image: url("data:image/webp;base64,...")}
.svg_emo_bandage      {background-image: url('img/bandage.png')}
.webp_emo_coldsweat   {background-image: url('img/codsweat.gif')}
/* etc etc */

When you make any changes in emoticons.css - Rebuild & Uncache with the pink button - AdminCP ยป Settings


base64 emoticons in a single CSS file vs multiple image files? A single CSS file allows all emoticons to be downloaded and cached on the user device with a single HTTP request which greatly reduces the load time.


Page updated: 2023-12-11
 
Powered by BlaB! Pages