├── 1 Image ├── Animation.css └── No Animation.css ├── 2 Images ├── Animation.css └── No Animation.css └── README.md /1 Image/Animation.css: -------------------------------------------------------------------------------- 1 | /***Image w/ Animation***/ 2 | /*User*/ li:not([data-userid='UserID']) { display:none; } 3 | /*Avatar*/ img[class*="avatar"] { content:url("ImageURL"); } 4 | /*Flex Set*/ html, body, img, div, span, ul, li { display:flex; } 5 | /*Center Image*/ html { height:100%; justify-content:center; } 6 | /*Hide Scrollbars*/ body { overflow:hidden; } 7 | /*List CSS*/ ul[class*="voiceStates"] { padding-inline:0; margin-block:0; margin-top: 5px; } 8 | /*List Item CSS*/ li[class*="voiceState"] { flex-direction:column; align-items:center; margin:0; height:unset; } 9 | /*Avatar CSS*/ img[class*="avatar"] { width:100%; height:auto; border:0; border-radius:0; margin:0; float:unset; filter:brightness(50%); transition: all 0.2s ease-in-out; } 10 | /*Speaking CSS*/ img[class*="avatarSpeaking"] { position:relative; animation:speak-now 0.2s; filter:brightness(95%); } 11 | /*Username CSS*/ div[class*="user"] {position:absolute; text-align:center; padding:0; bottom:0;} span[class*="name"] { margin-bottom: 0.5em; } 12 | /*Animation*/ @keyframes speak-now { 50%{ bottom:3px; } } 13 | -------------------------------------------------------------------------------- /1 Image/No Animation.css: -------------------------------------------------------------------------------- 1 | /***Image w/o Animation***/ 2 | /*User*/ li:not([data-userid='UserID']) { display:none; } 3 | /*Avatar*/ img[class*="avatar"] { content:url("ImageURL"); } 4 | /*Flex Set*/ html, body, img, div, span, ul, li { display:flex; } 5 | /*Center Image*/ html { height:100%; justify-content:center; } 6 | /*Hide Scrollbars*/ body { overflow:hidden; } 7 | /*List CSS*/ ul[class*="voiceStates"] { padding-inline:0; margin-block:0; } 8 | /*List Item CSS*/ li[class*="voiceState"] { flex-direction:column; align-items:center; margin:0; height:unset; } 9 | /*Avatar CSS*/ img[class*="avatar"] { width:100%; height:auto; border:0; border-radius:0; margin:0; float:unset; filter:brightness(50%); transition: all 0.2s ease-in-out; } 10 | /*Speaking CSS*/ img[class*="avatarSpeaking"] { filter:brightness(95%); } 11 | /*Username CSS*/ div[class*="user"] {position:absolute; text-align:center; padding:0; bottom:0; } span[class*="name"] { margin-bottom: 0.5em; } 12 | -------------------------------------------------------------------------------- /2 Images/Animation.css: -------------------------------------------------------------------------------- 1 | /***Two Images w/ Animation***/ 2 | /*User*/ li:not([data-userid='UserID']) { display:none; } 3 | /*Avatar*/ img[class*="avatar"] { content:url("ImageURL"); } 4 | /*Speaking*/ img[class*="avatarSpeaking"] { content:url("ImageURL2"); } 5 | /*Flex Set*/ html, body, img, div, span, ul, li { display:flex; } 6 | /*Center Image*/ html { height:100%; justify-content:center; } 7 | /*Hide Scrollbars*/ body { overflow:hidden; } 8 | /*List CSS*/ ul[class*="voiceStates"] { padding-inline:0; margin-block:0; margin-top: 5px; } 9 | /*List Item CSS*/ li[class*="voiceState"] { flex-direction:column; align-items:center; margin:0; height:unset; } 10 | /*Avatar CSS*/ img[class*="avatar"] { width:100%; height:auto; border:0; border-radius:0; margin:0; float:unset; filter:brightness(50%); transition: all 0.2s ease-in-out; } 11 | /*Speaking CSS*/ img[class*="avatarSpeaking"] { position:relative; animation:speak-now 0.2s; filter:brightness(95%); } 12 | /*Username CSS*/ div[class*="user"] {position:absolute; text-align:center; padding:0; bottom:0; } span[class*="name"] { margin-bottom: 0.5em; } 13 | /*Animation*/ @keyframes speak-now { 50%{ bottom:3px; } } 14 | -------------------------------------------------------------------------------- /2 Images/No Animation.css: -------------------------------------------------------------------------------- 1 | /***Two Images w/o Animation***/ 2 | /*User*/ li:not([data-userid='UserID']) { display:none; } 3 | /*Avatar*/ img[class*="avatar"] { content:url("ImageURL"); } 4 | /*Speaking*/ img[class*="avatarSpeaking"] { content:url("ImageURL2"); } 5 | /*Flex Set*/ html, body, img, div, span, ul, li { display:flex; } 6 | /*Center Image*/ html { height:100%; justify-content:center; } 7 | /*Hide Scrollbars*/ body { overflow:hidden; } 8 | /*List CSS*/ ul[class*="voiceStates"] { padding-inline:0; margin-block:0; } 9 | /*List Item CSS*/ li[class*="voiceState"] { flex-direction:column; align-items:center; margin:0; height:unset; } 10 | /*Avatar CSS*/ img[class*="avatar"] { width:100%; height:auto; border:0; border-radius:0; margin:0; float:unset; filter:brightness(50%); transition: all 0.2s ease-in-out; } 11 | /*Speaking CSS*/ img[class*="avatarSpeaking"] { filter:brightness(95%); } 12 | /*Username CSS*/ div[class*="user"] {position:absolute; text-align:center; padding:0; bottom:0; } span[class*="name"] { margin-bottom: 0.5em; } 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vtuber-Discord-Streamkit-Overlay-Voice-Flex-CSS 2 | This page is for VTubers that are looking for a simple CSS to use for Collaborations. This is used in tandem w/ [Discord Streamkit Overlay](https://streamkit.discord.com/overlay) 3 | ## Instructions 4 | 1. Copy the *URL* given into a broswer source in OBS: `https://streamkit.discord.com/overlay/voice//`. You can find the serverID/voiceID either via Discord Streamkit Overlay OR using Developer Mode in Discord. Please search up other tutorials for these. 5 | ![Screenshot_1](https://user-images.githubusercontent.com/75279703/210184653-52e4eff0-5e85-4095-892f-cabb3536d1df.png) 6 | 2. Copy the CSS of the given option into your *Custom CSS* of the browser source. There are four options to choose from: 7 | 1. [Image w/ Animation](1%20Image/Animation.css) 8 | 2. [Image w/o Animation](1%20Image/No%20Animation.css) 9 | 3. [2 Images w/ Animation](2%20Images/Animation.css) 10 | 4. [2 Images w/o Animation](2%20Images/No%20Animation.css) 11 | 3. Input *UserID* and *ImageUrl(s)* into the CSS. 12 | 4. Set the *height* & *width* of the broswer source to your image's height/width. 13 | 1. Adjust the *height* or *width* of the image as desired/needed. 14 | ![screen](https://github.com/Minepatcher/VTuber-Discord-Streamkit-Overlay-Voice-CSS/assets/75279703/6468e6dc-9d05-42a9-8a3b-d518eb7301c3) 15 | --------------------------------------------------------------------------------