chatstyler.colinhorn.co.uk
Open in
urlscan Pro
2606:50c0:8000::153
Public Scan
Submitted URL: http://chatstyler.colinhorn.co.uk/
Effective URL: https://chatstyler.colinhorn.co.uk/
Submission: On February 15 via api from US — Scanned from DE
Effective URL: https://chatstyler.colinhorn.co.uk/
Submission: On February 15 via api from US — Scanned from DE
Form analysis
0 forms found in the DOMText Content
You need to enable JavaScript to run this app. CHAT STYLER Welcome to the chat styler, create the look that YOU want. Using the tool below, customise your chat overlay to your theme on your stream. Once you have setup the chat within your editor (StreamElements / StreamLabs) and created your browser source in OBS Studio, click the button to copy the code and paste it into your OBS browser source 'Custom CSS'. Perspective (X, Y, Z) may differ depending on browser source & chat widget / overlay width. GENERAL Hide Badges Fade Spacing 5px Margins 10px Rotate X Axis 0px Rotate Y Axis 0px Rotate Z Axis 0px USERNAME Username Font Roboto * Abel * Anton * Archivo * Arimo * Arvo * Assistant * Barlow * Barlow Condensed * Bebas Neue * Bitter * Cabin * Cairo * Caveat * Chakra Petch * Comfortaa * Cormorant Garamond * Crimson Text * Dancing Script * DM Sans * DM Serif Display * Dosis * EB Garamond * Exo 2 * Fira Sans * Fjalla One * Fredoka * Heebo * Hind * Hind Siliguri * IBM Plex Mono * IBM Plex Sans * Inconsolata * Inter * Josefin Sans * Jost * Kanit * Karla * Lato * Libre Baskerville * Libre Franklin * Lobster * Lora * M PLUS Rounded 1c * Manrope * Material Icons * Material Icons Outlined * Material Icons Round * Material Icons Sharp * Material Symbols Outlined * Material Symbols Rounded * Maven Pro * Merriweather * Montserrat * Mukta * Mulish * Nanum Gothic * Noto Sans * Noto Sans HK * Noto Sans JP * Noto Sans KR * Noto Sans SC * Noto Sans TC * Noto Serif * Noto Serif JP * Nunito * Nunito Sans * Open Sans * Oswald * Outfit * Overpass * Oxygen * Pacifico * Play * Playfair Display * Poppins * Prompt * PT Sans * PT Sans Narrow * PT Serif * Public Sans * Quicksand * Rajdhani * Raleway * Red Hat Display * Roboto * Roboto Condensed * Roboto Mono * Roboto Slab * Rubik * Shadows Into Light * Signika Negative * Slabo 27px * Sora * Source Code Pro * Space Grotesk * Teko * Titillium Web * Ubuntu * Varela Round * Work Sans Username Color #ff0000 Username Background transparent Font Size 16px Font Weight 400 Border Radius 0px Padding 0px CHAT MESSAGE Message Font Roboto * Abel * Anton * Archivo * Arimo * Arvo * Assistant * Barlow * Barlow Condensed * Bebas Neue * Bitter * Cabin * Cairo * Caveat * Chakra Petch * Comfortaa * Cormorant Garamond * Crimson Text * Dancing Script * DM Sans * DM Serif Display * Dosis * EB Garamond * Exo 2 * Fira Sans * Fjalla One * Fredoka * Heebo * Hind * Hind Siliguri * IBM Plex Mono * IBM Plex Sans * Inconsolata * Inter * Josefin Sans * Jost * Kanit * Karla * Lato * Libre Baskerville * Libre Franklin * Lobster * Lora * M PLUS Rounded 1c * Manrope * Material Icons * Material Icons Outlined * Material Icons Round * Material Icons Sharp * Material Symbols Outlined * Material Symbols Rounded * Maven Pro * Merriweather * Montserrat * Mukta * Mulish * Nanum Gothic * Noto Sans * Noto Sans HK * Noto Sans JP * Noto Sans KR * Noto Sans SC * Noto Sans TC * Noto Serif * Noto Serif JP * Nunito * Nunito Sans * Open Sans * Oswald * Outfit * Overpass * Oxygen * Pacifico * Play * Playfair Display * Poppins * Prompt * PT Sans * PT Sans Narrow * PT Serif * Public Sans * Quicksand * Rajdhani * Raleway * Red Hat Display * Roboto * Roboto Condensed * Roboto Mono * Roboto Slab * Rubik * Shadows Into Light * Signika Negative * Slabo 27px * Sora * Source Code Pro * Space Grotesk * Teko * Titillium Web * Ubuntu * Varela Round * Work Sans Message Color #444444 Message Background transparent Font Size 16px Font Weight 400 Border Radius 0px Padding 0px UsernameLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis bibendum nisi, quis aliquet lectus feugiat non. Suspendisse ac placerat ex. Donec tempus, mauris lacinia tincidunt molestie, nunc nisl ullamcorper risus, quis posuere augue leo eu tortor. UsernameLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis bibendum nisi, quis aliquet lectus feugiat non. Suspendisse ac placerat ex. Donec tempus, mauris lacinia tincidunt molestie, nunc nisl ullamcorper risus, quis posuere augue leo eu tortor. UsernameLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis bibendum nisi, quis aliquet lectus feugiat non. Suspendisse ac placerat ex. Donec tempus, mauris lacinia tincidunt molestie, nunc nisl ullamcorper risus, quis posuere augue leo eu tortor. UsernameLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis bibendum nisi, quis aliquet lectus feugiat non. Suspendisse ac placerat ex. Donec tempus, mauris lacinia tincidunt molestie, nunc nisl ullamcorper risus, quis posuere augue leo eu tortor. StreamElements Overlay BROWSER SOURCE CSS OVERRIDE CODE @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap'); @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }.overlay, .widget, .twitch-chat, .chat-line{ overflow:visible!important; }.twitch-chat{ perspective:1000px; }.chat-line { margin:10px 0; display:flex; flex-wrap: wrap; animation: none 0.5s ease-in-out forwards; opacity:1; transform-style: preserve-3d; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }.badges{ display:inline-flex; align-items: flex-end; margin-right:5px; }.chat-line .username { font-family:'Roboto', sans-serif; font-weight:400; font-size:16px; line-height:19px; border-radius:0px; color:#ff0000 !important; background:transparent; padding:0px 0px; z-index:20; }.chat-line .message { font-family:'Roboto', sans-serif; font-weight:400; font-size:16px; line-height:19px; border-radius:0px; color:#444444 !important; background:transparent; margin-top:5px; padding:0px 0px; width:100%; }.colon{ display:none; } StreamLabs Overlay BROWSER SOURCE CSS OVERRIDE CODE @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap'); @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }#log{ text-shadow:none !important; perspective: 1000px; }#log > div { display: flex; flex-direction: column; margin:10px 0; animation: none 0.5s ease-in-out forwards !important; opacity:1; transform-style: preserve-3d; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }#log .meta{ width:auto !important; text-align:left; position: relative; z-index: 20; overflow:visible !important; }#log .badges{ display:inline-flex !important; align-items: flex-end; margin-right:5px; }#log .name { font-family:'Roboto', sans-serif; font-weight:400; font-size:16px; line-height:19px; border-radius:0px; color:#ff0000 !important; background:transparent; padding:0px 0px; z-index:20; width:auto!important; overflow:visible!important; margin-left:0; }#log .message { font-family:'Roboto', sans-serif; font-weight:400 !important; font-size:16px; line-height:19px; border-radius:0px; color:#444444 !important; background:transparent; margin-top:5px; padding:0px 0px; width:100%; z-index:10; } PRESETS Below are some presets, more will be added in the future. Just click the icon to copy your code for either StreamElements or StreamLabs and paste it into your Browser Source 'Custom CSS'. CyberPunk @import url(https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Orbitron:wght@600&display=swap);.badge,.badges{vertical-align:middle}.badges,.username{transform:translateX(-100%)}.chat-line,.message,.username{position:relative}.chat-line:before,.message:after,.username:after{content:'';position:absolute}@keyframes slideName{0%{opacity:0;transform:translateX(-100%)}100%{opacity:1;transform:translateX(0)}}@keyframes messageFade{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}@keyframes outerLine{0%{width:0;height:0;opacity:0}100%{width:80%;height:20px;opacity:1}}.badges{border-radius:5px;margin-right:5px;animation:1s forwards slideName;display:none}.badge{width:15px;height:15px;display:block}.chat-line{margin-top:20px;display:block;overflow:visible!important;padding-bottom:5px}.chat-line:before{display:block;bottom:0;left:0;width:0;height:0;border-bottom:1px solid #fdf800;border-left:1px solid #fdf800;opacity:0;animation:.5s 1s forwards outerLine}.username{font-size:18px;line-height:28px;padding:2px 15px;max-width:calc(100% - 60px);background:#fdf800;color:#111!important;font-weight:600;font-family:Orbitron,sans-serif;animation:.5s forwards slideName;display:inline-block;opacity:0;transform-origin:center;height:35px;box-sizing:border-box;z-index:30}.username:after{display:block;width:0;height:0;border-style:solid;border-width:35px 35px 0 0;border-color:#fdf800 transparent transparent;left:100%;top:0}.colon{display:none}.message,.message:after{display:block;clip-path:polygon(100% 0,100% 75%,92% 100%,0 100%,0 0)}.message{font-size:14px;padding:20px 15px 15px;background:#555;line-height:22px;color:#aaa!important;margin-top:-10px;opacity:0;transform:translateY(-20px);animation:.8s 1s forwards messageFade;margin-left:5px;font-family:Lato,sans-serif;font-weight:300;z-index:20}.message:after{z-index:-1;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background:#111} @import url(https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Orbitron:wght@600&display=swap);#log .message,#log .meta,#log .name,#log>div{position:relative}@keyframes slideName{0%{opacity:0;transform:translateX(-100%)}100%{opacity:1;transform:translateX(0)}}@keyframes messageFade{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}@keyframes outerLine{0%{width:0;height:0;opacity:0}100%{width:80%;height:20px;opacity:1}}#log .message:after,#log .name:after,#log>div:before{content:"";position:absolute}#log{text-shadow:none!important}#log>div{display:flex;flex-direction:column;margin-top:20px;padding-bottom:5px;animation:none!important}#log>div:before{display:block;bottom:0;left:0;width:0;height:0;border-bottom:1px solid #fdf800;border-left:1px solid #fdf800;opacity:0;animation:.5s 1s forwards outerLine}#log .meta{width:auto!important;text-align:left;z-index:20;overflow:visible!important}#log .badges{display:none}#log .name{transform:translateX(-100%);font-size:18px;line-height:28px;padding:2px 15px;max-width:calc(100% - 60px);background:#fdf800;color:#111!important;font-weight:600;font-family:Orbitron,sans-serif;animation:.5s forwards slideName;display:inline-block;opacity:0;transform-origin:center;height:35px;box-sizing:border-box;z-index:30!important}#log .name:after{display:block;width:0;height:0;border-style:solid;border-width:35px 35px 0 0;border-color:#fdf800 transparent transparent;left:100%;top:0}#log .message,#log .message:after{display:block;clip-path:polygon(100% 0,100% 75%,92% 100%,0 100%,0 0)}#log .message{font-size:14px;padding:20px 15px 15px;background:#555;line-height:22px;color:#aaa!important;margin-top:-10px;opacity:0;transform:translateY(-20px);animation:.8s 1s forwards messageFade;margin-left:5px;font-family:Lato,sans-serif;font-weight:300;z-index:5!important;width:100%;display:block!important}#log .message:after{z-index:-1;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);background:#111} Rainbow @import url(https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@300&display=swap);.message,.username{opacity:0;position:relative}@keyframes slideName{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes messageFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.badges,.colon{display:none}.chat-line{margin-top:20px;display:block}.username{font-size:22px;line-height:32px;padding:5px 15px;margin-left:15px;max-width:calc(100% - 60px);background:rgba(0,0,0,.8);color:#fff!important;font-weight:400;border-radius:10px 10px 0 0;font-family:Pacifico,cursive;animation:.5s 1s forwards slideName;display:inline-block;transform:translateY(100%);transform-origin:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chat-line:nth-child(6n+1) .username,.message{background:#ff0018}.chat-line:nth-child(6n+2) .username{background:#ffa52c}.chat-line:nth-child(6n+3) .username{background:#ffff41;color:#111!important}.chat-line:nth-child(6n+4) .username{background:#008018}.chat-line:nth-child(6n+5) .username{background:#0000f9}.chat-line:nth-child(6n+6) .username{background:#86007d}.message{font-size:14px;padding:15px;border-radius:12px;background:linear-gradient(61deg,#ff0018 0,#ffa52c 20%,#008018 40%,#ffff41 60%,#0000f9 80%,#86007d 100%);line-height:22px;color:#000!important;margin-top:-5px;transform:translateY(20px);animation:.8s forwards messageFade;display:block;margin-left:5px;font-family:Roboto,sans-serif;font-weight:300;z-index:20;box-shadow:0 0 10px rgba(0,0,0,.4)}.message:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);background:#fff;border-radius:10px;position:absolute;top:2px;left:2px;z-index:-1} @import url(https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@300&display=swap);@keyframes slideName{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes messageFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}#log .badges{display:none}#log .message,#log .name{opacity:0;position:relative}#log{text-shadow:none!important}#log>div{flex-direction:column;margin-top:20px;display:block;animation:none!important;width:100%}#log .meta{width:auto!important;text-align:left;position:relative;z-index:20;display:block;overflow:visible!important}#log .name{font-size:22px;line-height:32px;padding:5px 15px;margin-left:15px;max-width:calc(100% - 60px);background:rgba(0,0,0,.8);color:#fff!important;font-weight:400;border-radius:10px 10px 0 0;font-family:Pacifico,cursive;animation:.5s 1s forwards slideName;display:inline-block;transform:translateY(100%);transform-origin:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:auto!important}#log>div:nth-child(6n+1) .name{background:#ff0018}#log>div:nth-child(6n+2) .name{background:#ffa52c}#log>div:nth-child(6n+3) .name{background:#ffff41;color:#111!important}#log>div:nth-child(6n+4) .name{background:#008018}#log>div:nth-child(6n+5) .name{background:#0000f9}#log>div:nth-child(6n+6) .name{background:#86007d}#log .message{font-size:14px;padding:15px;border-radius:12px;background:linear-gradient(61deg,#ff0018 0,#ffa52c 20%,#008018 40%,#ffff41 60%,#0000f9 80%,#86007d 100%);line-height:22px;color:#000!important;margin-top:-5px;transform:translateY(20px);animation:.8s forwards messageFade;margin-left:5px;font-family:Roboto,sans-serif;font-weight:300;width:100%;z-index:20;box-shadow:0 0 10px rgba(0,0,0,.4);display:block!important}#log .message:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);background:#fff;border-radius:10px;position:absolute;top:2px;left:2px;z-index:-1} Retro @import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono&display=swap);.message,.username{font-size:14px;position:relative}@keyframes slideName{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes messageFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.badges,.colon{display:none}.badge{width:15px;height:15px;display:block;vertical-align:middle}.chat-line{margin-top:20px;display:block}.username{line-height:24px;padding:2px 15px 0;border-radius:30px;background:#ab1e60;color:#fff!important;font-weight:400;font-family:'Press Start 2P',cursive;animation:.8s forwards slideName;display:inline-block;transform:translateX(-100%);transform-origin:left center;z-index:20}.username:after{content:'';position:absolute;left:0;top:0;width:calc(100% - 10px);height:100%;border-radius:30px;background:#c32369;z-index:-1}.message{padding:20px 10px 10px;border-radius:5px 5px 30px;background:#dacfcd;line-height:22px;color:#494786!important;margin-top:-15px;opacity:0;transform:translateY(20px);animation:1s 1.2s forwards messageFade;display:block;margin-left:5px;font-family:'Space Mono',monospace;border:5px solid #222;border-bottom-width:10px;border-right-width:8px}.message:after{content:' \1F5D5 \1F5D6 x';display:flex;align-items:flex-end;position:absolute;top:5px;right:5px} @import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono&display=swap);@keyframes slideName{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes messageFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}#log .badges{display:none}#log .message,#log .name{font-size:14px;position:relative}#log{text-shadow:none!important}#log>div{flex-direction:column;margin-top:20px;display:block;animation:none!important;width:100%}#log .meta{width:auto!important;text-align:left;position:relative;z-index:20;display:block;overflow:visible!important}#log .name{line-height:24px;padding:2px 15px 0;border-radius:30px;background:#ab1e60;color:#fff!important;font-weight:400;font-family:'Press Start 2P',cursive;animation:.8s forwards slideName;display:inline-block;transform:translateX(-100%);transform-origin:left center;z-index:20}#log .name:after{content:'';position:absolute;left:0;top:0;width:calc(100% - 10px);height:100%;border-radius:30px;background:#c32369;z-index:-1}#log .message{padding:20px 10px 10px;border-radius:5px 5px 30px;background:#dacfcd;line-height:22px;color:#494786!important;margin-top:-15px;opacity:0;transform:translateY(20px);animation:1s 1.2s forwards messageFade;display:block;margin-left:5px;font-family:'Space Mono',monospace;border:5px solid #222;border-bottom-width:10px;border-right-width:8px;width:100%}#log .message:after{content:' \1F5D5 \1F5D6 x';display:flex;align-items:flex-end;position:absolute;top:5px;right:5px} Synthwave @import url(https://fonts.googleapis.com/css2?family=Kolker+Brush&family=Roboto:wght@300&display=swap);.message,.username{background:rgba(0,0,0,.8);color:#fff!important;position:relative}@keyframes slideName{0%{transform:scale(0)}100%,50%{transform:scale(1)}75%{transform:scale(.9)}}@keyframes messageFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.badges,.colon{display:none}.badge{width:15px;height:15px;display:block;vertical-align:middle}.chat-line,.twitch-chat{overflow:visible!important}.chat-line{padding:10px;display:block}.username{font-size:36px;line-height:36px;padding:2px 25px 0;border-radius:30px;text-shadow:0 0 20px #ff019a;font-weight:400;border:3px solid #ff019a;font-family:'Kolker Brush',cursive;animation:.5s forwards slideName;display:inline-block;transform:translateX(-100%);transform-origin:center;z-index:20;text-transform:lowercase;box-shadow:0 0 10px #ff019a,inset 0 0 10px #ff019a}.username:first-letter{text-transform:uppercase}.username:after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:10px;width:8px;height:8px;border-radius:50%;border:1px solid #ff019a;box-shadow:0 0 10px #ff019a,inset 0 0 15px #ff019a}.message{font-size:14px;padding:30px 25px 25px;border-radius:20px;line-height:22px;margin-top:-10px;opacity:0;transform:translateY(20px);animation:.8s .8s forwards messageFade;display:block;margin-left:5px;font-family:Roboto,sans-serif;font-weight:300;border:4px solid #00f1ff;box-shadow:0 0 10px #00f1ff,inset 0 0 15px #00f1ff}.message:after{content:'';position:absolute;bottom:5px;right:5px;width:200px;height:50px;border-bottom-right-radius:10px;border:none;border-bottom:2px solid #00f1ff;border-right:2px solid #00f1ff} @import url(https://fonts.googleapis.com/css2?family=Kolker+Brush&family=Roboto:wght@300&display=swap);@keyframes slideName{0%{transform:scale(0)}100%,50%{transform:scale(1)}75%{transform:scale(.9)}}@keyframes messageFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}#log .badges{display:none}#log .message,#log .name{background:rgba(0,0,0,.8);color:#fff!important;position:relative}#log{text-shadow:none!important}#log>div{flex-direction:column;margin-top:0;animation:none!important;width:100%;padding:10px;display:block}#log .meta{width:auto!important;text-align:left;position:relative;z-index:20;display:block;overflow:visible!important}#log .name{font-size:36px;line-height:36px;padding:2px 25px 0;border-radius:30px;text-shadow:0 0 20px #ff019a;font-weight:400;border:3px solid #ff019a;font-family:'Kolker Brush',cursive;animation:.5s forwards slideName;display:inline-block;transform:translateX(-100%);transform-origin:center;z-index:20;text-transform:lowercase;box-shadow:0 0 10px #ff019a,inset 0 0 10px #ff019a}#log .name:first-letter{text-transform:uppercase}#log .name:after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:10px;width:8px;height:8px;border-radius:50%;border:1px solid #ff019a;box-shadow:0 0 10px #ff019a,inset 0 0 15px #ff019a}#log .message{font-size:14px;padding:30px 25px 25px;border-radius:20px;line-height:22px;margin-top:-10px;opacity:0;transform:translateY(20px);animation:.8s .8s forwards messageFade;display:block;margin-left:5px;font-family:Roboto,sans-serif;font-weight:300;border:4px solid #00f1ff;box-shadow:0 0 10px #00f1ff,inset 0 0 15px #00f1ff;width:100%}#log .message:after{content:'';position:absolute;bottom:5px;right:5px;width:200px;height:50px;border-bottom-right-radius:10px;border:none;border-bottom:2px solid #00f1ff;border-right:2px solid #00f1ff} SUPPORT If you wish to support the generator, you can do so by saving and adding this panel to your profile. Send Some Love Need to automate your stream? Create fun channel point redemptions? Check out Aitum. Take your stream to the next level! aitum.tv Website * * * * Version 0.1 | © Copyright Colin Horn 2024