Tutorial . Multi-Column Twitch Chat

twitchchat

 

Streaming the creative process on Twitch is awesome.

The ability to share with your audience the innumerable hours of work that would normally go unseen, is an undeniably mutually-beneficial way to connect with your audience between published projects.

And if you’re anything like me: you like to chat.

That said, balancing chat and work can be difficult. After all, you need your eyes and focus in order to work (most of the time), and it’s easy for chats to get lost in the scroll.

So, rather than waiting on the feature to be added/suggested, I went ahead and found a simple way for us to implement our own Multi-column Twitch Chat.

All you need is a browser plugin that allows you to override a website’s CSS. If you’re using Chrome, I suggest using Styler. To be honest, I haven’t really tried any others out.

 

 


 

Once you installed the plugin, simply visit Twitch.tv, click on the Styler icon, and paste this little bit of CSS in the CSS-designated window:

 

ul.chat-lines {
/* set the number of columns, be sure to update all */
column-count:4;
-moz-column-count:4;
-webkit-column-count:4;

/* set distance between columns, be sure to edit all */
column-gap:2em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
}

ul.chat-lines li {
font-size: 14px !important; /* set your preferred font size */
margin-bottom: 10px !important; /* set distance between chats */
}

/* Forces height of chat window and pushes for horizontal scroll */
.ember-chat .chat-room {
height: calc(100% - 50px);
}
.tse-content {
height: 100%;
}
.chat-display {
height:100%;
}
ul.chat-lines {
overflow:auto;
height:100%;
}

 

It should look something like this:

twitch-withcode

 


 

That’s it! Ye did it! Play of the heckin’ game! 

Now, you’ll notice that your default chat window (un-popped out) is also “column-ized”. Well, if you’re planning on viewing/managing your streams without the popout chat, just click the Styler icon and change the columns to “1”.

Otherwise, just “Popout” the chat window, and boom!

 

Great if you have more than one monitor.

popout

 


 

EDIT ( 10.03.2016)

The previous version of the workaround still had vertical scrolling (hiding chat above). So for better chronological viewing of the chat, it now scrolls horizontally (left to right), which allows for viewing the maximum number of recent chats.

The only issue is that it does not auto scroll (which could be fix through some simple scripting that I am not educated enough to execute). I hope to have this sorted in the near future.

Leave a Reply

Your email address will not be published. Required fields are marked *