The spacing between the actual content and the app borders is controlled by --app-margin.

Adding this to your custom CSS will remove said spacing:

:root {
  --app-margin: 0 !important;
}

You have to enable it in your plugins list.

Good news for you is that you can customize it with a number of variables. Just go to your user settings, and near the bottom is a tab called Custom CSS; click that and add the following:

:root {
  --app-accent: #b2a0f9 !important;
  --app-accent-rgb: 178,160,249 !important;
}

An entire list of customizable variables can be found on the themes repo: https://github.com/CapnKitten/Translucence#variables

It gets stretched to fit it, so as long as the image is at least the size of your monitors resolution (if you use Discord in full screen) it shouldn't appear blurry.

Please refer to my pinned comment on variables, thanks.

One of the themes I made; Material Discord. https://betterdiscordlibrary.com/themes/Material%20Discord

The steps for customizing the theme easily are listed in the pinned comment.

Not currently, but I can see about adding it. No guarantees though.

Those errors and warnings don't affect anything. You can ignore them.

Took a look at it to see if I could use an image on my local pc, but Discord apparently adds discordapp.com in front of any url() that isn't a complete url. For instance, changing app-bg to url(background.jpg) adds https://discordapp.com/channels/<maybe_user_id?>/ before the actual variable. So for the time being, uploading an image to a site is the only way, unless you want to encode an image to base64 but that creates a stupid long string to use.

There are 2 separate variables that control the background colors for the main content area and the sidebars. --sidebar-color and main-content-color with the default values and how to use them listed in pinned comment.

The transparency and blur intensity can be customized to however you like it. A list of variables and how to use them are in the pinned comment, thanks.

The --app-blur variable controls the blur intensity.

It is possible. There's an example of what to use and where to put it in the pinned comment. In your case, the variable you'll want to use is --app-accent: #fff.

It shouldn't reload. Are you using imgur or something else to host the image?

Download the theme file and put it in your themes folder for Bandaged BetterDiscord. Then enable it in your themes list.

This isn't exactly the right place to report issues because I don't get notifications for them. Please make a new issue on the theme's repo at: https://github.com/CapnKitten/Translucence/issues. With that said, the margin/padding issue in the image will be fixed soon.

That is controlled by the --app-accent-rgb variable.

You have to enable it after putting the file in your plugins folder.

The members list is already collapsible. Regarding only showing avatars, that can easily be done with a theme rather than adding it to the plugin.

Not sure which version of the theme you're using, but it's up-to-date.

You can customize it by using the example in the pinned comment, and then utilizing the variables listed on the themes repo. A link to said repo is also in the pinned comment.

That's weird because disabling the theme should revert it back to normal. If you go to your plugins list, there's a button at the top that says "Open plugin folder"; click that to verify that the plugin file is actually gone. If it isn't, delete it, then redownload the plugin and enable it. Doing that should fix any issues you have.

When asking for help, you really shouldn't be so condescending; especially towards the person that made the thing you're using for free. The quote you got that from was from someone asking about the "black stripe" (i.e. the darker part on the left that is behind the servers and channels lists) with no mention of the background behind the messages, so that wouldn't fix your issue either way. I made it really simple for people to understand how to customize the theme. It's not my fault some don't read a pinned comment by the theme dev.

As for your issue... I thought I added the variable to the readme on the repo, but I guess not. --messages-color controls the background for messages. Making that transparent as well as removing the padding for messages should make it look how you want based on what you've asked.

:root {
    --messages-color: transparent !important;
}

.cozy-3raOZG.wrapper-2a6GCs,
.compact-T3H92H.wrapper-2a6GCs {
    padding: 0 !important;
}

If you're talking about the margin around the content area to give off the frosted look, --app-margin is the variable you'll want to use. Making it 0 will remove said space. Add the code below to the custom CSS tab in your user settings and click save and update.

:root {
    --app-margin: 0 !important;
}

The following code will make it so only avatars are visible in the members list. Add it to your custom css.

.membersWrap-2h-GB4 {
    min-width: 66px;
}

.members-1998pB {
    width: 66px;
}

Not sure what you mean.

Click the download button in the top left. Then open your themes file by opening your user settings in Discord and scrolling down to themes. In there, there's button that says "Open theme folder"; place the theme file in there and enable it.

Thanks for the kind words.

Link and mention colors are tied to the --app-accent color, so if you want to change them, you'll have to add the following code to your custom css:

:root {
    --link-accent: #fff;
    --link-accent-rgb: 255,255,255;
}

.markup-2BOw-j a {
    color: var(--link-accent);
}

