Reminder
We made a chat display in Setting up chat on your stream. The short version was: Go to https://streamelements.com/dashboard/overlays and click on new overlay. Choose ⇒ Streaming tools⇒Your Streams chat and set up your chat widget.
Motivation
So we have our display and now we want to make it a little bit nicer. But how do we do it? Since we are already using all the options streamelements gives us. But we have on more option we can choose from!
Custom CSS properties in a browser source
When we created our browser source in obs, we had an option for custom CSS. And that is exactly what we are gonna use to give our display some last finish!
Prep Work/Research
We need to understand how the structure (esp. the classes) of our chat display is build! So put the url of your widget in a browser (change to firefox!). Then type something in your chat. You should see the message appear in the browser window. Simply right clicking on that message and choosing inspect (Q) will show you the html of your widget!
This is enought to give us the structure of the classes!
- chat-line for the entire message
- badges for things like vip, broadcaster, sword of mod,etc.
- username for the text showing who is talking
- colon the, well, colon after the name of the poster
- message is for the actual message (pretty straight forward, thankfully)
- emote (inside the message) for emotes
Creating a static dummy text display for testing
At this point this turns into more of 'Let's try' then a tutorial. I will very much be learning and experimenting along side you. (If you have never seen Tinker Tailer Solder Fry on https://www.twitch.tv/loadingreadyrun/, you should check them out.)
So first thing I did is making myself just the tiniest html file (with a link to an empty style.css). The body simply contained the following lines:
We are little bit limited in what we can do without javascript. So nothing fancy like taking a users color and using it as background-color. And honestly, once we want to use javascript, we might as well make our own display. (So look forward to that in about 3-4 months!)
And now you can use the classes in your CSS file to experiment with the look of you widget! Give it a the components background, whatever!
My final Solution
So in the next bit of CSS I used the propertie border-radius This let's you change the edges of your backgrounds/borders! Specifically border-end-end-radius and border-start-start-radius to only change on of the corners of the combination badges and username. I also made the colon disappear, by changing display (to none).
And that's the style I'll be using on my own stream from now on! See you next time! (Either for a blog post or on my stream!)