PhpBB Emoji ScrollBar

// add your code here
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Hello 👽

In this video, I will show you how to install Emojis in phpBB.

Why Emoji in phpBB?

Emojis, like on any other platform, bring an extra touch of joy, expressiveness, and friendliness, contributing to a more pleasant and interactive experience.

To install emojis in phpBB, search for and download the desired files, select the emojis you want to use, and then install them directly into the platform.

Notes:

Emojis can be in .GIF format (animated or static) or .PNG format (static only).
Upon installing phpBB, you will find 24 default emojis provided by phpBB in the folder phpBB/images/smilies/. These are in .GIF format, animated, and have a size of 15px width and 17px height.
After installing a large number of emojis in phpBB, I noticed that the platform does not include a scroll bar for the emoji section by default, which can make navigation difficult when the list is extended.
I made modifications to add a scroll bar, useful in cases where a large number of emojis are installed, such as over 50.
I selected and installed a small emoji package in .PNG format, with a size of 160px x 160px. After installation, I set the emoji size to 40px x 40px directly from the ACP (Admin Control Panel).
In phpBB, I installed a total of 260 emojis, but more can be installed. I recommend installing 30 emojis at a time, in alphabetical order, to fit correctly into the smiley-box without requiring additional adjustments in the ACP.

Manual and Automatic Installation

In phpBB, there are two options for installing emojis:
Install smilies package (smilies.pak) – Provides an automatic method for adding multiple emojis at once.
Add multiple smilies – Allows manual installation, emoji by emoji, or a selected set.
In this video, I used the manual method, with the "Add multiple smilies" option, to demonstrate the process in detail.

Additional Info:
In the description of this video, I included a package of 3300 emojis in .PNG format, each with a size of 160px x 160px. The emojis are inspired by Apple Emojis, having a similar design to those used on Apple devices. In addition to the emoji package, I added:
A .txt file with the necessary modifications for the scroll bar mentioned earlier.
A folder with 260 emojis and 260 .txt files, each containing a custom Short Code (e.g., :alien:) for each emoji in the 260-pack.
Organization and Installation of Emojis in phpBB

Emoji Organization:
Place all the emojis in a main folder. Organize them into subfolders of 30 emojis each, naming the folders alphabetically as follows:

z - 30 - 1
z - 30 - 2
z - 30 - 3
Continue in this manner, creating a subfolder for each set of 30 emojis. Copy 30 emojis into each subfolder, alphabetically. This helps with an organized and efficient installation.

Installing Emojis in phpBB:

Upload 30 emojis at a time from a folder to the host in the path: phpBB/images/smilies/
Access the Admin Control Panel (ACP), Smilies section.
Select the "Add multiple smilies" option to add emojis from the uploaded folder.
After installing 30 emojis, upload the next set of 30 and repeat the process.
After installation, you can set the size of the emojis in the ACP, under the POSTING - Smilies section. For example, set the .PNG emojis (160px x 160px) to 40px x 40px.

Admin Control Panel (ACP)
In phpBB, to manage emojis, you have the following options:

Post settings
Allow smilies: Yes/No
Smilies per page: Defines the number of emojis displayed per page.
Maximum smilies per post: The maximum number of emojis allowed in a post. Set to 0 for unlimited.
Note: The modifications presented in this video were made on the default prosilver style in phpBB.

Emoji-list with emojis, names, shortcodes, unicode and html entities [massive list] - emojis.json.
https://gist.github.com/oliveratgithub/0bf11a9aff0d6da7b46f1490f86a71eb
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Default files from phpBB (as shown in the video)
The following are the default files from phpBB that were modified or focused on in the video:

HTML Files
/template/
posting_editor.html

CSS Files
/theme/
common.css
forms.css
responsive.css
stylesheet.css

- Custom
/theme/custom.css

- Edit
/theme/stylesheet.css: @import url("custom.css?hash=c9d32cbx");
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---> In the code below, I extracted the styles from the /theme/common.css , /theme/forms.css , /theme/responsive.css files and added them to custom.css to avoid overlapping with the default styles. I made a few minor modifications to the CSS, and for this video, I preferred to centralize them in custom.css

.emoji {
	min-height: 18px;
	min-width: 18px;
	height: 1em;
	width: 1em;
}

.smilies {
	vertical-align: text-bottom;
}

.smiley-box strong {
    display: inline-block;
    margin-left: 5px; /* Adjust the value as needed */
}

/* Hides only <hr> in .smiley-box and .bbcode-status */
.smiley-box hr, .bbcode-status hr {
    display: none; /* Hides the <hr> */
}

/* Additional styles for .smiley-box */
.smiley-box {
    height: 350px; /* Total height of the container */
    width: 19%; /* Container width */
    float: right;
}

/* Area containing emojis with scroll enabled */
.smiley-container {
    height: 250px; /* Height of the emoji area */
    overflow-y: auto; /* Enable vertical scrolling only for emojis */
    border: 1px solid #B4BAC0; /* Border for the emoji area */
}

/* Scrollbar styling for WebKit (Chrome, Edge, Opera) */
.smiley-container::-webkit-scrollbar {
    width: 8px; /* Scrollbar width */
}

