Skip to:

[Resolved] Notifications Template

  • Cidade Sonho


    Hello BP <3 Amazing Job! But I think we still need a Notifications Template.

    Why? I donĀ“t wanna use the admin bar.

    My BP 1.8
    My WP 3.5.1

    My BP

    I’m building my theme with bootstrap

    You can see the credits in footer ^_^ thanks for all

Viewing 4 replies - 1 through 4 (of 4 total)

  • Tecca


    You can make your own. Here’s mine as an example. You’ll need to tinker around with the CSS or code if you’d like to display them differently. What the below does is it shows a number (the amount of notifications you have) when you have one or more. It is hidden when there are none to display. Hovering over the number will display your notifications in a drop-down.

    Place into bp-custom.php:

    * Add Notification number to template
    function my_bp_adminbar_notifications_menu() {
    global $bp;
    if ( !is_user_logged_in() )
        return false;
    echo '<div class="notices"><ul class="notices">';
    _e( '', 'buddypress' );
    if ( $notifications = bp_core_get_notifications_for_user( $bp->loggedin_user->id ) ) { ?>
        <li class="parent"><span class="notice-badge"><?php echo count( $notifications ) ?></span>
    echo '</a>';
    echo '<ul class="sub-menu">';
    if ( $notifications ) {
        $counter = 0;
        for ( $i = 0; $i < count($notifications); $i++ ) {
            $alt = ( 0 == $counter % 2 ) ? ' class="alt"' : ''; ?>
            <li<?php echo $alt ?>><?php echo $notifications[$i] ?></li>
            <?php $counter++;
    } else { ?>
        <li><a href="<?php echo $bp->loggedin_user->domain ?>"><?php _e( 'You have no new alerts.', 'buddypress' ); ?></a></li>
    echo '</ul></li>';
    echo '</ul></div>';


    /*-------------------------- Notification dropdown -----------------------------------*/
    .notice-badge { font-weight: bold; cursor: default; background: #d33939; padding: 0 3px; border-radius: 10px }
    .parent.user-bar { width: 86px; text-align:left; float: right; font-weight: bold; }
    .notices { float: right; margin:0; line-height: 45px; z-index: 9999; }
    .notices a { color: #ffffff; }
    .notices ul, .notices { margin:0 2px 0 0; padding:0; list-style-type:none; list-style-position:outside; position:relative; }
    .notices ul a:link, .notices ul a:active, .notices ul a:visited { display:block; padding: 0; text-decoration:none; }
    .notices ul ul a:link, .notices ul ul a:active, .notices ul ul a:visited { width: 480px; display:block; padding:0 7px; text-decoration:none; }
    .notices ul ul a:hover { color: #0d385f; text-shadow: none; }
    .notices ul li { float:left; position:relative; background:none; padding:0 12px; }
    .notices ul li:hover { transition: all 100ms ease-in; }
    .notices ul ul { width: 480px; line-height: 35px; background: #ffffff; position:absolute; right: 0; top:45px; text-align:left; padding:0; display:none; border:1px solid #eeeeee; border-bottom:none; border-top:none; box-shadow:0 0 2px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.1); }
    .notices ul ul a { color:#248361; font-weight: bold; }
    .notices ul li ul a { float:left; }
    .notices ul li ul ul { left:-170px; top:2px; margin:0px; border-right:3px solid #cccccc; border-top:1px solid #eeeeee; }
    .notices ul li ul li { width: 480px; padding:0; margin:0; border-bottom:1px solid #eeeeee; max-width:none; list-style-type:none; text-shadow: none; }
    .notices ul li ul li:hover { background: #f5f5f5; }
    .noticesn ul li:hover ul ul, ul li:hover ul ul ul, ul li:hover ul ul ul ul { display:none; }
    .notices ul li:hover ul, .notices ul li li:hover ul, .notices ul li li li:hover ul, .notices ul li li li li:hover ul { display:block; }
    .notices ul li ul.children li { list-style-type:none; }
    .notices ul li ul li.current-menu-item { background:#f5f5f5; }
    .notices ul li ul li.current-menu-item a { color:#585858; }
    .notices ul li.current-menu-item span { color:#585858; }
    .notices ul li.parent { background-image: url(images/menu-arrow-transparent.png); background-position: center center; background-repeat: no-repeat; }
    .notices ul li.parent:hover { background-image: url(images/menu-arrow1.png); background-position: 14px 36px; background-repeat: no-repeat; }
    .notices ul li ul li.parent:hover { background-image: url(images/menu-arrow-left.png); background-position: 152px center; background-repeat: no-repeat; }

    Place into header.php or wherever you’d like your notifications shown:
    <?php my_bp_adminbar_notifications_menu()?>

    Cidade Sonho


    Work like a charm *–* Thaaanks!



    Thanks! This worked out great. I spent the last few hours combing Google and BP’s board and finally came across a good thread about this.

    Renato Alves


    @tecca Thanks for the snippet. Worked great!

    Do you know how I could take the nav bar of the admin bar when we hover at it? I disabled the admin bar in my website and created on Main menu an icon showing when the person is loggedin. As of now, I created the links myself by hand showing only the links I want them to go. I searched it around here and also on google but haven’t find a good solution.

    Appreciate if you could help me find a way.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] Notifications Template’ is closed to new replies.
Skip to toolbar