Add time of the notification directly in the toolbar Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    Add time of the notification directly in the toolbar

    Niko
    Niko
    Helper
    Helper


    Male Posts : 3110
    Reputation : 245
    Language : English, Italian, French
    Location : Italy

    Add time of the notification directly in the toolbar Empty Add time of the notification directly in the toolbar

    Post by Niko January 28th 2023, 1:00 pm

    Hello everyone,

    I'm going to share just a super simple resource I just posted on my forum, but I think that it may be useful to some of you. luv
    This tutorial allows you to display the time of the notification directly from the notifications box in the toolbar

    Demo
    Before
    After
    Add time of the notification directly in the toolbar Screen62
    Add time of the notification directly in the toolbar Screen63

    CSS
    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

    Code:
    #fa_toolbar #fa_right #notif_list li .contentText {
        height: -webkit-fill-available;
    }
    span.notification_time {
        display: flex;
        padding-top: 3px!important;
        color: gray;
        float: right;
    }

    Customize CSS
    CSS can be fully customized according to the style of the forum.
    You can remove the attribute
    Code:
    float: right;
    if you want to keep the timing directly under the notification content.

    Javascript & jQuery
    For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

    • Title: free choice - does not influence the code effect
    • Where: All pages
    • Code:

      Code:
      $(function() {
       $(function() {
      /*
      Title: Add time of the notification directly in the toolbar
      Author: Niko
      Version: 1.1
      Release Date: 28.01.2023 (dd.mm.year)
      Contact: https://www.fmcodes.net/u2
      Original content: https://www.fmcodes.net/t1989-
      */
       
        $("#fa_notifications").one("click", function(event){
          $.ajax({
              url: '/notification.php',
              datatype: 'html',
              success: function (data) {
                  var arr = Object.keys(data).map(function (key) { return data[key]; });
               
                  var count = 0;
                  $('ul#notif_list li').each(function() {
                      var time = arr[0][count]['time'];
                      $(this).find('.contentText').append('<span class="notification_time">'+time+'</span>');
                      count++;
                  });
              }
          });
          });});});


    Hope you enjoy it! :wouhou: :wouhou:


    Last edited by Niko on January 28th 2023, 4:40 pm; edited 1 time in total

    The Godfather, Ape, SLGray, BlackScorpion, Niko, SarkZKalie, TonnyKamper and like this post

    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19147
    Reputation : 1994
    Language : fluent in dork / mumbojumbo & English haha

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Ape January 28th 2023, 1:49 pm

    Nice little add on Wink thank you for sharing with us all Smile



    Add time of the notification directly in the toolbar Left1212Add time of the notification directly in the toolbar Center11Add time of the notification directly in the toolbar Right112
    Add time of the notification directly in the toolbar Ape_b110
    Add time of the notification directly in the toolbar Ape1010

    Niko likes this post

    Obscure
    Obscure
    Forumember


    Female Posts : 48
    Reputation : 10
    Language : English
    Location : USA

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Obscure January 28th 2023, 2:05 pm

    Awesome! Thank you for the tutorial!

    Niko likes this post

    Niko
    Niko
    Helper
    Helper


    Male Posts : 3110
    Reputation : 245
    Language : English, Italian, French
    Location : Italy

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Niko January 28th 2023, 2:11 pm

    You are welcome thumright
    very simple... but I think some users may find it useful :rose:

    Ape, BlackScorpion, Niko, TonnyKamper and Obscure like this post

    Obscure
    Obscure
    Forumember


    Female Posts : 48
    Reputation : 10
    Language : English
    Location : USA

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Obscure January 28th 2023, 3:33 pm

    Hello
    I tested this on my testing forum and it does work, and it looks awesome, but it also shows it about 2 to 3 times. I was going to try to see if I could fix it but couldn't figure it out.
    Here is a screenshot
    Add time of the notification directly in the toolbar Screen50

    Niko likes this post

    Niko
    Niko
    Helper
    Helper


    Male Posts : 3110
    Reputation : 245
    Language : English, Italian, French
    Location : Italy

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Niko January 28th 2023, 4:40 pm

    @Obscure my bad, script has been updated Wink

    Niko, Obscure and كونان2000 like this post

    Obscure
    Obscure
    Forumember


    Female Posts : 48
    Reputation : 10
    Language : English
    Location : USA

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Obscure January 28th 2023, 4:54 pm

    Thank you! I will try it again. Very Happy

    Edit: Works fine now. cheers

    Niko likes this post

    TonnyKamper
    TonnyKamper
    Active Poster


    Female Posts : 1050
    Reputation : 78
    Language : Dutch/English
    Location : DSF Admin

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by TonnyKamper January 28th 2023, 6:59 pm

    Awesome it works perfect in Invision too  thumright

    Niko likes this post

    Niko
    Niko
    Helper
    Helper


    Male Posts : 3110
    Reputation : 245
    Language : English, Italian, French
    Location : Italy

    Add time of the notification directly in the toolbar Empty Re: Add time of the notification directly in the toolbar

    Post by Niko January 28th 2023, 7:16 pm

    Thanks @Obscure and @TonnyKamper for the feedbacks! ùù loove

    Niko and TonnyKamper like this post