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.
This tutorial allows you to display the time of the notification directly from the notifications box in the toolbar
Demo
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:
Customize CSS
CSS can be fully customized according to the style of the forum.
You can remove the attribute
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.
Hope you enjoy it!
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.
This tutorial allows you to display the time of the notification directly from the notifications box in the toolbar
Demo
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
|
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!
Last edited by Niko on January 28th 2023, 4:40 pm; edited 1 time in total