Howto: Numbers on notification buttons

Post

Posted 13th March 2016, 5:22 pm

Rating:

(

)

#236 (In Topic #55)

Patrick Schmalstig

Site director

Patrick Schmalstig is in the usergroup ‘Administrators’

In this tutorial, I'll explain how you can get red numbers on the top notification buttons to indicate number of unread notifications

Screenshot of this in action:

Image

Difficulty: 2/5

Pros: This will allow your users to know how many unread notifications they have via. a red number bubble on the notification buttons, similar to Facebook.

Cons: The number will still display even if there are 0 unread notifications. However, like the notification button, it will be displayed at 0.5 opacity if there are no notifications.

Step 1. Go to your Admin Zone, and Style -> Themes. You will want to repeat all these steps for each theme you wish to apply this effect to. To apply it to all themes and every theme made via. the theme wizard in the future, apply the effect to the default theme (I do not take liability for anything that happens as a result of editing your default theme!).

Step 2. Edit CSS. Choose "notifications.css" to edit.

Step 3.
ADD at the top

Code


			#noti_Container {
    position:relative;
    width:16px;
    height:16px;
}
.noti_bubble {
    position:absolute;
    top: -6px;
    right:-9px;
    padding:1px 2px 1px 2px;
    background-color:red;
    color:white;
    font-weight:bold;
    font-size:0.55em;




    border-radius:30px;
    box-shadow:1px 1px 1px gray;
}

(Edit the above CSS code to your taste now or in the future to style your notification number bubbles)

Step 4. Save the CSS.

Step 5. Edit the theme's templates. Edit BLOCK_TOP_NOTIFICATIONS.tpl .

Step 6.
FIND

Code


			<a title="{!notifications:NOTIFICATIONS}" id="web_notifications_button" class="leave_native_tooltip count_{NUM_UNREAD_WEB_NOTIFICATIONS%}" &#111;nclick="return toggle_web_notifications(event);" href="{$PAGE_LINK*,_SEARCH:notifications:browse}"><span aria-label="{!COUNT_TOTAL} {!notifications:NOTIFICATIONS}">{NUM_UNREAD_WEB_NOTIFICATIONS*}</span></a>

Step 7.
REPLACE WITH

Code


			<a title="{!notifications:NOTIFICATIONS}" id="web_notifications_button" class="leave_native_tooltip count_{NUM_UNREAD_WEB_NOTIFICATIONS%}" &#111;nclick="return toggle_web_notifications(event);" href="{$PAGE_LINK*,_SEARCH:notifications:browse}"><span aria-label="{!COUNT_TOTAL} {!notifications:NOTIFICATIONS}">{NUM_UNREAD_WEB_NOTIFICATIONS*}</span>
<div id="noti_Container">
<div class="noti_bubble">{NUM_UNREAD_WEB_NOTIFICATIONS*}</div>
</div>
</a>

Step 8.
FIND

Code


			<a title="{!cns:PRIVATE_TOPICS}" id="pts_button" class="leave_native_tooltip count_{NUM_UNREAD_PTS%}" &#111;nclick="return toggle_pts(event);" href="{$PAGE_LINK*,_SEARCH:members:view#tab__pts}"><span aria-label="{!COUNT_TOTAL} {!cns:PRIVATE_TOPICS}">{NUM_UNREAD_PTS*}</span></a>

Step 9.
REPLACE with

Code


			<a title="{!cns:PRIVATE_TOPICS}" id="pts_button" class="leave_native_tooltip count_{NUM_UNREAD_PTS%}" &#111;nclick="return toggle_pts(event);" href="{$PAGE_LINK*,_SEARCH:members:view#tab__pts}"><span aria-label="{!COUNT_TOTAL} {!cns:PRIVATE_TOPICS}">{NUM_UNREAD_PTS*}</span>
    <div id="noti_Container">
<div class="noti_bubble">{NUM_UNREAD_PTS*}</div>
    </div>
</a>

Step 10. Save the template.

Step 11. Clear template and css caches.

Enjoy!

Last edit: 13th March 2016, 5:35 pm by Patrick Schmalstig

Need support for version 10? The core development team is no-longer offering it for free (unless it's a critical bug that breaks your entire site or a serious security hole). Please consider hiring me instead if you need v10 support or a non-critical bug fix. Or, ask the community in the forums!
Do you enjoy Composr? Please consider contributing your talent to the project or recommending Composr to others. Even small contributions make a big impact in the Composr community.
Do you have feedback for us? You can report bugs, suggest features, or give feedback on the Free support options page.
Do you need professional service with your Composr website? Please consider contracting me for your needs through my company, PDStig, LLC. Doing so will also help fund Composr development.
Want to watch live streams of me developing Composr CMS? Please subscribe to me on Twitch to be notified when I stream. Composr development streams are usually spontaneous / not scheduled in advance as work priorities come first.

Post

Posted 13th March 2016, 5:36 pm

Rating:

#237

Patrick Schmalstig

Site director

Edits are finished. Sorry about that.

Need support for version 10? The core development team is no-longer offering it for free (unless it's a critical bug that breaks your entire site or a serious security hole). Please consider hiring me instead if you need v10 support or a non-critical bug fix. Or, ask the community in the forums!
Do you enjoy Composr? Please consider contributing your talent to the project or recommending Composr to others. Even small contributions make a big impact in the Composr community.
Do you have feedback for us? You can report bugs, suggest features, or give feedback on the Free support options page.
Do you need professional service with your Composr website? Please consider contracting me for your needs through my company, PDStig, LLC. Doing so will also help fund Composr development.
Want to watch live streams of me developing Composr CMS? Please subscribe to me on Twitch to be notified when I stream. Composr development streams are usually spontaneous / not scheduled in advance as work priorities come first.

1 guest and 0 members have just viewed this.