[For 1.8] MyAlert Notification like Facebook with simple Css

[mujeebdgk]

hi 

first of all i would like to say thanks to Euan T for his great plugin and he also help me to make this happend , thank you so much 


here is tutorial 

You need to look at the template in ACP > Templates & Style > Templates (left bar) > *YOUR THEME* > MyAlerts Templates > myalerts_headericon. 

replace content by this 

<li class="alerts {$newAlertsIndicator}">
    <a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">{$lang->myalerts_alerts}
        <span class ="alert_counter">{$mybb->user['unreadAlerts']} </span></a>
</li>

and add css into ACP > Templates & Style > Theme (left bar) > *YOUR THEME* > alert.css

add this css code and save and refresh your index page with so unread notification 

.alert_counter {
	position: relative;
    top: -7px;
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 9px Verdana;
}

Preview Picture 

[sarmadi]

i just installed "My Alerts" plugin for this topic?

[Michael2014]

I loved this, worked like a charm, thanks!

[mujeebdgk]

Welcome , but all credits goes to EuanT for his great work

[Livewire]

This doesn't work like when someone quotes me it doesn't show...

[mujeebdgk]

This doesn't work like when someone quotes me it doesn't show...

this is just notification style , rest work is done by plugin , kindly disable and enable plugin once then it should work .

[ShineCero]

Bumping this Tutorial if other users have some information on this. How does one go about making different colors when alerts are at 0? That way, users don't get confused when checking their alerts (since it's bright red) when its still at zero.

[TrynCatchMe]

Bumping this Tutorial if other users have some information on this. How does one go about making different colors when alerts are at 0? That way, users don't get confused when checking their alerts (since it's bright red) when its still at zero.

Ill mess with this later this week but I'm sure you could do a type of if statement getting the return count and if it's 0 call another css function which changes the Color.

[GodLess101]

Bumping this Tutorial if other users have some information on this. How does one go about making different colors when alerts are at 0? That way, users don't get confused when checking their alerts (since it's bright red) when its still at zero.

Ill mess with this later this week but I'm sure you could do a type of if statement getting the return count and if it's 0 call another css function which changes the Color.

I can already give you two solutions to this issue, one of them is the 'vanilla' way so to speak, and requires no PHP, it's coded in vanilla js and is a script you add to the footer, since for most mybb forums their myalerts is attached to the header.

Solution 1: JavaScript
The way to go about this is, we grab the value of the alert_counter span and check if the value is 0, then we change the background color of the alert_counter if the condition is true.

I don't have MyAlerts on a test forum right now, but I have written here a sample of how it would look:

<script type="text/javascript">

/* We are using a self-invoking function */
(function() {
var alert_counter = document.getElementsByClassName("alert_counter")[0];

if (alert_counter.InnerHTML == '0') {
  alert_counter.style.backgroundColor = "grey"; // Set the background to a neutral color
}
})();
</script>

Doing this will do a simple check to see if the content of the span is 0, and if it is the case the background color is set to grey.

Solution 2: PHP in templates
I will not dwelve too much into this solution, as I honestly think solution 1 is more proper. The way to go about this is installing PHP in Templates and Template Conditionals Plugin, which will allow you to implement PHP inside your templates.

You can then do something like this:

<li class="alerts {$newAlertsIndicator}">
    <a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">{$lang->myalerts_alerts}
        <span class ="alert_counter" <if $mybb->user['unreadAlerts'] <= 0 then>style="background-color:grey"</endif>>{$mybb->user['unreadAlerts']} </span></a>
</li>

Notice that after the class, I added an if condition that if ends up being evaluated as true, will insert a style tag containing the background-color: grey.

This is the code that you want to look at:

<span class ="alert_counter" <if $mybb->user['unreadAlerts'] <= 0 then>style="background-color:grey"</endif>>{$mybb->user['unreadAlerts']} </span>

Goodluck and have fun.

[tc4me]

I did it like that

<li class = "alerts {$ newAlertsIndicator}">
    <a href=" {$mybb-> settings ['bburl']} / alerts.php "class =" myalerts "onclick =" MyBB.popupWindow ('/ alerts.php? modal = 1 & amp; ret_link = {$ myalerts_return_link} ', {fadeDuration: 250, zIndex: (typeof modal_zindex! ==' undefined '? modal_zindex: 9999)}); return false; "> {$ lang-> myalerts_alerts}
        <if $ mybb-> user ['unreadAlerts'] == 0 then>  </a>
<else>
<span class = "alert_counter"> {$ mybb-> user ['unreadAlerts']} </span> </a>
</if>
</li>

and the  alert.css

.alert_counter {
	position: relative;
    top: -7px;
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 9px Verdana;
}