MyBB Community Forums

Full Version: Replace expcolimage [ Expand/Collapse ] with Font Awesome
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Go to Theme templates 

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>

and   index_boardstats

Find
<div class="expcolimage"><img src="{$theme['imgdir']}/" 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>

  
Save 
  
Go to Global.css

Add 

.thead.thead_collapsed .expander:before{
		transform: rotate(-180deg);
}
.thead .expander:before{
	display:inline-block;
	font-size:16px;
    font-family: 'Font Awesome 5 Free';
    content: "\f106";
    font-weight:900;
    transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out;
}

Preview : 

[Image: Bd3uyZO.gif]

Note: if you never use fontawesome before then add below mention code to headerinclude template 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

Helpful tutorial , thanks for sharing.
+1 rep.
nice tutorial, thank you.
i am happy if you find it helpful , thank you
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>