About the widget

This widget displays information from your discord including the name of the server, the number of members online and a list of those members. Size, font, colors, and footer are easily customizible. Further customization can be done by editing the CSS code in the CSS tab within Mix It Up.

A note about versioning: I tend to forget about things like version numbers. I've lost count of the number of times I've tweaked this widget before releasing it. I have no intention of updating it unless some major change to Mix It Up or Discord breaks it. So for now I'll just call it version 1.0. If I do release an update I'll make it very obvious by adding version numbers everywhere!

Configuring the widget

Once you import the widget you'll be greeted with the overlay widget editor. From here you can configure the discord widget. Most of what you will want to change is in the 'Details' tab and the 'Position' tab. The position tab is standard to all Mix It Up widgets so I won't go over it. If you really want to customize the way this widget looks I suggest learning CSS and checking out the 'CSS' tab. Finally, all the options shaded in red are unused, changing them will have no effect.

Font Size: The font size is in pixels and, by design, changing this will not only change the size of the font but also the size of the widget. Everything is propotional to this number.

Font Name: If you are familiar with CSS you'll know that the font name is really a font family. By default the discord overlay widget comes setup with the Google font 'Agdasima'. If you don't wish to use this font you can select from any one of the fonts in the dropdown menu, or you can use a different google font. Doing so will require editing the 'GoogleFont' property down below.

Font Color: Here you can set the color of the text in the widget. Any CSS color code will work here. For example the word Red, #FF0000, and rgb(255 0 0) will all preduce the color red.

DiscordServerID: Paste your discord server ID number here. To get your Discord server ID, open Discord, click on 'Server Settings', click 'Widget', then click 'Copy' next to the 'Server ID'.

DiscordLogoLocation: This is the location of the Discord logo displayed under your server name. To download the logo, goto discord.com/branding then click on '.png' under the color of the logo you wish to use. Save the png file in a location that's easy to remember and won't be deleted. Copy that location and paste it between '{LocalFile:\\' and '}'.

If you are having issues with the logo displaying properly:

• Double check the file location, make sure you included the .png and the '}' at the end.
• Make sure you downloaded the png file and not the svg file.
• Make sure the L and F in '{LocalFile:\\' are capitalized, it is case sensitive.

HeaderBGColor: Similar to the Font Color any CSS color code will work here. The default value uses rgb(0 0 0 / 0.9) this produces a black color with a 90% opacity.

MembersBGColor: See the above text. The default value uses rgb(0 0 0 / 0.7) which produces a black color with a 70% opacity.

Border: Just like font and background colors, any CSS border code will work here. The default value uses 5px rgb(0 0 0 / 0.6) solid which produces a 5 pixel thick solid black border with a 60% opacity.

Footer: This is simply a string of text that appears at the bottom of the widget. Useful for advertizing a chat command as the default value suggests. This does not add a chat command, you'll need to make one yourself.

GoogleFont: If you are not going to use a Google font you can leave this blank. If you wish to use a different Google font, you'll need to change the import url and the 'Font Name' at the top of the editor. To find the import url visit fonts.google.com, search for and select the font you want to use, click on 'Get Font', followed by 'Get Embed Code', then select the 'Import' option. Copy the code between the '<style>' tags and paste it here. Then copy the value of 'font-family' and past it in 'Font Name' at the top of the editor.