Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690

Replace expcolimage [ Expand/Collapse ] with Font Awesome

$
0
0
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">


Viewing all articles
Browse latest Browse all 690

Trending Articles