Thanks, this is most likely handy for most, but, while this tutorial factors only a limited amount of the actual expanders in usage it is wise to note that this only touches on the limited primary expcolimage for forumbit display and boardstats while leaving all other expcolimage untouched and as such I figured it should be suggested that the tutorial should be expanded upon to factor that fact in the aim to actually modify as many of the expcolimage in usage board-wide that this tutorial did not already factor for example, usercp, modcp, help section, quickreply, etc, etc, to then fully compliment / complete the existing tutorial usage for forum display and boardstats now board-wide thus creating a more uniform focus on expcolimage display replacement by font awesome that this initial tutorial began.
Example of expanding upon tutorial:
Loading Font Awesome 5 library
In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template.
Find:
{$stylesheets}
Add one of the following found below after "$stylesheets":
External font awesome library linking example:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
Internal font awesome library linking example:
<link rel="stylesheet" href="{$mybb->asset_url}/v5.15.4/css/all.css">
First the styling edits:
Go to your > Themes > Global.css:
Add:
.thead .expander:before {
font-size:16px;
font-weight:900;
content: "\f106";
display:inline-block;
font-family: 'Font Awesome 5 Free';
transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
}
.thead.thead_collapsed .expander:before {
transform: rotate(-180deg);
}
.tcat .expander:before {
font-size:16px;
font-weight:900;
content: "\f106";
display:inline-block;
font-family: 'Font Awesome 5 Free';
transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
}
.tcat.tcat_menu.tcat_collapse_collapsed .expander:before {
transform: rotate(-180deg);
}
Next, on to the template edits:
Go to your > Theme > Templates:
Forums:
edit > forumbit_depth1_cat:
Find
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
Boardstats:
edit > index_boardstats:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="boardstats_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="boardstats_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
Help sections:
edit > misc_help_section:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="sid_{$section['sid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="sid_{$section['sid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
Usercp:
edit > usercp_nav_messenger:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['usercppms']}.png" id="usercppms_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="usercppms_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
edit > usercp_nav_misc:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['usercpmisc']}.png" id="usercpmisc_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="usercpmisc_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
edit > usercp_nav_profile:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['usercpprofile']}.png" id="usercpprofile_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="usercpprofile_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
Modcp:
edit > modcp_nav_forums_posts:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['modcpforums']}.png" id="modcpforums_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="modcpforums_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
edit > modcp_nav_users:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['modcpusers']}.png" id="modcpusers_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="modcpusers_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
Quickreply:
edit > showthread_quickreply:
Find:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
Replace with:
<div class="expcolimage"><div src="{$theme['imgdir']}/" id="quickreply_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></div>
![[Image: Bd3uyZO.gif]](https://camo.mybb.com/226e8e4ec8c50756ff56cb74752588a208ed59e0/68747470733a2f2f692e696d6775722e636f6d2f42643375795a4f2e676966)