While on Facebook today, saw the message red bubble with the message count in it. I dig that. Had to create one and use it here on idesignSMF.

This should work on most idesignSMF themes.

Subs.php find:

Code Select Expand

$context['menu_buttons']['pm']['title'] .= ' [<strong>' . $context['user']['unread_messages'] . '</strong>]';

Replace with:

Code Select Expand

$context['menu_buttons']['pm']['title'] .= ' <span class="pmJewel">' . $context['user']['unread_messages'] . '</span>';

Theme's CSS file add at the very end.

Code Select Expand

.pmJewel {
  background-color: #ff0000;
  border: 1px solid #c24440;
  -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
    border-radius: 2px;
  padding: 1px 7px 1px 6px;
  color: #f1f1f1;
  font-size: 12px;
  width:  16px;
  height: 16px;
  margin-left: 5px;
  text-align: center;
}

While on Facebook today, saw the message red bubble with the message count in it. I dig that. Had to create one and use it here on idesignSMF.

This should work on most idesignSMF themes.

Subs.php find:

Code Select Expand

$context['menu_buttons']['pm']['title'] .= ' [<strong>' . $context['user']['unread_messages'] . '</strong>]';

Replace with:

Code Select Expand

$context['menu_buttons']['pm']['title'] .= ' <span class="pmJewel">' . $context['user']['unread_messages'] . '</span>';

Theme's CSS file add at the very end.

Code Select Expand

.pmJewel {
  background-color: #ff0000;
  border: 1px solid #c24440;
  -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
    border-radius: 2px;
  padding: 1px 7px 1px 6px;
  color: #f1f1f1;
  font-size: 12px;
  width:  16px;
  height: 16px;
  margin-left: 5px;
  text-align: center;
}