[HowTo] Add explanation for the banners below mChat

Adds a colored banner next to each user name in mChat, indicating the user’s last activity
User avatar
kasimi
mChat developer
Posts: 698
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

[HowTo] Add explanation for the banners below mChat

#1

Post by kasimi » 13 May 2018, 14:17

Because why not. :D

  • Go to ext/kasimi/mchatonlinebanners/styles/all/template/event
  • Create an empty text file dmzx_mchat_body_smiley_after.html
  • Use this HTML. Edit it to your liking:

    Code: Select all

    <div class="mchat-onlinebanners">
      {% for banner in MCHAT_ONLINEBANNERS %}
        {% if banner.color %}
          <span data-mchat-banner="{{ banner.id }}" style="color: {{ banner.color }};">
            <i class="icon fa fa-circle fa-fw" aria-hidden="true"></i><span class="mchat-onlinebanners-title">{{ banner.title ?: '' }}</span>
          </span>
        {% endif %}
      {% endfor %}
    </div>
    
mchatonlinebanners_legend.png
mchatonlinebanners_legend.png (4.33 KiB) Viewed 349 times
mchatonlinebanners_legend.png
mchatonlinebanners_legend.png (4.33 KiB) Viewed 349 times

Tigers
Donor
Posts: 22
Joined: 25 Nov 2016, 09:42

Re: [HowTo] Add explanation for the banners below mChat

#2

Post by Tigers » 17 May 2018, 04:06

Thanks for this kasimi :+1:

rammstein
Donor
Posts: 20
Joined: 13 Jan 2018, 01:11

Re: [HowTo] Add explanation for the banners below mChat

#3

Post by rammstein » 13 Jun 2018, 16:37

hello kasimi
how could I put an icon in place of color?

User avatar
kasimi
mChat developer
Posts: 698
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

Re: [HowTo] Add explanation for the banners below mChat

#4

Post by kasimi » 13 Jun 2018, 20:15

I updated the HTML code in the first post to add some CSS classes. After updating your HTML in the dmzx_mchat_body_smiley_after.html event template file, add this CSS at the bottom of ext/kasimi/mchatonlinebanners/styles/all/theme/mchat.onlinebanners.css to add an icon in the box below the chat:

Code: Select all

.mchat-onlinebanners [data-mchat-banner="123"] .icon {
    display: none;
}

.mchat-onlinebanners [data-mchat-banner="123"] .mchat-onlinebanners-title::before {
    content: url("http://some.cool/icon.jpg");
    margin: 0 2px;
}

Tigers
Donor
Posts: 22
Joined: 25 Nov 2016, 09:42

Re: [HowTo] Add explanation for the banners below mChat

#5

Post by Tigers » 14 Jun 2018, 09:23

Thanks for this but how to have three or four images instead of colors?

rammstein
Donor
Posts: 20
Joined: 13 Jan 2018, 01:11

Re: [HowTo] Add explanation for the banners below mChat

#6

Post by rammstein » 14 Jun 2018, 17:28

thank you kasimi works very well

User avatar
kasimi
mChat developer
Posts: 698
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

Re: [HowTo] Add explanation for the banners below mChat

#7

Post by kasimi » 14 Jun 2018, 20:34

rammstein wrote:
14 Jun 2018, 17:28
thank you kasimi works very well
Glad it works. :+1:
Tigers wrote:
14 Jun 2018, 09:23
Thanks for this but how to have three or four images instead of colors?
3 or 4 images for one banner?

Tigers
Donor
Posts: 22
Joined: 25 Nov 2016, 09:42

Re: [HowTo] Add explanation for the banners below mChat

#8

Post by Tigers » 15 Jun 2018, 06:51

no 1 for online 2 for offline 3 for absent

User avatar
kasimi
mChat developer
Posts: 698
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

Re: [HowTo] Add explanation for the banners below mChat

#9

Post by kasimi » 17 Jun 2018, 08:44

Tigers wrote:
15 Jun 2018, 06:51
no 1 for online 2 for offline 3 for absent
The CSS in the above code block is for 1 banner. Just copy it again and change the 123 to your 2nd banner ID.

This feature seems to get more interest than I expected. I will try to add it to the next release so that you don't need to bother with the code yourself. :+1:

User avatar
lopoto
Donor
Posts: 22
Joined: 03 Jun 2017, 19:20

Re: [HowTo] Add explanation for the banners below mChat

#10

Post by lopoto » 17 Jun 2018, 09:16

kasimi wrote:
17 Jun 2018, 08:44
Tigers wrote:
15 Jun 2018, 06:51
no 1 for online 2 for offline 3 for absent
The CSS in the above code block is for 1 banner. Just copy it again and change the 123 to your 2nd banner ID.

This feature seems to get more interested than I expected. I will try to add it to the next release so that you don't need to bother with the code yourself. :+1:
Thx Kasimi.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest