ABCDEFGHIJKLMNOPQRSTUVWXYZAAAB
1
To use this, hit File, Make a Copy, and enter the info you want to use in the green boxes.
Purple box is the results, copy and paste it into the CSS of your chat broswer source.

This is best used on PC. Make sure you only copy values, not formula (click on the cell and hit Ctrl+C, or right click on the cell and copy, do not double click it!)

Resources in this template are at https://lucid-dawn.carrd.co/#overlay-tutorial
The example boxes are free to use!

I ask you provide credit of some kind if using this template please!
If you want to support me for this, I'd super appreciate a sub on my yt channel: https://www.youtube.com/@Lucid-Dawn <3		When making your browser source, make it 280 x 500 pixels.

You can scale it as needed on OBS, and height (500) can be anything you'd like, but width needs to stay at 280 unless you plan on changing elements to fit it.

Use the Default Restream theme embeded chat; turn the existing message and chat background opacity to 0%.
https://chat.restream.io/settings/embed

To remove any changes made to your chat with this, simply delete whatever CSS you entered.		Fonts: https://www.cssfontstack.com
Simply choose a font you would like, and copy / paste its name for the form. Some of them won't work, you'll just have to try them out- try to use one of the higher percentage windows compatibility fonts!

Hex Color Picker: https://g.co/kgs/oyUFMm

Uploading Background Images: Use an image hosting site (such as Imagur, or an unlinked section break on Carrd) and right click on it > Copy Image Address.

Animation example video: https://youtu.be/iYA1bfCP3H4		Disclaimer: I literally have no idea how to web design have y'all seen my carrd lol

If this isn't followed all the way, things are very likely to not work.
Hell, things are likely to break either way, but it's better than nothing right :]

If there's any other resources please use those I kinda just trial and erroed this together LMAO

My Discord server / Live Chat is not tech support, please do not come there for questions. I might help on my off time but it is not an obligation of mine / server members.		I don't have anything here for moving things around, having responsive changes between streaming platforms / message types, etc. this is just a basic basic version and I highly encourage learning about CSS or commissioning a CSS creator if you'd like to do more! ((I do not have the attention span to do it myself skddhfskdfh))

To mess with specific parts easier, refer to the red boxes to the right. This is where the sheet will be using the info you enter to give you the CSS, and I'll include what affects what so you can manually edit those bits in OBS instead of going back and forth!

The official page on Restream chat CSS is here!
https://support.restream.io/en/articles/2397892-customize-restream-chat-with-css
2
Reference this template for these questions;
The black circle is for the streaming service logo
(YouTube, Twitch, etc.)		Animation List
In the same order as the tutorial video / with same timings; copy / paste / modify as you wanna, but keep the same format!

bounceInRight .5s
fadeIn .5s
scaleCenter .5s
scaleHorizontalBounce .8s
scaleHorizontal .5s
fromLeft50 .5s
scaleFlip 1s
scaleVertical 1s
flip .7s
fromBottom 1s
3
1. Do you want to include the timestamp?
0 = No
1 = Yes		3. Do you want to include the streaming service logo?
0 = No
1 = Yes		5. Font to use:
Default is Trebuchet MS!		7. Message Sending Animation Name / Length:
Default is the third you see on the video!		9. Chat Message Background Image URL:
Default is the Warm Digital example from my Carrd!		Scroll Down to see everything
on how I made this!		I don't know terminology at all pls bear with me on that skldfhjlaskf
4
11Trebuchet MSscaleCenter .5shttps://lucid-dawn.carrd.co/assets/images/gallery01/e652f715.png?v=23886eeb((It'll take a bit there's a
bunch pls forgive))
5
6
2. Timestamp color in hex format:
(Do not need to change if not using timestamp!)		4. Message Text Color in hex format:
Default is white!		6. Sender Name Color in hex format:8. Message Hiding Animation Name / Length:
Same animations, just in reverse!

