Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] - FA5 - Postbit status & Showteam status (online/offline/away) (re-posted)
#1
Information 
Font Awesome 5 - Postbit status & Showteam status (online/offline/away)

** ( re-posted due to numerous user requests and complaints after I deleted my old tutorials. )

1. Loading Font Awesome 5

In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template.

Add the following after:
{$stylesheets}


External linking:

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


Internal linking:

<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome5/css/all.css">

* You can download Fontawesome5 pkg stripped down for size to be used for theme includes here:
http://s000.tinyupload.com/index.php?fil...7200671326

2. Adding Your Icons


Add to global.css:


/** ShowTeam FA Status by vintagedaddyo **/

.buddy_offline:before {
font-family: "Font Awesome 5 Free";
content: "\f057";
font-size: 16px;
color: #C7C7C7;
}
.buddy_online:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
font-size: 16px;
color: #15A018;
}
.buddy_away:before {
font-family: "Font Awesome 5 Free";
content: "\f057";
font-size: 16px;
color: #FCD12A;
}


In Show Forum Team Templates -> showteam_usergroup_user
Find:

<img src="{$theme['imgdir']}/buddy_{$status}.png" title="{$lang->$status}" alt="{$lang->$status}" style="vertical-align: middle;" />


Replace with:


<span class="buddy_{$status}" title="{$lang->$status}" alt="{$lang->$status}" style="vertical-align: middle;">&nbsp;</span>

Now if you want the postbit user online/offline/away status to match do the following:
Add to global.css:


/** User FA Postbit Status by vintagedaddyo **/

.user_offline:before {
font-family: "Font Awesome 5 Free";
content: "\f057";
font-size: 13px;
color: #C7C7C7;
font-weight: 900;
}
.user_online:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
font-size: 13px;
color: #15A018;
font-weight: 900;
}
.user_away:before {
font-family: "Font Awesome 5 Free";
content: "\f057";
font-size: 13px;
color: #FCD12A;
font-weight: 900;
}


Replace postbit_online with:

<a href="online.php" title="{$lang->postbit_status_online}"><span class="user_online" alt="{$lang->postbit_status_online}"></span></a>


Replace postbit_offline with:

<span class="user_offline" title="{$lang->postbit_status_offline}" alt="{$lang->postbit_status_offline}"></span>


Replace postbit_away with:

<a href="{$post['profilelink_plain']}" title="{$lang->postbit_status_away}"><span class="user_away" alt="{$lang->postbit_status_away}"></span></a>
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)