.smiley-container::-webkit-scrollbar-thumb {
    background: gray; /* Scrollbar thumb color */
    border-radius: 4px; /* Rounded corners for scrollbar thumb */
}

.smiley-container img {
    margin: 3px; /* Margin around images */
}

/* Styles for .bbcode-status */
.bbcode-status {
    border: 1px dashed #B4BAC0; /* Adds a dashed border with color #B4BAC0 */
    padding: 7px; /* Optional: Adds padding to create space between the border and content */
}

@media (max-width: 700px) {
    .smiley-box, .message-box {
        float: none; /* Removes float for smaller screens */
        width: auto; /* Makes width adaptive */
    }

    .smiley-box {
        height: auto; /* Adjust height automatically */
        margin-top: 5px;
    }

    .smiley-container {
        height: 150px; /* Reduces height of the emoji area */
    }

    .bbcode-status {
        display: none; /* Hides .bbcode-status on smaller screens */
    }
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---> Code from /template/posting_editor.html // The code can be found at lines 50-82 in the text editor.
// Default code:
	<div id="smiley-box" class="smiley-box">
		<!-- EVENT posting_editor_smilies_before -->
		<!-- IF S_SMILIES_ALLOWED and .smiley -->
			<strong>{L_SMILIES}</strong><br />
			<!-- BEGIN smiley -->
				<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
			<!-- END smiley -->
		<!-- ENDIF -->
		<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED -->
			<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 750, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
		<!-- ENDIF -->
		<!-- EVENT posting_editor_smilies_after -->
		<!-- IF BBCODE_STATUS -->
		<div class="bbcode-status">
			<!-- IF .smiley --><hr /><!-- ENDIF -->
			{BBCODE_STATUS}<br />
			<!-- IF S_BBCODE_ALLOWED -->
				{IMG_STATUS}<br />
				<!-- IF S_BBCODE_FLASH -->
				{FLASH_STATUS}<br />
				<!-- ENDIF -->
				{URL_STATUS}<br />
			<!-- ENDIF -->
			{SMILIES_STATUS}
		</div>
		<!-- ENDIF -->
		<!-- EVENT posting_editor_bbcode_status_after -->
		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->
			<!-- IF S_EDIT_DRAFT --><strong><a href="{S_UCP_ACTION}">{L_BACK_TO_DRAFTS}</a></strong><!-- ENDIF -->
			<!-- IF S_DISPLAY_REVIEW --><strong><a href="#review">{L_TOPIC_REVIEW}</a></strong><!-- ENDIF -->
		<!-- ENDIF -->
	</div>
// Custom code:
    <div id="smiley-box" class="smiley-box">
        <div class="smiley-container">
            <!-- EVENT posting_editor_smilies_before -->
            <!-- IF S_SMILIES_ALLOWED and .smiley -->
                <strong>{L_SMILIES}</strong><br />
                <!-- BEGIN smiley -->
                    <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;">
                        <img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" />
                    </a>
                <!-- END smiley -->
            <!-- ENDIF -->
            <!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED -->
                <br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 750, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
            <!-- ENDIF -->
            <!-- EVENT posting_editor_smilies_after -->
        </div> <!-- Closing tag for .smiley-container -->

        <!-- IF BBCODE_STATUS -->
        <div class="bbcode-status">
            <!-- IF .smiley --><hr /><!-- ENDIF -->
            {BBCODE_STATUS}<br />
            <!-- IF S_BBCODE_ALLOWED -->
                {IMG_STATUS}<br />
                <!-- IF S_BBCODE_FLASH -->
                {FLASH_STATUS}<br />
                <!-- ENDIF -->
                {URL_STATUS}<br />
            <!-- ENDIF -->
            {SMILIES_STATUS}
        </div>
        <!-- ENDIF -->
        <!-- EVENT posting_editor_bbcode_status_after -->
        <!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
            <!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->
            <!-- IF S_EDIT_DRAFT --><strong><a href="{S_UCP_ACTION}">{L_BACK_TO_DRAFTS}</a></strong><!-- ENDIF -->
            <!-- IF S_DISPLAY_REVIEW --><strong><a href="#review">{L_TOPIC_REVIEW}</a></strong><!-- ENDIF -->
        <!-- ENDIF -->
    </div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---> Watch the video to see what I modify/remove from /theme/common.css , /theme/forms.css , /theme/responsive.css
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---> Default code from /theme/common.css The code can be found at lines 1064-1073 in the text editor.

.emoji {
	min-height: 18px;
	min-width: 18px;
	height: 1em;
	width: 1em;
}

.smilies {
	vertical-align: text-bottom;
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---> Default code from /theme/forms.css The code can be found at lines 280-288 in the text editor.

/* Emoticons panel */
.smiley-box {
	width: 18%;
	float: right;
}

.smiley-box img {
	margin: 3px;
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---> Default code from /theme/responsive.css The code can be found at lines 358-369 in the text editor. @media (max-width: 700px) {}

	.smiley-box, .message-box {
		float: none;
		width: auto;
	}

	.smiley-box {
		margin-top: 5px;
	}

	.bbcode-status {
		display: none;
	}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------