.wrapper-3WhCwL {
    background: rgba(var(--link-accent-rgb),0.2);
    color: var(--link-accent);
}

.interactive:hover {
    background-color: var(--link-accent);
}

[class*="theme-"] .mentioned-xhSam7 .mention.interactive:hover {
    color: var(--link-accent);
}

.mentioned-xhSam7,
.message-2qnXI6.mentioned-xhSam7.selected-2P5D_Z,
.mouse-mode.full-motion .mentioned-xhSam7:hover,
.mouse-mode.full-motion .message-2qnXI6.mentioned-xhSam7:hover {
    border-color: var(--link-accent);
    box-shadow: inset 0px 0px 6px 1px var(--link-accent), 0px 0px 9px 2px var(--link-accent);
}

Plugins are designed to work with vanilla Discord, not themes. Theme developers have to make it so plugins work fine with their theme(s). As of now, the plugin is working as intended with vanilla Discord, so you'll have to contact the theme developer to get it fixed, sorry.

I can take a look at adding a toggle for the status area.

The highlight color is controlled by --app-accent-rgb. If you're used to hex color codes, just take the R, G, and B values from a converting site or photoshop and use them like the example below. In this case, it would be white, but since by default I have the alpha/transparency set to 0.65 (ranges from 0.0 to 1.0), it'd appear a light gray. The text in it is controlled by --app-accent-text.

If you just want to change the color of it and not worry about the alpha:

:root {
    --app-accent-rgb: 255,255,255 !important;
}

If you want to change the alpha:

:root {
    --app-accent-rgb: 255,255,255 !important;
}

::selection {
    background: rgba(var(--app-accent-rgb),0.65) !important;
}

If you take a look at the pinned comment, you'll find a template for changing the numerous variables that this theme uses. You'll want to copy the root stuff (brackets included) and paste that into the custom CSS tab in your user settings. In your case, you can remove the --app-bg, unless you want to change the background image. For the red accents, change the hex color code of --app-accent to whatever you'd like.

Fantastic criticism... Mind explaining what's wrong? Or do you want me to treat you like an ass too?

I have noticed that for some reason, on rare occasions, it adds another toggle button that causes it to not function at all. I haven't figured out what causes it to do that. For the time being, I'll push an update that'll remove all toggle buttons. You may or may not have to re-enable it afterwards.

Currently, you can change the variable in the custom CSS tab in your user settings to an image like the example below, but because of how I made the theme to mimic Spotify, there are other areas that won't look as good:

:root {
    --chat-color: url(IMAGE_URL_HERE) no-repeat !important;
}

If you're talking about the notification dots next servers, I haven't touched those. I can change that though and have it in the next update. I'll make the color of them be controlled by --notification-color, so just add that to your custom CSS and it'll change them when I get it updated.

Interesting. When you download the plugin, what's the file size? For reference, the source code is 9kb.

Glad I could help.

I found the issue and have it fully fixed. It'll be in v1.0.6.

I'm not entirely sure what you're talking about. Are you referring to the close/minimize/maximize buttons?

You can, you just need to upload it to a site like imgur that allows you to get the image url. If you look at the pinned comment at the top, you can copy the example I put there and remove the --app-accent part of it; unless you want to change the accent color. Open your user settings and scroll to the bottom on the left side until you see a tab called Custom CSS. Put the copied code there and change the url. Don't forget to click save and update.

Got it fixed, will be in the next update.

The way I styled the unread messages notification dots is by relying on a class added with BBD, but for some reason it's currently removed from it. So I just reverted the notification dots to vanilla Discord for the time being, sorry.

Discord updated and it broke a lot of themes. I just pushed an update that'll fix it; restarting your discord app should get the theme updated.

Update is live.

By default in the theme the button icons and text are handled by --app-accent-text, so changing the value of that will change that icon and text. You can take the example in the pinned comment and add --app-accent-text: #fff !important; to it.

It's already been fixed with the recent update to the theme. Restarting your discord app should get you the update.

:root {
    --app-accent: #000 !important;
    --app-accent-rgb: 0,0,0 !important;
    --app-accent-text: #fff !important;
}

All of the values you put in are correct, so you did nothing wrong. If you're putting the code above in the custom css tab in betterdiscord, make sure you're clicking save and update. If you're putting it in the theme file itself, saving it should update it to look how you want it to.

By default, the blur behind the entire app is controlled by --app-blur, but that also controls the blur of any popouts or modals like the right click menu and user info modal. However, if you want it to have a different blur intensity, you can use the code below and put it in your custom css tab within betterdiscord located in your user settings. A higher number will result in a more intense blur, and vice versa.

