Как сделать красивый Discord
В этой статье речь пойдет о настройке пользовательского интерфейса Discord, который виден только в используемом клиенте на компьютере. Если вы заинтересованы в редактировании внешнего вида своего сервера, перейдите по ссылке ниже, чтобы прочесть другую статью по данной теме.
Подробнее: Красивое оформление сервера в Discord
Способ 1: Использование встроенных функций
Пока разработчики не занялись расширением функциональности мессенджера в плане присутствующих настроек внешнего вида, поэтому пользователи ограничены небольшим набором параметров. Возможно, в будущем появится несколько вариантов тем или настраиваемые цвета, а пока что для редактирования доступен только размер шрифтов и масштаб.
- Если речь идет о программе Дискорд для ПК, откройте настройки, нажав по значку в виде шестеренки справа от аватарки.
- Перейдите к разделу «Внешний вид».
Обладатели мобильных устройств не могут устанавливать и настраивать сторонние темы для Discord, поэтому им доступны только штатные настройки. Их редактирование осуществляется примерно по тому же принципу, как в программе на ПК, но со своими особенностями.
- На панели снизу тапните по значку с изображением своей аватарки.
- В списке с настройками найдите «Внешний вид».
- В данном разделе отметьте маркером подходящий тип темы — светлый или темный.
- Отключите синхронизацию между клиентами, если не хотите, чтобы текущие настройки применялись и на компьютере.
- Регулируйте ползунок масштабирования текста в чате, отслеживая результат в блоке ниже.
Как видно, сделать Дискорд красивым при помощи встроенной функциональности не особо получается, поскольку присутствующих параметров попросту не хватает. Есть более продвинутый вариант — сторонние настраиваемые темы, о которых и расскажем далее.
Способ 2: Использование сторонних тем
Сторонние темы для мессенджера — отличное средство для полного преображения внешнего вида. Есть полностью готовые плагины для тех, кто не хочет самостоятельно настраивать отображение элементов. Все темы распространяются в виде CSS-файлов и подключатся к Дискорду только при помощи расширения под названием BetterDiscord, об установке которого написано в другом материале на нашем сайте.
В той же статье вы найдете информацию о том, как установить готовую стороннюю тему, активировать ее и использовать программу с измененным оформлением.
Однако установка готовых тем — не единственное, что доступно для создания красивого Дискорда. Есть возможность обратиться к онлайн-сервису для редактирования стандартной или уже существующей темы под себя, изменив практически все присутствующие элементы.
- Воспользуйтесь ссылкой выше, чтобы сразу оказаться на странице редактора Gibbu. В нем есть целый ряд настраиваемых тем с заранее установленными изменениями. Помимо этого присутствуют варианты «BasicBackground» и «ClearVision», которые отлично подходят для ручной кастомизации.
- После выбора темы сразу задайте ей название, чтобы не забыть сделать это при скачивании.
- Установите фоновое изображение, вставив на него ссылку или отметив маркером «Computer File».
- Для загрузки картинки с компьютера нажмите кнопку «Browse» и в окне «Проводника» найдите подходящий файл.
- Измените его размер и размытие так, чтобы увиденный справа результат вас устраивал.
- Для выпадающих окон, например карточек пользователя, тоже можно установить свое фоновое изображение, редактируя его аналогичным образом.
- Далее идет блок «Colours» с доступными цветами для шрифтов и других окон программы. Изменяйте их яркость и оттенки при помощи ползунков и кнопок.
- Gibbu поддерживает различные дополнения, такие как горизонтальное отображение списка серверов вместо вертикального и замена статусов на обтекаемые.
- После включения плагинов обратите внимание на их доступные настройки, редактируя каждый параметр под себя.
- По завершении нажмите кнопку для скачивания и дождитесь загрузки CSS-файла.
- Переместите его в папку с темами (об этом рассказано в статье про BetterDiscord).
- Активируйте ее и убедитесь в том, что все элементы отображаются корректно. Лучше не закрывайте редактор на сайте, чтобы можно было вернуться к нему, поправить настройки и повторно загрузить файл на свой компьютер.
Custom CSS for Discord
Yes. Some Discord developers actively participate in the open-source development of discord mods. If they wanted to ban modders, they would have already.
Intro
Alright so discord looks pretty good but its not the best, lets fix that.
Intro to Modded Discord
To start with this your gonna need a modded discord client.
I recommend goosemod, its super easy to install, even if you use discord in a browser.
Once you have this installed, you will have a couple new things in your discord client
In your friends menu, you will have these themes and plugins buttons:
I recommend installing 2 themes right now, Revert Rebrand and Forgotten Keep, just search them and click install.
With that done, discord already looks 10x better.
Where to write Custom CSS
Goosemod adds a Custom CSS section into your options menu
Now scroll down to the goosemod section, and click Custom CSS
Hiding Stuff with Custom CSS
Alright, lets get started improving discord.
Discord loves shoving Nitro, their premium service, down your throat wherever you go, lets go over the process of removing all of this.
Gift Button (indepth tutorial)
In the chat box, there is this gift button, this is super simple to get rid of.
First, do ctrl+shift+i to open the inspect element menu, and click the elements tab, and click the element picker thing
Then click the element you want to get rid of, in this case, the gift button in the chat box.
After that, find the outermost container of the element that has some unique feature you can use a css selector on
In this case, we are really lucky, the outermost element has a nice, super unique aria-label that we can select with css
Take note of how you will select this element with css, go back to the goosemod custom CSS box, and write some CSS to hide it.
Also, you may end up writing a whole LOAD of custom css depending on how into this you get, so its a good idea to commant your code so it makes sense later on
Exit fullscreen mode
This CSS applies hot, so once you write it, it will instantly work with no need to refresh! Press esc to admire your work!
Nitro tab of Friends screen
This has the following HTML
Exit fullscreen mode
This doesn’t look like it has the best «unique» thing for us to use a selector on, but discord isnt going to add new tabs to this section anytime soon, so we can just hook onto the aria-posinset=»2″ with some specificity on its classes.
Exit fullscreen mode
Nitro Boost Banner
If you get into Bigger servers, they start asking you to «boost» the server with this little banner.
It used to be a whole lot bigger and more obnoxious, but it still is taking up unnecessary space on the screen
Exit fullscreen mode
Exit fullscreen mode
ok, but now we have a leftover space element that makes it look weird
We can just add an additional selector for the spacing div that follows this
Exit fullscreen mode
Doing fancy stuff with CSS
Collapsing the members panel dynamically
When you have discord only taking up half the screen, and dont hide the members panel, the chat gets really crampt.
If we do some magic with onhover and a load of stuff, we can have the members thing collapsed by default, only showing the icons of people who are online. Then, when its hovered, it expands out to show usernames, statuses, and roles
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
CSS themes and utility stylesheets for Discord (using beautifuldiscord)
License
MrTipson/DiscordCSS
Name already in use
- Local
- Codespaces
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
DiscordCSS is a set of css stylesheets that make styling discord easier. Each one seeks to provide a unique way to change how discord looks and feels.
The Discord app needs to be patched, my suggestion would be BeautifulDiscord, because it only injects CSS (no js). If you’re using the web version I would suggest trying my browser extension (chromium), but any other CSS injecting extensions should be fine as well.
A quick word on client mods
Discord is aware of the existance of client mods (such as BeautifulDiscord; not css stylesheets themselves) but they are technically not allowed. This is something you should be aware of. That being said, BeautifulDiscord is probably the safest one of all, since it interferes the least.
My hope is that some day, custom themes will be supported officialy, which is why I try to keep it as simple as possible (plain CSS), but still easy-ish to maintain (see my github action and the stylesheet tracking repository).
All of the stylesheets are modular. Import each one by writing @import url(«<link>»); at the top of your main css file (example: @import url(«https://mrtipson.github.io/DiscordCSS/css/base.css»); .
Once you have it imported, you can keep the default values or set the variables again to change their values.
Stylesheets are listed, along with images on the wiki page Stylesheets.
Local files can’t be opened due to access policies of browsers and discord itself.
Finished themes can be found in the examples.
These are their own stylesheets that provide a unique look incorporating various core stylesheets from this repository.
Как установить css для дискорд
For the case of BetterDiscord, you have to follow their tutorial for the CSS changes. You can also dive into the settings and add it straight into custom CSS.
TLDR
Create a MyCSS.theme.css file with a META-tag and CSS
Save this file to %AppData%\BetterDiscord\themes
Reload Discord with Ctrl+R and activate your theme, if you hadn’t already
If you want to quickly try out themes or Javascript, hit the Ctrl + Shift + I keycodes. It’ll open the developer tools of Discord
Auto Scroll To bottom of Page sounds more of a JS function though, you can easily achieve it by creating a scrollToBottom.plugin.js file containing at least
the function being inside of a button you place on screen. Discord supports jQuery, so pure javascript isn’t even necessary.
The steps for adding javascript plugins is about the same, but inside of the plugins folder instead, and they’re called MyPlugin.plugin.js
Note: installing unofficial third party tools or software might leave you prone to hacks, leaks and other security issues.
Custom CSS for Discord
Yes. Some Discord developers actively participate in the open-source development of discord mods. If they wanted to ban modders, they would have already.
Intro
Alright so discord looks pretty good but its not the best, lets fix that.
Intro to Modded Discord
To start with this your gonna need a modded discord client.
I recommend goosemod, its super easy to install, even if you use discord in a browser.
Once you have this installed, you will have a couple new things in your discord client
In your friends menu, you will have these themes and plugins buttons:
I recommend installing 2 themes right now, Revert Rebrand and Forgotten Keep, just search them and click install.
With that done, discord already looks 10x better.
Where to write Custom CSS
Goosemod adds a Custom CSS section into your options menu
Now scroll down to the goosemod section, and click Custom CSS
Hiding Stuff with Custom CSS
Alright, lets get started improving discord.
Discord loves shoving Nitro, their premium service, down your throat wherever you go, lets go over the process of removing all of this.
Gift Button (indepth tutorial)
In the chat box, there is this gift button, this is super simple to get rid of.
First, do ctrl+shift+i to open the inspect element menu, and click the elements tab, and click the element picker thing
Then click the element you want to get rid of, in this case, the gift button in the chat box.
After that, find the outermost container of the element that has some unique feature you can use a css selector on
In this case, we are really lucky, the outermost element has a nice, super unique aria-label that we can select with css
Take note of how you will select this element with css, go back to the goosemod custom CSS box, and write some CSS to hide it.
Also, you may end up writing a whole LOAD of custom css depending on how into this you get, so its a good idea to commant your code so it makes sense later on
Exit fullscreen mode
This CSS applies hot, so once you write it, it will instantly work with no need to refresh! Press esc to admire your work!
Nitro tab of Friends screen
This has the following HTML
Exit fullscreen mode
This doesn’t look like it has the best «unique» thing for us to use a selector on, but discord isnt going to add new tabs to this section anytime soon, so we can just hook onto the aria-posinset=»2″ with some specificity on its classes.
Exit fullscreen mode
Nitro Boost Banner
If you get into Bigger servers, they start asking you to «boost» the server with this little banner.
It used to be a whole lot bigger and more obnoxious, but it still is taking up unnecessary space on the screen
Exit fullscreen mode
Exit fullscreen mode
ok, but now we have a leftover space element that makes it look weird
We can just add an additional selector for the spacing div that follows this
Exit fullscreen mode
Doing fancy stuff with CSS
Collapsing the members panel dynamically
When you have discord only taking up half the screen, and dont hide the members panel, the chat gets really crampt.
If we do some magic with onhover and a load of stuff, we can have the members thing collapsed by default, only showing the icons of people who are online. Then, when its hovered, it expands out to show usernames, statuses, and roles
How to Make or Change a Discord Background Theme?
Tired of the old generic Discord theme? Surely, the more you use Discord, you’ll get bored with the same interface. Hence, you’ll want to explore new Discord background themes to try out. You might even wonder “can I create my own Discord background theme?”. The short answer is, yes, you can .
For now, through the default settings, users are restricted to using the Dark and Light theme. But the latter might not be a fan-favourite. Hell, we’ve even stumbled across a petition to “Ban the Discord light theme” on Change.org!
You can’t make this stuff up ��.
However, if you need steps to alternate between these 2 themes (Dark & Light), you can skip to the steps down below.
Now, we’re not discrediting Discord for their default theme. In fact, we believe they have one of the best layouts and user experiences for a messaging tool out there. But why stick to one default theme when you can try out new ones.
Besides, you’ll certainly leave your peers in awe with a new unique and amazeballs Discord theme ��!
With that said, the following guide shows how you can make as well as change your Discord background theme. These steps apply whether you’re on Windows , Mac , or Linux . At the end, there are steps for iPhone and Android devices too.
Currently, there’s no way to fix a custom theme for a particular server yet. However, as Discord continues to evolve, we believe this functionality will be added soon.
Table of Contents
2 Methods to Make a Discord Theme
Essentially, the design of the Discord app can be changed through the CSS settings . Hence, if you’re proficient in coding CSS, you can change the Discord app’s appearance in the Styles section of the developer console by pressing Ctrl + Shift + I keys.
In the following steps, the Discord theme that you’ll create will be in a CSS file as well.
However, when you restart the Discord client, *poof*��, the changes made and the appearance will be reset. Therefore, to install or apply the CSS settings and the created Discord theme, you’ll need to install BetterDiscord .
We’ll explain a little more on what BetterDiscord is and its cons in the next section.
For now, we suggest finding a Discord theme that suits you. You could download and use ready-made themes . For this, you can find plenty of safe and viable options through the BetterDiscord server .
Besides that, you can create your own Discord theme with the following 2 methods. All you need is a beloved picture of your favourite TV Show, Movie, Game, etc. to set as a background.
Method 1: Creating a Discord Theme through Codedotspectra
Firstly, go to the Discord theme generator at the Codedotspectra website by clicking here .
Then, choose a template to begin designing your Discord theme. For example, we landed on the Neutron theme.
After that, on the left pane, you can make the design changes, and simultaneously preview the changes on the right.
At the top left, there are buttons to change the settings , background image , font , colors and enable add-ons respectively.
As for the font, you can choose one from the vast selection of Google Fonts . So, we suggest visiting Google Fonts and searching which one fits your liking. Then, simply type the font name in the generator.
Finally, to download your theme file, click the Settings icon, enter your theme name , and click the Download button.
Method 2: Making a Discord Theme with the Theme Generator by DevilBro
For starters, you can visit the BetterDiscord Theme Generator page by DevilBro by clicking here .
On this page, you should see all the settings available to change the design of the theme. We suggest starting by finding and choosing a background image that you like.
After that, while making the design settings changes, you can preview the changes by clicking Update Preview .
Once you’ve got your ideal design, click Download .
Steps to Change the Discord Theme With BetterDiscord
Now that you’ve got your Discord theme file, you’ll need to install BetterDiscord to apply the design changes. But before that, you might be wondering:
What is BetterDiscord?
Basically, it’s a third-party software or an extension from the original Discord app. By utilizing Discord’s open API , it allows users and devs to reach the app’s backend to make modifications. Therefore, as the name suggests, its main goal is to make Discord appear “better”.
Many users choose to upgrade to BetterDiscord because it:
- Allows users to make additional customizations , such as custom themes, using CSS injection.
- Enables users to install third-party plugins and add-ons .
- Provides a broader range of emotes to use.
What are the Downsides to Installing BetterDiscord?
Before you proceed to install the BetterDiscord, we’ll like to highlight a few considerations. That way, we can clear up any doubts you may have about the service beforehand.
- Going against Discord’s Terms of Service
The main concern of using BetterDiscord is that it goes against Discord’s Terms of Service . From Discord’s end, this is mainly to protect users’ from data breaches. However, since its inception, Discord hasn’t banned anyone for installing BetterDiscord.
Besides, there’s plenty of people who have installed it and a whole community dedicated to BetterDiscord. So, don’t worry too much about being banned anytime soon.
- Data Breach Concerns
Additionally, people believe that using Better Discord opens up security holes in your client. Thus, enabling your Discord credentials to be leaked. However, we feel as long as you’re downloading theme files from the right sources you should be fine. Also, as long as you’re not going overboard with the imported add-ons and extensions.
Steps to Install BetterDiscord
With that out of the way, the following are the steps to install BetterDiscord :
- Firstly, go to the BetterDiscord page on GitHub by clicking here .
- Then, under BandageBD, depending on the OS your PC is running (Windows, macOS), click the download link for the BetterDiscord Installer.
- After that, open and run the downloaded BandagedBD.exe file. Click Agree at the License Agreement page.
- Next, click the icon next to Install BandagedBD .
-
Following that, tick the Install to Stable box and click Install .
Finally, once BetterDiscord has finished installing, the Discord app should restart, and you should see the following message.
Steps to Install Discord Themes with BetterDiscord
With BetterDiscord installed, you can now proceed to install your custom Discord theme (.CSS) that you created or downloaded earlier.
-
For starters, at the Discord client, click the settings icon (⚙️), to access the User Settings .
-
Next, on the left pane, under BandagedBD, select Themes , and click Open ThemeFolder .
-
After that, copy the Discord theme file which you’ve created or downloaded earlier, and paste it into this folder.
-
Then, at the Discord client, enable the theme you’ve just pasted by clicking the switch.
Now, you should see that the Discord background theme has been successfully applied. If you didn’t notice any changes, try restarting the Discord client by pressing the Ctrl + R keys.
Steps to Change the Discord Theme Without BetterDiscord
Alternatively, if you’re uncomfortable with installing BetterDiscord, you could change the Discord background theme, within the app setting . The only downside is you’ll be limited to alternate between 2 theme options , dark and light.
Nonetheless, if you only need a minimal design change, then this step can be your go-to.
- From the Discord client, click the settings icon (⚙️), to access the User Settings .
- Then, from the left pane, under App Settings, select Appearance .
- After that, you’ll have the option to change the Theme (Dark, Light) and the Message Display (Cozy, Compact).
Steps to Change the Discord Theme on iPhone and Android
What if you’re using the Discord mobile app? Sadly, there’s no direct option to install or change custom Discord background themes on mobile devices yet.
However, similar to the previous step, you can choose 1 of 2 theme options within the Discord app settings. To navigate to these Discord theme settings:
- From the Discord app, tap your profile from the bottom bar.
- After that, scroll down and under App Settings, tap Appearance .
-
On the next page, you’ll have the options to change the Theme , either to Light or Dark .
Happy Theming…
In sum, those are the ways to make and change a Discord background theme. Now, that you know the steps, you can begin creating and using different kinds of themes to one-up your Discord peers.
Besides, as you’re spending lots of time messaging, collaborating, and gaming on Discord, you’ll want a background that’s more appealing and entertaining to look at.
That being said, let your creativity take over, and see what better Discord themes you can come up with.
Lastly, let us know in the comments :
- How does your new Discord theme look?
- Did you run into any issues when installing the Discord themes? Do share so we can help out��.
Feel free to share this post with your friend who needs a new Discord theme��.
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
replace the url with your custom font url
License
Wizerdz/customdiscordcss
Name already in use
- Local
- Codespaces
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Note that this whole branch is deprecated. all further development is going on here: https://github.com/JsSucks/BetterDiscordApp
If you have issues then join the BD Discord server: Here
Do not contact Discord support about BD issues.
All plugins must be named *.plugin.js and all themes must be named *.theme.css
Better Discord App enhances the Discord desktop app with new features.
Windows Universal Installer
- Download the latest installer from releases
- Follow the instructions
- .NET 4.0 required https://www.microsoft.com/en-us/download/details.aspx?id=30653
- Windows Installer users asar.net https://github.com/Jiiks/asar.net
- Download the latest package from releases
- Run the installer
- Installer requires node download the binaries and place in the same folder as the installer if you don’t have node installed.
- Installer uses asar which is bundled with the installer.
- Installer uses wrench which is bundled with the installer.
- Extract app.asar
- Add BetterDiscord as a dependency
- Add init to Discord load event
- Move BetterDiscord to node_modules
Emotes: BetterDiscord adds all Twitch.tv, most FrankerFaceZ and BetterTTV emotes to Discord. Supported emotes: https://betterdiscord.net/emotes
Quick Emote Menu: Quick Emote Menu adds a menu for quickly adding twitch emotes and your favorite emotes.
Emote Autocapitalize: Automatically capitalize Twitch.tv global emotes.
Emote Autocomplete: Automatically completes/suggests emotes.(soon)
Minimal Mode: Minimal mode makes elements smaller and hides certain elements.
Voice Chat Mode: Only display voice channels
Public Servers: Public server listing provided by: DiscordServers.com
Custom CSS BetterDiscord supports custom CSS for styling Discord to your liking.
Custom Themes BetterDiscord comes with a theme loader for loading your own or downloading themes made by others.
Plugins BetterDiscord comes with a JavaScript plugin loader for loading your own or downloading plugins made by others.
Spoilers Add spoilers to your chat, simply add [!s] to your message.
Save Logs Locally: Save chatlogs locally.(soon)
Adding your server to public servers
As of JS1.60 the public server list is supplied by DiscordServers.com Add your server there and it will appear in the list!
BetterDiscord Uses the following API’s
-
for Twitch emotes for BetterTTV emotes
- MacOS Installer by Candunc
- Emote titles by pendo324
- Majority of FFZ emote work by Pohky and DeathStrikeV
- Majority of BTTV emote work by EhsanKia
The MIT License (MIT)
Copyright (c) 2015-present Jiiks | Jiiks.net
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.