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

Font Awesome 5 online/offline/away status in ShowTeam plus postbit status Page

$
0
0
Add to headerinclude: * unless fa5 is already included

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

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


.png   Screenshot_20181109-054345.png (Size: 52.87 KB / Downloads: 21)

.png   Screenshot_20181109-134342.png (Size: 111.7 KB / Downloads: 4)

.png   Screenshot_20181109-134407.png (Size: 73.19 KB / Downloads: 5)

.png   Screenshot_20181109-134503.png (Size: 81.11 KB / Downloads: 3)

Viewing all articles
Browse latest Browse all 690

Trending Articles