Replace PM menu text with image that changes if > 0 new messages?

[samborabora]

I'd like to replace the text in the menu with an image, and have it be a different image if there are unread messages. I'd also like to wrap the unread message counter that is appended to the menu item in a div, so it can be styled separately. Should this be done somehow in subs or modifications.english.php? I could put it in the template before the menu separately, but then I couldn't be able to have dropdown menus from it, and I'm not sure how to get the unread count externally from the menu array. What's the best way to do this?

[samborabora]

I've done it like so:

index.template.php

Code Select Expand

if (!$user_info['is_guest'] && $context['user']['unread_messages'] > 0 && isset($context['menu_buttons']['pm']))
echo '
<a href="', $scripturl . '?action=pm">
<div id="pm_iconyunread"></div>
</a>
<span id="alerts_counter" class="alerts_count2 pmmarg">',$context['user']['unread_messages'],'</span>
';
if (!$user_info['is_guest'] && $context['user']['unread_messages'] == 0 && isset($context['menu_buttons']['pm']))
echo '
<a href="', $scripturl . '?action=pm">
<div id="pm_iconyread"></div>
</a>
';

And in css:

Code Select Expand

#pm_iconyunread {
background: url(../images/nav_mail_new.png) center bottom no-repeat;
width: 18px;
height: 14px;
float: left;
margin: 2px 20px 0px 10px;
}
#pm_iconyread {
background: url(../images/nav_mail.png) center bottom no-repeat;
width: 18px;
height: 14px;
float: left;
margin: 2px 20px 0px 10px;
}
.pmmarg {
margin-left: 55px !important;
}
#alerts_counter {
width: 16px;
height: 16px;
text-align: center;
color: white;
position: absolute;
margin-left: 10px;
margin-top: -5px;
display: block;
padding-top: 1px;
overflow: hidden;
font-size: 10px;
background: url(../images/nav_number_badge.png) top left no-repeat;
pointer-events: none;
}
.alerts_count2
{
visibility: visible;
}

It's a slight mess cause it uses some existing styles I had, but that works for a message icon that doesn't need a dropdown. Is this possible to be done exactly like this, whilst being able to have the dropdown menu?

[samborabora]

Well, that would have worked, but I have two menu buttons, because if I try to hide the menu pm button, it hides my new button, obviously. So, I guess I need this to be converted into the actual menu button anyways, since there's no real way of disabling the menu one and keeping mine. Any ideas?

[Arantor]

Better solution: don't rewrite the menu button itself and don't mess with the template either because it's not strictly necessary.

If you go into setupMenuContext() in Subs.php, you will find this code at the bottom:

Code Select Expand

if (!$user_info['is_guest'] && $context['user']['unread_messages'] > 0 && isset($context['menu_buttons']['pm']))
{
$context['menu_buttons']['pm']['alttitle'] = $context['menu_buttons']['pm']['title'] . ' [' . $context['user']['unread_messages'] . ']';
$context['menu_buttons']['pm']['title'] .= ' [<strong>' . $context['user']['unread_messages'] . '</strong>]';
}

This is all about rewriting the menu button's display title to include the unread messages. You can easily rewrite there and know it will be displayed as it should with whatever markup you want it to be.

The alt-title is primarily for Core-based themes to be used as a tooltip but is not used in a Curve based theme to my knowledge.

Point is you can splice in whatever markup you need in there along with the word 'Messages' and not have to fudge it in the menu later.

[samborabora]

Strangely enough, I tried to fiddle about with that part (which is where I got the if (!$user_info['is_guest'] && $context['user']['unread_messages'] > 0 && isset($context['menu_buttons']['pm'])) code from in the first place) but it doesn't seem to affect it at all. I'm wondering if it's because of the menu manager mod I installed, like, a year ago? I'm seeing things like:

Code Select Expand

/* ---- Below section commented out by the Menu Button Manager mod -----
$menu_buttons = array();
foreach ($buttons as $act => $button)
if (!empty($button['show']))
{
$button['active_button'] = false;

// Make sure the last button truely is the last button.
if (!empty($button['is_last']))
{
if (isset($last_button))
unset($menu_buttons[$last_button]['is_last']);
$last_button = $act;
}

// Go through the sub buttons if there are any.
if (!empty($button['sub_buttons']))
foreach ($button['sub_buttons'] as $key => $subbutton)
{
if (empty($subbutton['show']))
unset($button['sub_buttons'][$key]);

// 2nd level sub buttons next...
if (!empty($subbutton['sub_buttons']))
{
foreach ($subbutton['sub_buttons'] as $key2 => $sub_button2)
{
if (empty($sub_button2['show']))
unset($button['sub_buttons'][$key]['sub_buttons'][$key2]);
}
}
}

$menu_buttons[$act] = $button;
}
-------- end section commented out by the Menu Button Manager mod -----  */

and

Code Select Expand

// Added by the Menu manager mod.
if (isset($modSettings['button_parent'][$context['current_action']]))
$current_action = $modSettings['button_parent'][$context['current_action']];

Concerning, since I didn't realize how much of an affect it actually had on the menu, in fact, I'm not sure what functionality it even provides, I've used it for so long. Is there somewhere else the menu buttons are controlled? Trying to edit this part of the subs isn't even doing anything, I'm finding.

[Arantor]

Then it's something broken by that menu button mod, to be honest; I can only comment on how the core SMF functionality works, and in the core functionality, it's controlled by the code I posted.

[samborabora]

I agree, I'd forgotten about the mod. I need to see what happens if I take it off, then I should be able to fix thing. Thanks for your help so far!