.layers-3iHuyZ:before {
    backdrop-filter: blur(15px);
}

Could you post a screenshot with an example, thanks.

Add this to your list of variables inside :root. It'll make the text color almost white, but you can play around with it.

--channels-default: #efefef !important;

Unfortunately, at this time it isn't possible to use a local image. Imgur is a solid alternative though.

Adding the code below to your custom css tab, which is located in your user settings and near the bottom of the left side, will add a spacing between the buttons and the border of the app:

.winButton-iRh8-Z {
  margin-top: 8px;
}
.winButton-iRh8-Z.winButtonClose-1HsbF- {
  margin-right: 4px;
}

Adding the following code to your custom css tab will do what you're asking for:

.peopleColumn-29fq28 {
    margin-bottom: 72px;
}

.tabBody-3YRQ8W {
    padding: 0;
}

.membersWrap-2h-GB4 {
    margin: 0;
}

.content-yTz4x3:after,
.tabBody-3YRQ8W:after {
    left: 0;
}

.content-yTz4x3:after {
    width: calc(100% - 240px);
}

.tabBody-3YRQ8W:after {
    width: calc(100% - 360px);
}

There's actually a Discord appearance setting for that. Go into your user settings > appearance > space between message groups.

Currently there is not, but I can add the ability to use gradients in the next update I push live. If you're not familiar with the css variables I use and how to use them, please refer to the pinned comment at the top to get a template with an example. Clicking the GitHub link will take you to most of the available variables you can use to customize the theme.

With that said, I'll add a new variable called --app-accent-image where you can use images or gradients as the value. By default it'll be set to none so it doesn't interfere with the theme.

It's all good.

Don't worry about that, it's just a syntax warning for the text editor.

There's a plugin for it as well that still works if you're not comfortable editing json files: https://github.com/rauenzi/BetterDiscordAddons/tree/master/Plugins/RemoveMinimumSize

It's still working as intended.

Putting the code below in your custom css will remove the text shadow. The custom css tab is located in your user settings near the bottom left side. Don't forget to click save and update.

.appMount-3lHmkl * {
    text-shadow: none;
}

In its current state, it's not easily done without a bit of css code. As for telling difference between popups, it really depends because Discord does use the same class names for a few popouts.

Here's an example with the user popout menu when clicking on someone's name. It'll just use the app background set by the variable (if you changed it) and have it cover the entire element:

