How to add Beautiful MyBB Thread Prefix tags

Have you ever wanted to add beautiful thread prefix to your MyBB forums? If you have wanted to add such prefix or tags, the answer is here. In this tutorial, you will learn about how to add MyBB Thread Prefix and Style them to bring a fresh feeling to your forums.

For this tutorial, make sure to have a complete backup before following this tutorial for any theme.

Note – This tutorial is moderate level and requires knowledge of CSS to make advanced modifications

Tutorial

• Go to your Admin CP > General Settings > Select Thread Prefix from left side of your forum.
• Click Add new prefix and you will see a form like this –

• Fill the above form with Prefix and Display style
  • Prefix – Its an option which shows thread prefix on thread prefix option list on new thread pages and edit post pages.
  • Display Style – This is how the prefix will appear next to thread subjects. You may enter HTML markup here or simply use the same as the plain text version above.
  • Available in forums – If you wish to show that prefix in all forums then select “All Forums” option, otherwise, if you want to show in selective forums then select “Select forums” and then select the forums you wish to add that prefix in.
  • Available to groups – Similarly, If you wish to show that prefix to all usergroups then select “All groups” option, otherwise, if you want to show to selective usergroups then select “Select groups” and then select the usergroups you wish usergroups to show that prefix.
• Write Prefix as Peach Theme and Display Style as (Note: We are using Font Awesome 5, so make sure you have added font awesome icons to your forum.

<span class="theme_orange"><i class="fas fa-hand-peace" aria-hidden="true"></i> Peach Theme - </span>

• Save Thread Prefix, now we need to add the style for the newly created thread prefix
• Go to Admin CP > Template and Style > Theme > Add Stylesheet

• Write the Name of Stylesheet as tags.css and Select Write my own content. Write the below code in the newly appeared dialog box

.theme_orange {
    color: #000;
    background: #ffc391;
    padding: 2px 4px;
    font-size: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

• Save the above template and now to go to your forum and try creating a new thread. You will see the new Thread prefix with a beautiful style.

Congratulations, you have now added a new thread prefix with a unique style. You can modify the above CSS to your liking and match it with your theme design. You can see Thread Prefix live on WallBB support forums

For more tutorials follow me on Twitter @WallBB