How to get MyAlerts Bell in Header

[_B_]

So, on VoxGrid we have the alerts displayed in the header as you would be able to notice:​

This is not how it looks like by default and will require some edits with css and templates to get it looking like above. You will need the MyAlerts plugin for this tutorial.​

[hide]

Replace everything in that template with this code:

<span class="alerts {$newAlertsIndicator}">
? ? <a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fas fa-bell" aria-hidden="true" style="color: #fff;font-size: 15px;"></i>
? ? ?? <span class="<if ($mybb->user['unreadAlerts'] == 0) then>newmessageheadericon232</if><if ($mybb->user['unreadAlerts'] > 0) then>newmessageheadericon23224-new</if>"> {$mybb->user['unreadAlerts']}</span></a>

</span>

Delete this piece of code

{$myalerts_headericon}

3) In the same template (header_welcomeblock_member), find this code:

<div class="menubar-pms">
<a href="{$mybb->settings['bburl']}/private.php"><i class="fa fa-envelope" style="font-size: 15px;"></i><span class="pmnumber-box"> {$mybb->user['pms_unread']}</span></a>
? ? </div>

Replace that with this code:

<div class="menubar-pms">
<a href="{$mybb->settings['bburl']}/private.php"><i class="fa fa-envelope" style="font-size: 15px;"></i><span class="pmnumber-box"> {$mybb->user['pms_unread']}</span></a>
 
{$myalerts_headericon}? ? 
</div>

Scroll to the bottom and add this piece of code at the end:

.pmnumber-box-new{padding: 5px 5px;font-size: 14px;background-color: #ff090959;margin-left: 5px;border-radius: 2px;border-right: 2px solid #00000030;}
.pmnumber-box{padding: 5px 5px;font-size: 14px;background-color: #00000030;margin-left: 5px;border-radius: 2px;border-right: 2px solid #00000030;}
.newmessageheadericon232{padding: 5px 5px;font-size: 14px;background-color: #00000030;margin-left: 5px;border-radius: 2px;border-right: 2px solid #00000030;}
.newmessageheadericon23224-new{padding: 5px 5px;font-size: 14px;background-color: #ff090959;margin-left: 5px;border-radius: 2px;border-right: 2px solid #00000030;}

And you are done . An alert bell with the number of alerts on the side.
[/hide]

 

[DaRealBoss]

Good tutorial man! Thanks for the share!