.userPopout-3XzG_A {
    background-image: var(--app-bg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

Sure, I can make all of the buttons match in a future update.

You have to click both save and update once you're done. If it isn't saving, then it may be a BBD issue that could require you to just reinstall it. Mind showing me the code you're trying to get to work?

You can, but it'll require you to not use the variable I have it set to use. In the code below I have the layout of which value controls which side. The values are usually in px, so an example would be margin: 4px 8px 16px 8px !important;. Leave the important tag so it's sure to overwrite the existing code in the theme.

.layers-3iHuyZ {
    margin: top right bottom left !important;
}

It is not a bug. The header color when someone is playing a game, listening to Spotify, and streaming are all the default colors with Discord.

Just put an update live that'll fix that. Prior to mentions having their own dedicated variable that controls the color for it, it used the --app-accent and --app-accent-rgb variables and it seems I forgot about highlighted channels. Restarting your Discord client should get you the update, and changing the --mention-color and --mention-rgb variables in your custom css will change the colors.

For reference, the custom css tab is located in your user settings and scrolling to the bottom on the left side. There's a github link in the pinned comment near the top of this page with a whole list of variables you can use and their default value. Here's an example:

:root {
    --mention-color: #fff !important;
    --mention-rgb: 255,255,255 !important;
}

The lag is the result of the theme using more cpu resources than vanilla Discord because of the blur effect that the theme revolves around. I'm currently looking at other alternatives that don't use as much of your cpu. Sorry for the inconvenience.

It is possible to edit rather easily without knowing much css at all. Here is a list of variables that the theme uses. It may be outdated, but it should allow you to change most, if not all, of the colors that the theme uses. There's a custom css tab within BBD located in your user settings and scrolling to the bottom on the left side. Here's an example I've been messing around with for those that want a light theme (don't forget to click update and save):

:root {
    --main-color: #e8eaeb;
    --main-alt: #ddd;

    --card-color: #fff;
    --card-alt: #e0e0e0;
    --card-shadow-border: 0 1px 0 0 #ccc;
    --card-border-color: #ccc;
    --card-header-text-color: #333;

    --chat-color: #fff;
    --message-color: #edeff0;
    --message-alt: #e8e8e8;
    --message-border: #ccc;
    --text-normal: #202124;

    --popout-color: #fff;
    --popout-alt: #fff;
    --server-color: #eee;
    --sidebar-panel-color: #dee0e0;

    --status-picker-color: #dee0e0;
    --code-color: #e3e3e3;

    --input-color: #edeff0;
    --hover-color: rgba(0,0,0, 0.075);
    --select-color: rgba(0,0,0, 0.125);

    --menu-item-hover: rgba(0,0,0, 0.1);
    --menu-item-select: var(--select-color);

    --main-textarea-color: #fff;
    --main-textarea-border: #dadce0;
}

For reference: The values that look like #fff are using hex color codes, which you can use a color code picker on Google for. The values that look like rgba(0,0,0, 0.1) are using what they're labeled as. r [red], g [green], b [blue], a [alpha/opacity]; you can also use a color picker for this as well.

Product sans.

I haven't had complaints of it being laggy. It doesn't use that much more of your cpu than vanilla Discord.

Download the theme and place it in your BBD themes folder.

Did you manually change it via the --app-bg variable?

It'd be easier to download the theme file and put it in your Bandaged BetterDiscord themes folder. It's located at %appdata%/BetterDiscord/themes (windows button + r to open the run dialog; paste that in there and hit enter). Once the theme file is there, make sure that there's no (2) at the end of the file name incase you downloaded multiple times, then enable it in your themes list in your discord settings.

Once you have the theme enabled, then you can dabble in changing the variables to whatever you'd like. Here's an example you'd put in your custom css:

:root {
    --app-bg: url(https://i.imgur.com/U8bSjj5.jpg) !important;
}

Leave the !important tag, and click update and save.

I'm not sure what you're referring to when you mean "it".

Place the code below in your custom css:

.message-2qnXI6.groupStart-23k01U,
.message-2qnXI6:not(.groupStart-23k01U),
.message-2qnXI6.mentioned-xhSam7.selected-2P5D_Z {
    background-color: transparent !important;
}

.message-2qnXI6:not(.groupStart-23k01U):before,
.message-2qnXI6:not(.groupStart-23k01U):after {
    display: none;
}

Thanks!

For the border issue, RedPanda is correct. To modify it, go into your user settings and scroll to the bottom on the left side until you see a tab called "Custom CSS". Go into it and paste the following code and hit save and update:

:root {
    --app-margin: 0 !important;
}

The code below should work, just change the url value to whatever you'd like. As a side note, only .jpg, .png, and .gif files work for it.

:root {
    --app-bg: url(https://i.imgur.com/8vNApkL.jpg) !important;
}

That is just an error/warning for the text editor. You can ignore it.

There is a BBD settings option that allows it, but in the theme's current form, it won't change anything.

I'm currently rewriting the entire theme that way any unnecessary code is removed and is structured better, making the file size smaller as well. In doing so may provide a performance uplift, hopefully.

I'm currently rewriting the theme to include both the dark and light themes within Discord.

I suppose I could make an add-on theme that would work with vanilla Discord. No promises though.

The gap is there for avatars, but I can make it a smaller gap.

You can, but the theme is designed for solid color backgrounds (some areas, like messages, overlap). I have to push an update making the --app-bg be a straight background rather than background-color though. But once that's up, the following code will make it transparent with a background image.

:root {
    --app-bg: url(https://i.imgur.com/U8bSjj5.jpg);
}

.theme-dark,
.theme-light {
    --server-color: transparent;
    --main-color: transparent;
    --main-alt: transparent;
    --chat-color: transparent;

    --sidebar-panel-color: transparent;
    --status-picker-color: transparent;
}

The Spotify controls are from a plugin called SpotifyControls by DevilBro. You can download it here.

Open your user settings and scroll down to the bottom on the left side until you see "Custom CSS". Open that tab and place the following code in the textbox. Click "Save" and "Update". It'll remove the blur; increasing the 0px will increase the blur effect.

:root {
    --app-blur: 0px !important;
}

Open your user settings and scroll down to the bottom on the left side until you see "Custom CSS". Open that tab and place the following code in the textbox. Click "Save" and "Update".

.chat-3bRxxu {
    background-color: transparent !important;
}

.chatContent-a9vAAp,
.container-1r6BKw.themed-ANHk51 {
    background-color: var(--main-content-color) !important;
}

.membersWrap-2h-GB4 {
    background-color: var(--sidebar-color);
}

So the user popouts use variables for the background colors so you can change them to whatever you'd like. To change the Spotify header, you can change the variables below:

:root {
    --spotify-color: 29,185,84;
    --popout-header-opacity: 0.3;
}

However, changing the --popout-header-opacity also affects other popouts with similar headers. So to avoid that, you can just change the background-color for the Spotify header altogether like so:

.headerSpotify-zpWxgT {
    /* this is the default value in the theme */
    /*background-color: rgba(var(--spotify-color),var(--popout-header-opacity));*/

    background-color: #fff !important;
}

Do you mind showing me a screenshot of which part you're talking about?

So for changing the opacity of the header, specifically the Spotify header, you can change the 0.5 (it ranges from 0 to 1 with decimals) in the code below:

.headerSpotify-zpWxgT {
    background-color: rgba(var(--spotify-color), 0.5);
}

The game header is similar the Spotify one. Removing the var(--popout-header-opacity) with a number like above will change the opacity independently of all the headers in various popout menus:

.headerPlaying-j0WQBV {
    background-color: rgba(var(--nowplaying-color),var(--popout-header-opacity));
}

The streaming header is the same as well, just with a different class name of .headerStreaming-2FjmGz, with the RGB values using the --streaming-color variable.

The same goes for the profile headers when you click a users avatar, using the same variables as above:
.topSectionPlaying-1J5E4n, .topSectionStreaming-1Tpf5X, .topSectionSpotify-1lI0-P

.headerSpotify-zpWxgT,
.topSectionSpotify-1lI0-P {
    background-color: rgba(var(--spotify-color), 0.5);
}

.headerPlaying-j0WQBV,
.topSectionPlaying-1J5E4n {
    background-color: rgba(var(--nowplaying-color), 0.5);
}

.headerStreaming-2FjmGz,
.topSectionStreaming-1Tpf5X {
    background-color: rgba(var(--streaming-color), 0.5);
}

Which part(s) are you referring to?

You can't have options in pure CSS, but you can add this to your custom css:

.listItem-2P_4kh .wrapper-25eVIn .upperBadge-2XnnGB .iconBadge-2NuvG9 {
    animation: none !important;
}

Adding the following code into your custom css tab will allow you to change the background color and blur intensity of the title bar. Straight up removing backdrop-filter will remove any blur from it if that's what you want as well.

.titleBar-AC4pGV.typeWindows-1za-n7 {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--app-blur));
}

As for the channel background and text colors:

:root {
    --background-modifier-hover: rgba(255,255,255, 0.075) ;
    --background-modifier-selected: rgba(255,255,255, 0.125);
}

/* DEFAULT */
.icon-1DeIlz,
.name-23GUGE {
    color: #fff;
}

/* HOVER */
.modeMuted-onO3r-:hover .name-23GUGE,
.wrapper-2jXpOf:hover .name-23GUGE {
    color: #aaa;
}

/* UNREAD/SELECTED */
.modeSelected-346R90 .icon-1DeIlz,
.modeSelected-346R90:hover .icon-1DeIlz,
.modeUnread-1qO3K1 .icon-1DeIlz,
.modeUnread-1qO3K1:hover .icon-1DeIlz,
.modeConnected-3IsKId .name-23GUGE,
.modeConnected-3IsKId:hover .name-23GUGE,
.modeSelected-346R90 .name-23GUGE,
.modeSelected-346R90:hover .name-23GUGE,
.modeUnread-1qO3K1 .name-23GUGE,
.modeUnread-1qO3K1:hover .name-23GUGE,
.notInteractive-1X92pj.modeConnected-3IsKId .name-23GUGE,
.notInteractive-1X92pj.modeSelected-346R90 .name-23GUGE {
    color: #000;
}

/* ACTIONS (INVITE/EDIT) */
.actionIcon-PgcMM2 {
    color: #ff0000;
}
.actionIcon-PgcMM2:hover {
    color: #ff0000;
}

Sorry, that's an unintentional thing. I'll get it fixed.

Clear your browser's cache, or use a different one to download it.

You can ignore the syntax warnings.

Clear your browser's cache, or use a different one to download it.

Adding this to your custom css tab or the theme file itself will make the font Google Sans: https://pastebin.com/7puXUfb5. A lengthy single line of code apparently messes up the width on this site, so I put the code in a pastebin.

You can change it. I have an example of the code you'll need in the pinned comment at the top and where to put it. The only thing you need to do is upload the image somewhere (i.e. imgur or something similar), and get the image url.

.circleIconButton-jET_ig,
.circleIconButton-jET_ig.selected-ugP_am {
    background-color: #000 !important;
    color: #fff !important;
}