[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: 1112
Joined: 06 Oct 2016, 09:56
Location: Germany

[HowTo] Add explanation for the banners below mChat

Post by kasimi »

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
You do not have the required permissions to view the files attached to this post.
Tigers
Posts: 36
Joined: 25 Nov 2016, 09:42

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

Post by Tigers »

Thanks for this kasimi :+1:
rammstein
Posts: 55
Joined: 13 Jan 2018, 01:11

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

Post by rammstein »

hello kasimi
how could I put an icon in place of color?
User avatar
kasimi
mChat developer
Posts: 1112
Joined: 06 Oct 2016, 09:56
Location: Germany

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

Post by kasimi »

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
Posts: 36
Joined: 25 Nov 2016, 09:42

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

Post by Tigers »

Thanks for this but how to have three or four images instead of colors?
rammstein
Posts: 55
Joined: 13 Jan 2018, 01:11

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

Post by rammstein »

thank you kasimi works very well
User avatar
kasimi
mChat developer
Posts: 1112
Joined: 06 Oct 2016, 09:56
Location: Germany

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

Post by kasimi »

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
Posts: 36
Joined: 25 Nov 2016, 09:42

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

Post by Tigers »

no 1 for online 2 for offline 3 for absent
User avatar
kasimi
mChat developer
Posts: 1112
Joined: 06 Oct 2016, 09:56
Location: Germany

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

Post by kasimi »

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
Posts: 30
Joined: 03 Jun 2017, 19:20

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

Post by lopoto »

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.

Who is online

Users browsing this forum: CCBot [Bot] and 0 guests