Babble - A Chat Plugin

(Joe) #735

Here are the Relevant lines that I used for the side bar.

(My work is still very raw / unrefined and needs tweaking on your side)

.babble-sidebar {
    background: rgba(0,0,0,.9);
    border-left: 1px solid #333;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

.babble-sidebar .babble-title-wrapper {
    background: #666;

@media (min-width: 700px){ {
    margin: 0 auto !important;

.babble-emoji-picker.emoji-picker {
    left:unset; right:0

.babble-post-content {
    padding-left: .5em;

.babble-post-container {
    margin: 1em auto;
    padding: 5px;

Let me know if you need anything else.


Thanks, awesome work!
I can see only one problem,
In standard day view:

The same in night mode:

Category view:


In Day mode chat window is separate from forum.

OK, I removed

@media (min-width: 700px){–right {
margin: 0 auto !important;

And now it works fin for me :slight_smile:

(Joe) #737

Both issues are caused by these lines in the code I posted above.

@media (min-width: 700px){ {
    margin: 0 auto !important;

If you remove that, the default plugin behavior will return where the content is pushed to the side when the chat is open.


Yup, it works great! BTW, I noticed that new message counter is missing from the chat icon.


@gdpelican ok, few things that stopped working after last update:

  • New message counter is not working
  • Whole site need to be refreshed to see new messages
  • The same on mobile

It was working just fine before update.

(James Kiesel) #740

I’ll put the message counter back in. The live update works just fine on, mobile and desktop. Is there something custom about your setup that may be causing a problem?

(James Kiesel) #741

Alright, I’ve pushed some fixes to latest which include:

  • Generalized colors so they should work better with a given theme (tested on the default Dark theme)
  • Adding an upper-end breakpoint so display is normal on large screens (please test and let me know if I need to tweak this further)
  • Close the chat on a mobile device when navigating to a user page
  • Making the icon glow when there are unread messages (much easier technically than the unread counter we had before; it may be slightly lesser functionality, but now it won’t break, hooray, and is in line with Slack / Facebook’s ‘hey there’s new content here’, without necessarily telling you how much. Happy to hear more feedback in this direction.)

(James Kiesel) #742

Sorry to miss this message before. Maybe have a look at the push notifications plugin? Babble generates notifications for mentions, so perhaps those could be pushed to a mobile device via that plugin


To be honest the best solution will be to add possibility to choice, either the counter or icon glow. Currently glowing is almost exactly the same like the original icon. I can’t see the difference. Counter was quite straight - “You missed over +100 messages”. Currently users are complaining that they don’t know when someone add something new to the chat.

Maybe something more visible than glowing icon will be the solution?

(Makary ) #744

Well, Babble “chatroom” is just a hidden topic, so perhaps setting it as ‘Watched’ could work well alongside the plugin mentioned by @gdpelican. But I don’t really understand why do you want to notify users on every new message?

Hi Paweł, nice to see you again!
It is a CSS issue. If you add in your theme customization something like this, you’ll be able to control how the icon looks when it’s ‘glowing’

#babble-icon-unread {
 i {
   //your style here

(If you won’t mind, I personally believe that for setting it’s background for, let’s say, orange could work nicely :wink: )
The default style of a ‘glowing’ icon depends on primary and secondary colors set in the admin/customize.

(Makary ) #745

Actually, I figured out that I might have a feature request!
How about adding a setting to change default icon? Now it requires some CSS hacking :wink:

(James Kiesel) #746

This is a setting already, if I understand you correctly. Check out the ‘babble icon’ plugin site setting

27 PM

(Makary ) #747

What a shame :flushed:I have no idea what I was thinking about, sorry…

(Fajfi) #748

There is a problem with postfix in polish translation, can you change pl to pl_PL?

(James Kiesel) #749

Okay, this is fixed now, thanks for the heads up.

(Tumi) #750

Hello , I wanna to install this plugin. What is the recomended configuration for this ? I wanna install discourse for 10k users with this chat plugin . 1 Core with 1GB Ram and 20 Hdd will be ok or not really ?

Thanks for info

(James Kiesel) #751

I don’t think that Babble is going to make or break your install; Discourse itself has a bunch more going on at any given time than Babble does. Those specs smell a little small for a big community like that, but your best bet is going to be to give it a go with the standard install instructions, and let me know of any plugin-related issues you have along the way.

(Tumi) #752

so 1 core +1gb ram + 10gb will be ok?

(James Kiesel) #753

I’m not saying that, I’m saying you’ll need to give it a try and see how it goes.

(Vincent) #754

It will work but you may eventually need to upgrade storage in order to complete upgrades.