Activity

  • james posted an update 1 year, 2 months ago

    I have been messing around with buddypress recently and came up with this bit of code that you can insert into your header.php. Basically what it will do is create alerts/counter for logged in users that will display if you have any new notifications/friend requests or messages. It is based upon an if statement that checks if the count is greater than 0 and if it is then it will display an alert bubble but if it isn’t then nothing shows up.

    Anyway enough of me blabbing here the code (I have put some helpful comments on the first alert block to show you whats happening):

    user_login . ‘/notifications/’; ?>”> //this creates a dynamic user link for logged in users with a fontawesome icon, To change where the link goes just change /notifications/ to your desired location for example “messages”.

    0 ) {
    //this if statement then check if the number in the count variable is greater than 0

    echo ‘

    ‘; echo $count; echo ‘

    ‘;  // if it is greater than 0 then it will echo out a div (that can be styled using css) and inside this div it will also echo the number of notifications the user has.
    } else {
    //if the count is 0 nothing will be displayed
    }

    ?>

    </div>

    user_login . ‘/friends/requests/’; ?>”>

    0 ) {
    echo ‘

    ‘; echo $count_requests; echo ‘

    ‘;
    } else {
    // The notif count is 0.
    }

    ?>

    </div>

    user_login . ‘/messages/’; ?>”>

    0 ) {
    echo ‘

    ‘; echo $count_messages; echo ‘

    ‘;
    } else {
    // The notif count is 0.
    }

    ?>

    </div>

    The CSS:

    .site-header-user-notifcations {

    position: relative;
    float: left;
    line-height: 60px;
    margin-left: 10px;
    margin-right:10px;
    font-size:18px;

    }

    .site-header-user-notifcations-bubble {

    position: absolute;
    bottom: 29px;
    width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    background-color: #1fb3dd;
    color: #fff;
    line-height: 20px;
    text-align: center;
    right: -11px;
    }

     

     


    • what-it-should-look-like
      what-it-should-look-like