StreamElements Overlay Chat - Top Down display!

 Okay, this seems silly to make a post like this, but I wish I had found a page that told me this before wasting a few hours trying to figure it out!

For a while, I have been wanting my chatbox overlay in OBS to display newest messages at top and move down. Googling the issue only brought me newbie posts of "How to put your chat on your OBS!" and "One Billion and One overlay designs!"

(What I had versus what I wanted)

Now, this might not be for everyone, but my chat is pretty slow on stream, and having it just a couple messages just appear in the middle of my screen off to the side was weird and just looked tacky. Having text appear at top, and get moved down and then fade out after a set time looked A LOT neater in my opinion.

Yeah, you can make your own custom chatbox by learning now to use the CSS and connections and what have you, but I like the layout and simplicity of StreamElements chat overlay feature (albeit, too simple somtimes). I have seen others with this type of layout, but its always been some other service, and I like to keep everything centralized to one service (that does emote walls, notifications,etc.), so it's always been a dead end.

So finally, I just sat down and dug into the CSS of the StreamElements chat preview and made some live edits to see what got me my results, and it boiled down to this:

.layout-column {
  flex-direction: column-reverse; }

That... That's it. Copy that into your chat overlay source in OBS under the Custom CSS feild, and it will display your chats starting at the top, and move the text down for each message.

I hope this post will help someone in the future who uses StreamElements chat overlay and wants text to appear at top and move down.