UW - Smileys Bar User Manual


Staff member
This was written to help you better understand how this add-on works. Reading this will help you to make a better use of this add-on and to have a better user experience.

Please get familiar with the names used in this manual:


1.) Turns on/off the Smileys Bar - in the admin under Options you can activate this add-on. Once activated, clicking this smiley icon turns on the Smileys Bar. Once turned on, it will stay turned on until you turn it off clicking this smiley icon.

  • Force Open the Smileys Bar
In Setup -> Options -> Smileys Bar you can set the option that will keep the Smileys Bar open for the users all the time by default. So if someone turns off the Smileys Bar, after a page refresh the bar will be back.


2.) Recently used smileys on the left of the separator and XF default smileys on the right.

3.) Turns on/off the smileys menu.

4.) Smileys Bar - contains Recently used smileys on the left of the separator and XF default smileys on the right.
- in the admin under Content -> Smilies, you can add, hide, move, sort or even replace the smileys in the Smileys Bar with your own, custom smileys.


The rest of the categories is in the smileys menu (#7) below.

5.) categories bar - links with faster access to the the particular category.

6.) search bar - in the admin, under options, you can turn off this bar. The "x" next to the search bar closes found smileys.

7.) smileys menu - works similar way as WhatsApp web. In the admin, under options, you can set up how tall this menu you want to have.
Last edited:


Staff member

Before you install this add-on, please check how your smileys are organized. If you have only XF stock smileys, than you just go ahead with the installation, you are all set. But you can still read the info below so you know how to use the various combinations of options this great add-on provides.

But if you have many custom smileys, please read this before you start the installation.

‼ It is important to check what kind of smileys you have in the first category. From the user's front-end the category is by XF called "Smileys" (it is the first one right on top). See image below.


BUT in the administrative back-end it is called "Uncategorized smilies":


So the smileys that are in this "Uncategorized smilies" category are the ones that will appear in the Smileys Bar. Some forum administrators have even hundreds of smileys in this category. But for the Smileys Bar it is not very practical to have that many smileys in that bar. While the bar can technically handle it, it's purpose is only to keep a few smileys that are used the most, ideally the ones that come as stock from XF.

Therefore it is highly recommended to move all custom smileys from "Uncategorized smilies" category to another category and move them this way into the smileys menu that you can then access by clicking the most right dropdown arrow.

Another point to note is, that if you decide to keep many big flashy, animated smileys in this "Uncategorized smilies" category, some of your users might be distracted by them, since they are in the text editor all the time. Therefore it is highly recommend to keep in Smileys Bar (in "Uncategorized smilies") only static images, ideally those that come standard with xenForo.


Staff member

In the admin area, you have the option to remove or add any smiley from any custom category to the Smileys Bar:


By default, in the Smileys Bar, will be included whatever smileys are in the category "Uncategorised smilies" and Recently used.

Also during the import process you have the option to check to show a smiley in the Smileys Bar.


🔹Option to add any smiley form the smileys menu emojis categories. In the admin, under Smileys Bar settings (Setup->Options->[UW] Smileys Bar), you can insert any smiley, from the stock emojis categories ( People, Nature, Food, Activity, Travel, Objects, Symbols, Flags ) into the Smileys Bar.
And from Content->Smilies->Uncategorized smilies(these are the Smileys Bar smileys) you can remove any smiley you want.
So this way you can build completely your own Smileys Bar.



Staff member

The Smileys Bar comes also with "Recently used" category located on the left side of the separator:


If you have only XF stock smileys, you don't have to do anything. But if you have many extra large and animated, flashy images, you might consider using another option of this add-on and that is to move this category down below to the smileys menu. This is because again some of your users might find it annoying to see big flashy images all the time in the text editor.

So you just go to the admin settings for this add-on and uncheck the first option ("Keep Recently used in the Smileys Bar ") and that will move the "Recently used" category down to the smileys menu:


Or you can keep it selected and select also the other option ("Allow end user to move the Recently used into the smileys menu "). This way the user will be able to decide for himself whether he wants to move "Recently used" category down or not. In user's preferences a new section will appear with option ("Keep Recently used in the Smileys Bar ") like this:


This is how it looks when "Recently used" category is moved down to the smileys menu (also notice that only custom categories are there without the XF stock emoji categories):


🔹When the "Recently used" category is down in the smileys menu, in the admin, under Smileys bar settings (Setup->Options->[UW] Smileys Bar), there is an option to add smileys width and padding:



Staff member

Search bar is located on top of the smileys menu. This is how the search bar looks in the smileys menu when you don't have any custom category and you have turned off the default emoji categories.


In the admin area you have the option to remove this search bar completely:


This can be useful when you don't use any custom categories nor default emoji categories, just the default smileys and your "Recently used" category in the Smileys Bar. In that case your Smileys Bar then can look like this (without the dropdown arrow):



Staff member

Smileys menu holds the search bar, your custom categories and/or the default XF emoji categories. This is how it looks when the smileys menu contains custom categories and also default XF emoji categories.


In the admin area you have the option to set up the size of the smileys menu:


I've noticed that many administrators don't even know that XF comes with emoji categories. They just use their own custom categories. With Smileys Bar you can show this emoji categories in smileys menu or you can keep them removed from smileys menu with the use of the defaul XF option that you can find in Setup->Options->Messages->Show emoji in smilie menu ).


This is how it looks like with the option "Show emoji in smilie menu" unchecked. (you will see only custom categories):


Many administrators use many kinds of large, animated images as smileys. Now they have the option to edit the size and spacing for these custom images so they look better in the smileys menu.

In the admin area, for each category of smileys you can set different dimensions and different spacing between images:


Example. While the stock XF emojis keep their default size and spacing, the animated images below have their size set to 78x44px with spacing of 5px:


We took the extra mile to make this add-on work great for custom smileys. You can set a specific size and spacing for each of your custom smileys category. Sample on a dark theme:



Staff member

A magnifier button on the right side of the Smileys Bar, when selected (in blue colour), will insert xF stock emojis into the text editor in max size, and that is 64px.


😍 👍 ❤ 🌹
After a page reload, the button will deselect automatically.

You can have smaller size, if you want, it is admin configurable:


And it has also user group permission so you can allow this only for a user group of your choice:


In the admin you have also the option to turn off this feature. And if you keep it turned on, you can give the end user the option to let him turn it off, if he wants.


These are the options in the user's Preferences:


Latest eCommerce products

📣 Affiliate Program 📣

A way how to get our add-ons completely free!

Just go to the page Affiliate Program in your preferences and copy your referral link, place it wherever you like and you will get 10% from all sales from that link. This way you can earn all the money you had to pay for the add-ons.

❗NOTE❗ You have to be a customer first before you can use Affiliate Program.

New threads

Online statistics

Members online
Guests online
Total visitors

Forum statistics

Latest member


Money made selling these add-ons is't enough to cover my expenses. If you like any of the add-ons here, and if you can afford it, please consider a donation. All money will be used only for farther development of these add-ons. Thanks.