Write 'none' if not hiding messages.
7
#fc5d8a#ffffff#ff99b6fadeIn .5s
8
9
Final CSS!
You must remove the quotation marks at the start and end when you paste it, or it'll look weird qwq!
10
.restream-embed-themes-chat-container_default .message-time{
font-size:0.8em;
color:#fc5d8a
}

.restream-embed-themes-chat-container_default .icon-platform{
margin-left: 1.8em;
}

.restream-embed-themes-chat-container_default{
font-family: Trebuchet MS;
}

.restream-embed-themes-chat-container_default .message-item{
-webkit-animation: scaleCenter .5s ease 0s 1;
animation: scaleCenter .5s 0s 1;
background-image:url(https://lucid-dawn.carrd.co/assets/images/gallery01/e652f715.png?v=23886eeb);
font-size:0.85em;
padding:.8em 1em 1em 3.2em;
}

.restream-embed-themes-chat-container_default .message-text{
color:#ffffff;
}

.restream-embed-themes-chat-container_default .message-sender{
color:#ff99b6;
}

.restream-embed-themes-chat-container_default .chat-messages.hiding .message-item {
animation: scaleCenter .5s ease 0s 1 normal none running,fadeIn .5s ease var(--hideMessagesAfter) 1 reverse forwards running
}
11
.restream-embed-themes-chat-container_default .message-time{
font-size:0.8em;
color:#fc5d8a
}		Timestamp on/off, Timestamp Color
I have the size for it at 0.8em, so multiplying it by 0 makes its size 0em / invisible.
Second line is color
12
.restream-embed-themes-chat-container_default .icon-platform{
margin-left: 1.8em;
}		Platform Logo on/off:
Same idea as timestamp on/off but with 1.8em
13
.restream-embed-themes-chat-container_default{
font-family: Trebuchet MS;
}		Font
Font gets its own thing
14
.restream-embed-themes-chat-container_default .message-item{
-webkit-animation: scaleCenter .5s ease 0s 1;
animation: scaleCenter .5s 0s 1;
background-image:url(https://lucid-dawn.carrd.co/assets/images/gallery01/e652f715.png?v=23886eeb);
font-size:0.85em;
padding:.8em 1em 1em 3.2em;
}
Animation and Message Background Image
There's two lines for animation, they both use the same variable(s) from what I understand.
After that is adding the background image, and text sizes / padding that gives the spacing I wanted
15
.restream-embed-themes-chat-container_default .message-text{
color:#ffffff;
}		Message Text Color
That gets its own thing
16
.restream-embed-themes-chat-container_default .message-sender{
color:#ff99b6;
}		Sender Name Color
That gets its own thing
17
.restream-embed-themes-chat-container_default .chat-messages.hiding .message-item {
animation: scaleCenter .5s ease 0s 1 normal none running,fadeIn .5s ease var(--hideMessagesAfter) 1 reverse forwards running
}		Hide Message Animation
That has its own thing too, generally works the same as showing message animations but the first one you write is gonna be the entering animation
If you write 'none' it just returns a blank entry
18
.restream-embed-themes-chat-container_default .message-time{
font-size:0.8em;
color:#fc5d8a
}

.restream-embed-themes-chat-container_default .icon-platform{
margin-left: 1.8em;
}

.restream-embed-themes-chat-container_default{
font-family: Trebuchet MS;
}

.restream-embed-themes-chat-container_default .message-item{
-webkit-animation: scaleCenter .5s ease 0s 1;
animation: scaleCenter .5s 0s 1;
background-image:url(https://lucid-dawn.carrd.co/assets/images/gallery01/e652f715.png?v=23886eeb);
font-size:0.85em;
padding:.8em 1em 1em 3.2em;
}

.restream-embed-themes-chat-container_default .message-text{
color:#ffffff;
}

.restream-embed-themes-chat-container_default .message-sender{
color:#ff99b6;
}

.restream-embed-themes-chat-container_default .chat-messages.hiding .message-item {
animation: scaleCenter .5s ease 0s 1 normal none running,fadeIn .5s ease var(--hideMessagesAfter) 1 reverse forwards running
}
The final result that's given after putting it all together!
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100