How to get MyAlerts Bell in Header - myBB

[_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!

 

[BrolySSJ]

Having a notification bell is very important because in this way you are able to actually see the activity that you missed out and that you were a part off.

 

[saoussen57651]

This is a good PHP lesson for beginners as I see the full document. You can learn many tricks from it.

 

[BrolySSJ]

This is a good PHP lesson for beginners as I see the full document. You can learn many tricks from it.

Tutorials like this can serve as a good foundation for those that are interested in these topics and how to code and enhance their website as well. That is where these forums come in handy.