1 Instalacja Font Awesome
Import - wykonujemy o ile nie mamy jeszcze zaimportowanych arkuszy Font Awesome.
Najnowsza wersja zawsze jest widoczna tutaj
Do szablonu headerinclude dodajemy:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">2 Załączenie skryptu do szablonu
W szablonie headerinclude zaraz pod linijką:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1806"></script>Dodajemy:
<script type="text/javascript">
$(document).ready(function()
{
$(".expcolimage .expander").each(function()
{
if($(this).data('src'))
{
$(this).addClass($(this).data('src').replace('.png', ''));
}
});
expandables.expandCollapse = function(e, controls)
{
element = $(e);
if(!element || controls == false)
{
return false;
}
var expandedItem = $("#"+controls+"_e");
var collapsedItem = $("#"+controls+"_c");
if(expandedItem.length && collapsedItem.length)
{
if(expandedItem.is(":hidden"))
{
expandedItem.toggle("fast");
collapsedItem.toggle("fast");
this.saveCollapsed(controls);
}
else
{
expandedItem.toggle("fast");
collapsedItem.toggle("fast");
this.saveCollapsed(controls, 1);
}
}
else if(expandedItem.length && !collapsedItem.length)
{
if(expandedItem.is(":hidden"))
{
expandedItem.toggle("fast");
element.removeClass("collapse_collapsed").addClass("collapse")
.attr("alt", "[-]")
.attr("title", "[-]");
element.parent().parent('td').removeClass('tcat_collapse_collapsed');
element.parent().parent('.thead').removeClass('thead_collapsed');
this.saveCollapsed(controls);
}
else
{
expandedItem.toggle("fast");
element.removeClass("collapse").addClass("collapse_collapsed")
.attr("alt", "[+]")
.attr("title", "[+]");
element.parent().parent('td').addClass('tcat_collapse_collapsed');
element.parent().parent('.thead').addClass('thead_collapsed');
this.saveCollapsed(controls, 1);
}
}
return true;
};
});
</script>3 Edycja stylów .css
Otwieramy arkusz global.css i na samym końcu dodajemy:
.expander.fa.collapse:before {
content: '\f062';
}
.expander.fa.collapse_collapsed:before {
content: '\f063';
}4 Edycja szablonów
W szablonie forumbit_depth1_cat zamieniamy fragment:
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>Na:
<div class="expcolimage">
<span data-src="{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander fa" alt="{$expaltext}" title="{$expaltext}"> </span>
</div>W szablonie index_boardstats podmieniamy linię:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['boardstats']}.png" id="boardstats_img" class="expander" alt="[-]" title="[-]" /></div>Na następujący fragment:
<div class="expcolimage">
<span data-src="collapse{$collapsedimg['boardstats']}.png" id="boardstats_img" class="expander fa" alt="[-]" title="[-]"> </span>
</div>Kolejno edytujemy szablon showthread_quickreply podmieniając:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>Na:
<div class="expcolimage">
<span data-src="collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander fa" alt="[-]" title="[-]"> </span>
</div>Ostatnim szablonem do edycji jest private_quickreply gdzie zamieniamy:
<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>Na:
<div class="expcolimage">
<span data-src="collapse{$collapsedimg['quickreply']}.png" id="quickreply_img" class="expander fa" alt="[-]" title="[-]"> </span>
</div>5 Efekt
Metoda napisana przez ATofighi, lekko zmodyfikowałem i udostępniam za jego pozwoleniem.