Page 1 of 2

[HowTo] Add explanation for the banners below mChat

Posted: 13 May 2018, 14:17
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
mchatonlinebanners_legend.png (4.33 KiB) Viewed 452 times
mchatonlinebanners_legend.png
mchatonlinebanners_legend.png (4.33 KiB) Viewed 452 times

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

Posted: 17 May 2018, 04:06
by Tigers
Thanks for this kasimi :+1:

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

Posted: 13 Jun 2018, 16:37
by rammstein
hello kasimi
how could I put an icon in place of color?

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

Posted: 13 Jun 2018, 20:15
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;
}

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

Posted: 14 Jun 2018, 09:23
by Tigers
Thanks for this but how to have three or four images instead of colors?

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

Posted: 14 Jun 2018, 17:28
by rammstein
thank you kasimi works very well

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

Posted: 14 Jun 2018, 20:34
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?

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

Posted: 15 Jun 2018, 06:51
by Tigers
no 1 for online 2 for offline 3 for absent

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

Posted: 17 Jun 2018, 08:44
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:

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

Posted: 17 Jun 2018, 09:16
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.