Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- -----------------READ ME-------------------
- ♡ Set up by Guppy - https://www.twitch.tv/bubbaguppylive
- ♡ Watch the tutorial - https://www.youtube.com/channel/UCCncUabhB43dAZ7ZMAiwIbA
- DISCLAIMER:
- ♡ Only works on SLOBS or STREAM LABS OBS | if there's a demand, I'll make it work for all stream services :)
- ♡ DO NOT INCLUDE "-------Copy and Past..." or "- END -" when copy/pasting, they're just for separation.
- -------------------------------------------
- -------Copy and Paste this to HTML---------
- <div id="log" class="sl__chat__layout">
- </div>
- <!-- chat item -->
- <script type="text/template" id="chatlist_item">
- <div data-from="{from}" data-id="{messageId}">
- <span class="meta" style="color: {color}">
- <span class="name">{from}</span>
- </span>
- <span class="message">
- {message}
- </span>
- </div>
- </script>
- ------- END ---------
- -------Copy and Paste this to CSS---------
- /* CHANGE FONT HERE */
- @font-face {
- font-family: joodles;
- src: url('https://raw.githack.com/cjlaserna/birbuniverse/master/Littlejoodles-Regular.ttf'); }
- /* END */
- html, body {
- height: 100%;
- overflow: hidden;
- }
- body {
- color: #916E56 !important; /* CHANGE FONT COLOR */
- text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.6); /* TEXT SHADOW */
- font-family: 'joodles', sans-serif !important; /* CHANGE THIS IF YOU CHANGED THE FONT */
- }
- /* CUSTOMIZE MESSAGE */
- .message {
- font-size: 72px; /* CHANGE MESSAGE FONT SIZE */
- margin: none;
- padding: 0px;
- }
- /* CUSTOMIZE NAME */
- .name {
- font-size: 56px; /* CHANGE USERNAME FONT SIZE */
- color: #916E56; /* CHANGE NAME FONT COLOR */
- }
- /* TRY NOT TO CHANGE ANY OF THESE UNLESS YOU KNOW WHAT YOU'RE DOING */
- /* YOU CAN ALWAYS GO BACK TO THE PASTEBIN TO START OVER. */
- #log {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- box-sizing: border-box;
- overflow: hidden;
- }
- #log>div {
- padding: 5px 10px 10px;
- animation: fadeIn 0.5s ease, fadeOut 0.5s ease 99999999ms forwards;
- -webkit-animation: fadeIn 0.5s ease, fadeOut0.5s ease 99999999ms forwards;
- border-radius: 20px;
- }
- #log>div.deleted {
- visibility: hidden;
- }
- .meta {
- display: block;
- }
- .colon {
- display: none;
- }
- .badge {
- float: right;
- padding-left: 5px;
- height: 1em;
- }
- #log .emote {
- background-repeat: no-repeat;
- background-position: center;
- padding: 0.1em;
- background-size: contain;
- }
- #log .emote img {
- display: inline-block;
- height: 1em;
- opacity: 0;
- vertical-align: top;
- }
- ------- END ---------
- ------- Copy and Paste this to JS ---------
- // Please use event listeners to run functions.
- document.addEventListener('onLoad', function(obj) {
- // obj will be empty for chat widget
- // this will fire only once when the widget loads
- });
- document.addEventListener('onEventReceived', function(obj) {
- // obj will contain information about the event
- });
- ------- END ---------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement