1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Inbox & Alert Item Count Styling

Discussion in 'Styling and Customization Questions' started by Anthony Parsons, Aug 1, 2012.

  1. Anthony Parsons

    Anthony Parsons Well-Known Member

    I have an issue I'm hoping someone has dealt with, being I want the item count in both the inbox and alerts to remain, not disappear.

    The obvious making it visible, easy enough... keeping it visible, not so much.

    Screen Shot 2012-08-01 at 5.43.06 PM.png

    Problem 1

    I want to stop the item count disappearing on hover / activating the menu. I'm not sure whether it disappears on hover or on the menu being triggered. Is it a CSS or JS thing?

    Problem 2

    You can see the alerts are being cut off on the right. Any solution to correcting that issue / possible ideas?
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Can you post the URL? Need to debug and see how you have implemented this. Maybe it's being covered by the popup menu.
    Anthony Parsons likes this.
  3. Anthony Parsons

    Anthony Parsons Well-Known Member

    Just turned registration back on for you Jake... http://seotesting.com

    A dev install that I'm playing with for a new free distribution style.
  4. Shelley

    Shelley Well-Known Member

    Mind if I reg to take a looksy (though jake will probably figure this out)?

    Edit: Alerts aren't being cut off with the latest version of firefox
    edit: in chrome they are being cropped
    edit: alerts not being cropped in ie9
    edit: alerts are being cropped in safari for windows
    edit: Alerts are not being cropped in Opera

    Edit: Time for the master to takeover (Jake) I couldn't figure it out. :confused:
    Anthony Parsons likes this.
  5. Anthony Parsons

    Anthony Parsons Well-Known Member

    I would be happy with #1 being solved at present... I'm sure Mike or Kier would know the answer to that instantly. Helpppppppppppp pleaseeeeeeeeeeeeeeeeeee Mike or Kier...

    It sounds like #2 is going to simply need some styling finesse... damn it.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Disabled registrations again? Send me a login and I will take a look.
  7. Anthony Parsons

    Anthony Parsons Well-Known Member

    Enabled now. Without confirmation.
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    By default the javascript removes the bubble if the count is 0. Since your intention is to display the 0 count you need to make a small js edit:


    Add the red code. This forces the condition to false so it never removes the bubble:

    balloonCounterUpdate:function(a,b){if(a.length){var e=a.find("span.Total"),d=e.text();e.text(b);0&&(!b||b=="0")?a.fadeOut("fast"):a.fadeIn("fast",function(){var e=parseInt(d.replace(/[^\d]/,""),10),e=parseInt(b.replace(/[^\d]/,""),10)-e;if(e>0){var i=a.closest(".Popup").data("XenForo.PopupMenu"),e=c("<a />").css("cursor","pointer").html(a.data("text").replace(/%d/,
    You are editing the minified javascript so it looks a little hairy due to no formatting.
    kankan, Anthony Parsons and Shelley like this.
  9. Anthony Parsons

    Anthony Parsons Well-Known Member

    You want to know what's funny Jake? As you found that, I actually found your answer to this elsewhere, hidden away in this forum, which I found via searching Google for the id AlertsMenu_Counter, which I found:


    This answer of yours still works... as I just removed both references and it worked. I was making the same mistake mentioned in that link, removing only one reference to it. Both works and the zero remains.

    Well... the linked answer covers alerts, but not inbox alerts.

    As always Jake, you are awesome.
  10. Anthony Parsons

    Anthony Parsons Well-Known Member

    Is your prior one for alerts, or for inbox alerts?

    Hmmm.... nope, that above js suggestion of yours didn't work for the inbox alert.
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That works. :eek:

    It works on my test forum for both menus. Dunno.
    Anthony Parsons likes this.
  12. Anthony Parsons

    Anthony Parsons Well-Known Member

    Ok, used your prior example and removed id="ConversationsMenu_Counter" from the inbox alerts from the template as well... that did the trick and stopped the JS triggering to remove the zero count.
  13. Anthony Parsons

    Anthony Parsons Well-Known Member

    Ok, it seems I have this worked out, however; there is a trade-off with the alert number not zeroing until you move away from the page. For example, take out id="AlertsMenu_Counter" and it works. Do the same for the corresponding inbox id, and it also remains.

    <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
    id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
    <span class="Total">{xen:number $visitor.alerts_unread}</span>
    <span class="arrow"></span>
    I ended up having to modify the actual template itself to fix the alert padding issue, as it wasn't CSS as such, but more the way the visitor tabs are done in both code and css, compared to how the admin links are done. I wrote them to replicate towards admin links, and that fixed the issue.
  14. Anthony Parsons

    Anthony Parsons Well-Known Member

    Screen Shot 2012-08-02 at 8.06.31 PM.png

    And adding 'alert' to the code for that difference, as XF default only uses on or off for visitor tab alerts.

    The pieces fall into place....

Share This Page