Modding converse.js

Written by Simone

Here are a few tweaks that make my "converse.js" experience better:

Remove link from banner: I accidentally used to click that and be teleported to converse.js official webclient, so I thought it could be misleading for unaware users using my locally hosted version of the software.

Search and replace/remove the href bit in converse.min.js, under the dist directory:

<a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">

In the "converse.min.css" file, search for this string and fill it with the following code to have unread MUCs underlined and colored in red:

.list-item.unread-msgs

.list-item.unread-msgs{font-weight:700; text-decoration: underline red;}

Fix color for toolbar-utilities when in 1:1 chats: find this line in "converse.min.css"

.fas:hover svg{fill:var(--chat-head-color)}

and replace with:

.fas:hover svg{fill:var(--chat-toolbar-btn-color)}

Raise minimum chat text area: find this bit in "converse.min.css"

min-height:var(--chat-textarea-height);

and replace with custom value in pixels, e.g.

min-height:120px;

Set a smaller line height for chats list: find the first occurrence of this code in "converse.min.css"

.conversejs .items-list .list-item

and continue until you find:

height:2.5em

substitute it with something like height:2.0em

Removing a space in quoted reply for "actions" plugin: find the following string in your conversejs/dist/plugins/actions/action.js

return ">" + nick + ' : '

remove the offending space

return ">" + nick + ': '

Changing from :smiley: to :thumbsup: emoji for the "Like" actions plugin function: find the following string in your conversejs/dist/plugins/actions/action.js

actions_reactions: [
                                    {name: 'like', label: 'Like', emoji: ':smiley:', icon_class: 'fa fa-check'},

and replace with:

actions_reactions: [
                                    {name: 'like', label: 'Like', emoji: ':thumbsup:', icon_class: 'fa fa-check'},

Fix background-color for screencast plugin icon: replace the class in row #25 in screencast.js

<button class="plugin-screencast"

<button class="btn"

Comments

  1. Markdown is allowed. HTML is not allowed.