I know there are many prefix codes available on the official support forums, but most of them are outdated and may not work with all versions anymore.

Therefore, I have created a new prefix code for 2024 that includes a modern drop-down list. This list automatically places commas between prefixes and allows users to select the type of prefix—either image or text, depending on their preference.
It works on all versions.



Here is an example of prefixes that appear as an image rather than text.


Here is an example of prefixes that appear as an  text rather than image.


-------------------------------





Installing the JavaScript
--------------------------
Title : as you like
Placement : In all the pages

Code:

$(function() {
$(document).ready(function() {
    $('a:not(:has(img))').each(function() {
        var html = $(this).html();
        var updatedHtml = html;
 
     
      updatedHtml = updatedHtml
            // Select prefix-img
            .replace(/\[sonic-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/unname11.jpg" />')
            .replace(/\[mario-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/superm10.jpg" />')
            .replace(/\[Yoshi-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/yoship10.png" />')
            .replace(/\[conan-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/superm11.jpg" />')
            .replace(/\[star-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/png-tr10.png" />')
            .replace(/\[solved-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f62/11/40/02/06/1_copy11.png" />')
       
            // Select prefix-Text
            .replace(/\[sonic\]/g, '<div style="padding: 3px;color: #ffffff;background: #1c45bb;display: inline-block;">sonic</div>')
            .replace(/\[mario\]/g, '<div style="padding: 3px;color: #ffffff;background: #e60002;display: inline-block;">mario</div>')
            .replace(/\[Yoshi\]/g, '<div style="padding: 3px;color: #ffffff;background: #32a726;display: inline-block;">Yoshi</div>')
            .replace(/\[conan\]/g, '<div style="padding: 3px;color: #ffffff;background: #054d87;display: inline-block;">conan</div>')
            .replace(/\[star\]/g, '<div style="padding: 3px;color: #000000;background: #f9dd01;display: inline-block;">star</div>')
            .replace(/\[solved\]/g, '<div style="padding: 3px;color: #ffffff;background: #68ad3f;display: inline-block;">solved</div>')
 
 
;$(this).html(updatedHtml);
    });});});


document.addEventListener("DOMContentLoaded", function() {
    var conan2000 = [
        { value: 'conan20000', text: 'Select prefix-img' },
        { value: 'option1', text: '[sonic-img]' },
        { value: 'option2', text: '[mario-img]' },
        { value: 'option3', text: '[Yoshi-img]' },
        { value: 'option4', text: '[conan-img]' },
        { value: 'option5', text: '[star-img]' },
        { value: 'option6', text: '[solved-img]' },
        { value: 'conan200000', text: 'Clear' }
    ];
    var konan2000 = [
        { value: 'conan20000', text: 'Select prefix-Text' },
        { value: 'option1', text: '[sonic]' },
        { value: 'option2', text: '[mario]' },
        { value: 'option3', text: '[Yoshi]' },
        { value: 'option4', text: '[conan]' },
        { value: 'option5', text: '[star]' },
        { value: 'option6', text: '[solved]' },
        { value: 'conan200000', text: 'Clear' }
    ];
    var $input = document.querySelector('input[name="subject"]');
    var $dropconan2000 = document.createElement('select');
    var $forumButton = document.createElement('button');
    $dropconan2000.classList.add('dropconan2000', 'default'); // Start with default class
    $forumButton.classList.add('dropconan2000-forum', 'default'); // Start with default class
    $forumButton.textContent = 'Switch to text prefix';
   
    var isConan2000Visible = true;
   
    function populatedropconan2000(options) {
        $dropconan2000.innerHTML = ''; // Clear existing options
        options.forEach(function(option) {
            var opt = document.createElement('option');
            opt.value = option.value;
            opt.textContent = option.text;
            $dropconan2000.appendChild(opt);
        });
    }
    populatedropconan2000(conan2000);
    $forumButton.addEventListener('click', function(event) {
        event.preventDefault();
        if (isConan2000Visible) {
            populatedropconan2000(konan2000);
            $forumButton.textContent = 'prefix-Text';
            $forumButton.classList.remove('default');
            $forumButton.classList.add('forumd');
            $dropconan2000.classList.remove('default');
            $dropconan2000.classList.add('forumd');
        } else {
            populatedropconan2000(conan2000);
            $forumButton.textContent = 'prefix-img';
            $forumButton.classList.remove('forumd');
            $forumButton.classList.add('default');
            $dropconan2000.classList.remove('forumd');
            $dropconan2000.classList.add('default');
        }
        isConan2000Visible = !isConan2000Visible;
    });
   
    $dropconan2000.addEventListener('change', function() {
        var selectedValue = $dropconan2000.value;
        var selectedText = $dropconan2000.options[$dropconan2000.selectedIndex].text;
        var currentValue = $input.value;
       
        if (selectedValue === 'conan20000') {
            return;
        } else if (selectedValue === 'conan200000') {
            $input.value = '';
        } else {
            if (currentValue) {
                // Adding selectedText with a leading comma if there are existing words
                $input.value = selectedText + ', ' + currentValue;
            } else {
                $input.value = selectedText;
            }
        }
    });
    var container = document.createElement('div');
    container.classList.add('dropconan2000-container');
    container.appendChild($forumButton);
    container.appendChild($dropconan2000);
    $input.parentNode.insertBefore(container, $input.nextSibling);
});


 
document.write('<style type="text/css">
.dropconan2000-forum.default,.dropconan2000.default {background-color: #007bff !important;color: #fff; border-radius: 10px; cursor: pointer;}
.dropconan2000-forum.forumd,.dropconan2000.forumd {background-color: #28a745 !important; color: #fff;border-radius: 10px;cursor: pointer;}
.dropconan2000.default, .dropconan2000.forumd {height: 40px;}
 select.dropconan2000.forumd option {background: #0e4419;color: azure;}
 select.dropconan2000.default  option {background: #102a46;color: #ffffff;}
           
  button.dropconan2000-forum.forumd,button.dropconan2000-forum.default {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    margin-right: 5px;     
}
 .dropconan2000-container {margin: 6px;}
 
              </style>');

Don't forget to save

You can now choose which type of prefix you prefer, whether it's an image or text.



Modifying the script
______________________________________

The next part of the code is responsible for showing the prefix names in the dropdown list.

Code:

 var conan2000 = [
                { value: 'conan20000', text: 'Select prefix-img' },
                { value: 'option1', text: '[sonic-img]' },
                { value: 'option2', text: '[mario-img]' },
                { value: 'option3', text: '[Yoshi-img]' },
                { value: 'option4', text: '[conan-img]' },
                { value: 'option5', text: '[star-img]' },
                { value: 'option6', text: '[solved-img]' },
                { value: 'conan200000', text: 'Clear' }
            ];
            var konan2000 = [
                { value: 'conan20000', text: 'Select prefix-Text' },
                { value: 'option1', text: '[sonic]' },
                { value: 'option2', text: '[mario]' },
                { value: 'option3', text: '[Yoshi]' },
                { value: 'option4', text: '[conan]' },
                { value: 'option5', text: '[star]' },
                { value: 'option6', text: '[solved]' },
                { value: 'conan200000', text: 'Clear' }
            ];

You can change the names as you like
and you can add a new line.

Code:

{ value: 'option99', text: '[test]' },

The next part of the code is responsible for replacing the prefix with text .

Code:

// Select prefix-Text
            .replace(/\[sonic\]/g, '<div style="padding: 3px;color: #ffffff;background: #1c45bb;display: inline-block;">sonic</div>')
            .replace(/\[mario\]/g, '<div style="padding: 3px;color: #ffffff;background: #e60002;display: inline-block;">mario</div>')
            .replace(/\[Yoshi\]/g, '<div style="padding: 3px;color: #ffffff;background: #32a726;display: inline-block;">Yoshi</div>')
            .replace(/\[conan\]/g, '<div style="padding: 3px;color: #ffffff;background: #054d87;display: inline-block;">conan</div>')
            .replace(/\[star\]/g, '<div style="padding: 3px;color: #000000;background: #f9dd01;display: inline-block;">star</div>')
            .replace(/\[solved\]/g, '<div style="padding: 3px;color: #ffffff;background: #68ad3f;display: inline-block;">solved</div>')


You can change the names as you like
and you can add a new line.

Code:

 .replace(/\[test\]/g, '<div style="padding: 3px;color: #ffffff;background: #1c45bb;display: inline-block;">test</div>')

The next part of the code is responsible for replacing the prefix with image.

Code:

// Select prefix-img
            .replace(/\[sonic-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/unname11.jpg" />')
            .replace(/\[mario-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/superm10.jpg" />')
            .replace(/\[Yoshi-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/yoship10.png" />')
            .replace(/\[conan-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/superm11.jpg" />')
            .replace(/\[star-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f28/20/46/29/87/png-tr10.png" />')
            .replace(/\[solved-img\]/g, '<img style="width: 45px;height: 45px;vertical-align: bottom;" src="https://i.servimg.com/u/f62/11/40/02/06/1_copy11.png" />')

You can change the names and images as you like and you can add a new line.

Code:

.replace(/\[test-img\]/g, '<img style="width: 45px; height: 45px;" src="https://i.servimg.com/u/f28/20/46/29/87/superm11.jpg" />')

-----




We hope you like this update and find it useful.

@Ruby496Williams Thank you very much for your kind words.
^^

Well done. Always good tutorials and unique.

Wizzard wrote:Well done. Always good tutorials and unique.

Thank you @Wizzard ^^
I’m glad you find the tutorials helpful

Hello, there.
I have been using this code for a while now but then I realized that it was breaking the Chatbox button on the toolbar. If someone is online in the Chatbox, the (0) will still stay at 0 instead of increasing to 1, or 2, etc.

I love the code and the features, though!
I was going to message you but couldn't find that option on your profile.

Obscure wrote:I was going to message you but couldn't find that option on your profile.

His private messages are disabled, because multiple users asks support in PM instead of creating an topic help!

Mihai wrote:

Obscure wrote:I was going to message you but couldn't find that option on your profile.

His private messages are disabled, because multiple users asks support in PM instead of creating an topic help!

Ah, that makes sense! I forgot about that! Thank you for the reminder!

Hello @Obscure

I updated the code on September 17, 2024. Could you please try it again?

I haven't noticed any issues since the last update.

كونان2000 wrote:Hello @Obscure

I updated the code on September 17, 2024. Could you please try it again?

I haven't noticed any issues since the last update.

It still doesn't work. The same issue occurs.

Obscure wrote:

كونان2000 wrote:Hello  @Obscure

I updated the code on September 17, 2024. Could you please try it again?

I haven't noticed any issues since the last update.

It still doesn't work. The same issue occurs.

Are you using this on the forum in your profile?

Yes, I have. I also didn't remove the code so it is still published on that site.

I tested the code on three forums and on all versions.
I also have a friend who tested the code,
and there were no issues with the Chatbox .


The problem might be with your forum, not the code.

I tested it on two forums and the same thing occurred.
I will try to figure it out later when I have more time. Thank you for trying and for testing it. I hope you have a nice weekend.