Discord Reactive Images (Fugi Overlay) CSS Skins

INSTALLATION.md

EN

Cliquez ici pour voir la version française

1. Login to Discord Reactive Images with your Discord account.
2. Go to the Sources tab and click the Add Custom Source Button.
3. Set the config like this:
   • Give the source a name
   • ⬜ Cross-fade Effect
   • Speaking Animation: No Animation
   • Dim non-speaking image: Never
   • Show mute/deaf icons: Never
   • Show names: Server Nicknames (recommanded)
   • Name Size: 32
   • Image alignment: centered
   • Image Spacing : Normal
4. After saving, click the copy link button on the left of the Custom Source you just created.
5. On OBS, add a new Web Source with these parameters:
   • URL: Paste the link you just copied
   • Width: As you want
   • Height: As you want
   • Custom CSS: Use one of the CSS Codes below depending on what you want

There are 2 different CSS Codes listed below. They adopt the good old vanilla Discord Streamkit look.

There are two versions of the skin:

• One showing every people in your channel
• One showing only the people talking

Use the one you want!

FR

Click here to go to the english version

1. Connectez-vous à Discord Reactive Images avec votre compte Discord.
2. Allez dans l'onglet Sources et cliquez sur le bouton "Add Custom Source".
3. Changez la section config comme suit :
   • Give the source a name
   • ⬜ Cross-fade Effect
   • Speaking Animation: No Animation
   • Dim non-speaking image: Never
   • Show mute/deaf icons: Never
   • Show names: Server Nicknames (recommanded)
   • Name Size: 32
   • Image alignment: centered
   • Image Spacing : Normal
4. Après avoir sauvegardé, cliquez sur le bouton de copie du lien à gauche de la Custom Source que vous venez de créer.
5. Sur OBS, ajoutez une nouvelle Source Web avec ces paramètres :
   • URL: Collez le lien que vous venez de copier
   • Largeur: Comme vous voulez
   • Hauteur: Comme vous voulez
   • CSS Personnalisé: Utilisez l'un des codes CSS ci-dessous selon ce l'affichage que vous souhaitez

Il y a 2 codes CSS différents listés ci-dessous. Ils vous permettent d'avoir un affichage dans le style de l'overlay Streamkit Discord Streamkit classique.

Il y a deux versions pour le skin :

• Un qui montre tout le monde présent dans le vocal
• Un qui ne montre que les personnes qui sont en train de parler

Utilisez le skin que vous souhaitez !

Vanilla Discord - Speaking Only.css

body {
    /*************************************************
    * REPLACE THE LINE UNDER THIS BLOCK DEPENDING ON *
    *               YOUR PREFERENCES                 *
    *                                                *
    * 1) Everyone is displayed all the time          *
    * --display-if-not-speaking: list-item;          *
    *                                                *
    * 2) Only people talking are displayed           *
    * --display-if-not-speaking: none;               *
    *************************************************/    
    --display-if-not-speaking: none;

    --height: 80px;
    --transform: calc(var(--height)/3.5);
    --font-size: calc(var(--height)/5);
    --border: calc(var(--height)/20);
    --avatar-margin-right: calc(var(--border) + 5px);
    --top-margin: 50px;
}

.flex {
    display: block;
}

div.h-screen {
    padding: 0px 0%;
    margin-block-start: var(--top-margin);
    margin-block-end: 1.5em;
}

div[data-speaking] {
    list-style-type: none;
    height: var(--height);
    margin-bottom: calc(var(--border) * 2 + 8px) !important;
    padding-inline-start: 40px;
}

div[data-speaking] div div {
    transform: translate(0, calc(var(--height)/2 - (var(--transform)/2 + 4px)));
    background-color: rgba(30, 33, 36, 0.95);
    padding: 4px 6px;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: initial;
    font-size: var(--font-size) !important;
    line-height: var(--transform) !important;
    font-weight: 600;
    border-radius: var(--border);
    bottom: auto !important;
    width: max-content !important;
    left: calc(var(--height) + var(--border) + 10*1px) !important;
}

div[data-speaking] div {
    outline: var(--border) solid transparent;
    border-radius: 50%;
    background-color: black;
}

div[data-speaking] div canvas {
    border-radius: 50%;
    height: var(--height) !important;
    width: var(--height) !important;
    float: left;
    background-color: transparent;
}

div[data-speaking="true"] div {
    outline-color: #3ba53b;
}

div[data-speaking="true"] div div {
    outline: none;
}

div[data-speaking="false"] {
    display: var(--display-if-not-speaking);
}

Vanilla Discord - Staying.css

body {
    /*************************************************
    * REPLACE THE LINE UNDER THIS BLOCK DEPENDING ON *
    *               YOUR PREFERENCES                 *
    *                                                *
    * 1) Everyone is displayed all the time          *
    * --display-if-not-speaking: list-item;          *
    *                                                *
    * 2) Only people talking are displayed           *
    * --display-if-not-speaking: none;               *
    *************************************************/    
    --display-if-not-speaking: list-item;

    --height: 80px;
    --transform: calc(var(--height)/3.5);
    --font-size: calc(var(--height)/5);
    --border: calc(var(--height)/20);
    --avatar-margin-right: calc(var(--border) + 5px);
    --top-margin: 50px;
}

.flex {
    display: block;
}

div.h-screen {
    padding: 0px 0%;
    margin-block-start: var(--top-margin);
    margin-block-end: 1.5em;
}

div[data-speaking] {
    list-style-type: none;
    height: var(--height);
    margin-bottom: calc(var(--border) * 2 + 8px) !important;
    padding-inline-start: 40px;
}

div[data-speaking] div div {
    transform: translate(0, calc(var(--height)/2 - (var(--transform)/2 + 4px)));
    background-color: rgba(30, 33, 36, 0.95);
    padding: 4px 6px;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: initial;
    font-size: var(--font-size) !important;
    line-height: var(--transform) !important;
    font-weight: 600;
    border-radius: var(--border);
    bottom: auto !important;
    width: max-content !important;
    left: calc(var(--height) + var(--border) + 10*1px) !important;
}

div[data-speaking] div {
    outline: var(--border) solid transparent;
    border-radius: 50%;
    background-color: black;
}

div[data-speaking] div canvas {
    border-radius: 50%;
    height: var(--height) !important;
    width: var(--height) !important;
    float: left;
    background-color: transparent;
}

div[data-speaking="true"] div {
    outline-color: #3ba53b;
}

div[data-speaking="true"] div div {
    outline: none;
}

div[data-speaking="false"] {
    display: var(--display-if-not-speaking);
}

Skins Preview

Vanilla Discord

Not talking

Not shown if you use the "Speaking Only" version / Pas affiché si vous utilisez la version "Speaking Only"

Talking

Square Overlay - NOT WORKING YET, WILL BE FIXED AT A LATER DATE

Not talking

Not shown if you use the "Speaking Only" version / Pas affiché si vous utilisez la version "Speaking Only"

Talking