[TUT] - Font Awesome 5 - Postbit status & Showteam status (online/offline/away)

Well, a happy   St. Patrick's Day to all of those of us that are lucky enough to simply be Irish, and for those that are not, well, sorry about your bad luck, but happy happy St. Patrick's Day, regardless, hahaha!   anyhoo..., * just yet another old tutorial that I simply just now found a quick few seconds of free time to re-add here again...

[TUT] - Font Awesome 5 - Postbit status & Showteam status (online/offline/away)

ie:







1. Loading Font Awesome 5

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

Find:

{$stylesheets}

Add the following after:

Unless you already have internally linked font awesome ore plan do such, you would simply apply external include of such:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

* Or you can also just download Fontawesome5 pkg and strip it down for size to be used for for internal theme include:

ie: download web-specific files source: https://use.fontawesome.com/releases/v5.....2-web.zip

And change headerinclude linkage to reflect where you uploaded your internal library

Internal linking example:

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

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 be similar you can do the following:

ie:






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;
}

a.user_online_link:link,
a.user_online_link:visited,
a.user_online_link:active,
a.user_online_link:hover {
	text-decoration: none;
}

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

a.user_away_link:link,
a.user_away_link:visited,
a.user_away_link:active,
a.user_away_link:hover {
	text-decoration: none;
}
 

Replace postbit_online with:

<a class="user_online_link" 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 class="user_away_link" href="{$post['profilelink_plain']}" title="{$lang->postbit_status_away}"><span class="user_away" alt="{$lang->postbit_status_away}"></span></a>

now, you note I said above "if you want it similar" ???, ok, as the two parts of the tutorial are styled slightly diff and while yes the above 2 css examples make it very similar, if you want it exactly the same then you would apply the overall css like so:

/** ShowTeam FA Status by vintagedaddyo **/

.buddy_offline:before {
	font-family: "Font Awesome 5 Free";
	content: "\f057";
	font-size: 13px;
	color: #C7C7C7;
	font-weight: 900;	
}

.buddy_online:before {
	font-family: "Font Awesome 5 Free";
	content: "\f058";
	font-size: 13px;
	color: #15A018;
	font-weight: 900;	
}

.buddy_away:before {
	font-family: "Font Awesome 5 Free";
	content: "\f057";
	font-size: 13px;
	color: #FCD12A;
	font-weight: 900;	
}

/** 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;
}

a.user_online_link:link,
a.user_online_link:visited,
a.user_online_link:active,
a.user_online_link:hover {
	text-decoration: none;
}

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

a.user_away_link:link,
a.user_away_link:visited,
a.user_away_link:active,
a.user_away_link:hover {
	text-decoration: none;
}

* the only real change is applying staff area icons to 13px font size and adding a font-weight for solid fa icons

etc, etc, and you would then edit further for your usages...

Best of luck!    Happy editing!  ~ V