Add the Messages button to the toolbar: AwesomeBB
4 posters
Page 1 of 1
Add the Messages button to the toolbar: AwesomeBB
Hello everyone, the following tutorial will help you to add message button to toolbar
WORKS ON FORUM VERSION: AwesomeBB
__________________________________________________
Picture after receiving a new message
--------------------------------------
ADMIN CONTROL PANEL SETTINGS,
__________________________________________________
1. Go to Admin Panel > Display > Templates > General
2. Please choose overall_header
3. Click modify button
4. Find this code:
- Code:
<li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li>
5. And replace by this:
- Code:
<li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li>
<a href="{U_PRIVATEMSGS}" rel="nofollow" style=" display: inline-block;"><i class="material-icons">mail</i> {PRIVATE_MESSAGE_INFO}</a>
the modification is now installed
-------------------------------------
We hope you like this great little Trick and Tip on how to make the change.
--------------
Last edited by كونان2000 on October 23rd 2024, 9:47 am; edited 2 times in total
skouliki, Niko, TonnyKamper, TheCrow and Revelore like this post
Re: Add the Messages button to the toolbar: AwesomeBB
Can we just extract number from that variable then make it short?
For example :
For example :
- Code:
You have x new message
- Code:
<a title="{PRIVATE_MESSAGE_INFO}">Message (x)</a>
Niko, TonnyKamper and كونان2000 like this post
Re: Add the Messages button to the toolbar: AwesomeBB
@SarkZKalie what you can do is to extract the number from the private message text and use it to replace its content, for example
You then only need to replace:
It should do the trick
I don't know the forum version you need so I can't test it, sorry
- Code:
$(function() {$(function() {
var unread DMs = $('YYY');
var DMmenu = $('XXX');
if(unreadDMs.length) {
var checkExist = setInterval(function() {
if (unreadDMs.text()) {
var content_notif = unreadDMs.text().match(/\d+/g);
DMmenu.html('Message ('+content_notif+')');
clearInterval(checkExist);
}
}, 100);
}});});
You then only need to replace:
with the selector of the menu link when there are new messages- Code:
var unread DMs = $('YYY');
with the selector of the menu link for private messages- Code:
var DMmenu = $('XXX');
It should do the trick
I don't know the forum version you need so I can't test it, sorry
SarkZKalie, TonnyKamper and كونان2000 like this post
Re: Add the Messages button to the toolbar: AwesomeBB
Hello @SarkZKalie
Hello @Niko
new update
Picture after receiving a new message
Hello @Niko
new update
Picture after receiving a new message
- new update:
- 1. Go to Admin Panel > Display > Templates > General
2. Please choose overall_header
3. Click modify button
4. Find this code:- Code:
<li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li>
5. And replace by this:- Code:
<li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li>
<a href="{U_PRIVATEMSGS}" rel="nofollow" style="font-size: 0; display: inline-block;"><i class="material-icons">mail</i> <div class="mainine">({PRIVATE_MESSAGE_INFO})</div><div class="Message">Message</div>
</a>
Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS- Code:
span.maininecount {
color: #ffbf00;
font-size: 22px!important;
}
.mainine {
float: right;
}
.Message {
float: right;
font-size: 22px!important;
}
span.maininecount:before {
content: "(";
}
span.maininecount:after {
content: ")";
}
Installing the JavaScript
To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.
Title : as you like
Placement : In all the pages- Code:
$(function() {
var newMsg = document.querySelector('.mainine');
if (newMsg) {
newMsg.innerHTML = newMsg.innerHTML.replace(/(\d+)/, '<span class="maininecount" data-messages="$1">$1</span>');
}
});
Last edited by كونان2000 on October 23rd 2024, 9:47 am; edited 2 times in total
skouliki, BlackScorpion, Niko, SarkZKalie, TonnyKamper, poesia-verses and Revelore like this post
Re: Add the Messages button to the toolbar: AwesomeBB
Wonderful, well done!
SarkZKalie and كونان2000 like this post
Re: Add the Messages button to the toolbar: AwesomeBB
Hi guys, i was just asking an improvement, not for me hehe but you guys did it great
Niko, TonnyKamper and كونان2000 like this post
Re: Add the Messages button to the toolbar: AwesomeBB
Just an quick note about this: The preview is not showing, and you need to re-upload it again, in order for users to see it.
كونان2000 likes this post
Similar topics
» Mention Button Script for awesomebb?
» New Messages Button
» Add a [Preview - Send - Save] button to the quick reply editor: AwesomeBB
» New : Add GIFs in your messages via a new button in the editor
» Visitor Messages - "Hide Message" Button
» New Messages Button
» Add a [Preview - Send - Save] button to the quick reply editor: AwesomeBB
» New : Add GIFs in your messages via a new button in the editor
» Visitor Messages - "Hide Message" Button
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum