FAQ Vencord Edition | C H I L L A X (2024)

The steps are first settings, then go to the VENCORD Section and then Themes. Finally, click Edit Quick CSS which should open the integrated Monaco (It's already there no need for installation as this is part of the Vencord itself) code editor. Now using this Editor, you can easily edit css with hot reloading. See the below-attached screenshots:

Now to go to line number 46 (at the time of writing, the line number is 46 which in a later version might change) or where the variable --wallpaper defined and change the url that is within the single quote '' to the wallpaper/gif cdn url that you want to set.

See the below screenshots:

Now your favourite background image/gif should be applied.

First, make sure that the font you are trying to use is already hosted somewhere if it is not already. Most of the time you will be using google fonts. From there, choose the font you are looking for and adjust all the settings and everything (font weights, size, etc.) and then copy the css import url. See the below screenshots:

1. 

2. 

3. 

4. 

5. 

6. 

   • Only copy the highlighted part. In your case, the link can be different.

7. 

   • Now go to Settings > Themes > Edit Quick CSS.

   • Paste the copied link at the top just like the above screenshot and put the ; at the end of it.

8. 

   • Now change the --font-nane to the name of the font that you have just imported.

   • Optionally adjust the --font-size if you need to.

And now the new font(s) should be applied.

• Go to Settings > Themes > Edit Quick CSS.

• Find the css variable --font-size and change it to your needs.

That's it.

• Go to Settings > Themes > Edit Quick CSS.

• Find the css variables --accentcolor, --accentcolor2 and change them to your needs.

• You may want to play around with them to find the right balance.

• Go to Settings > Themes > Edit Quick CSS.

• Find the css variables --user-name and change it.

However, if you have decided to make up your mind, then

• Go to Settings > Vencord > Enable Window Transparency and turn it on.

• Now Settings > Themes > Edit Quick CSS and remove the --wallpaper css variable mentioned in here.

• Your window should now be transparent or see through etc.

• Now you may want to add a bit of blur to make things readable in the container__037ed. However, discord uses electron, and we have found it to work differently on different OS, and the window manager of your OS also plays a vital role here. So, the below css snippet may or may not work properly (Translucence is enabled in window manager level). In case it does not work, it will at least make the container__037ed basically that region a bit darker.

  .container__037ed { background-color: rgba(255, 255, 255, 0) !important; /* Semi-transparent white for light theme */ /* Or use this for dark theme: background-color: rgba(0, 0, 0, 0.1); */ backdrop-filter: blur(1px) !important; /*Blur the background*/ border-radius: 10px; /* Rounded corners */ /* Or use this for dark theme: border: 1px solid rgba(0, 0, 0, 0.2); */ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important; /* Optional: Add a box shadow for depth */ }

• We have already mentioned how you can import a custom font and use it here.

• Now use the below css snippet (paste it at the very bottom of the Edit Quick CSS):

/* Reset groupchat name font */.input_f8b740 { font-family: var(--font-name) !important; /* Write the font name here */ font-weight: inherit !important; /* Self explanatory */}

• If you want, you can replace var(--font-name) with your custom font name if you are planning on using multiple fonts at once.

• Make sure that Hardware Acceleration is on. If not, then turn it on.

• The steps are first settings, then Advance and then turn on Hardware Acceleration.

This is basically an addon; to remove it:

• The steps are first Settings, then go to the Themes Section and then Edit Quick CSS.

• Remove or comment out the line (currently line number 33 and maybe different in your case) containing @import url("https://warrayquipsome.github.io/Chillax/Addons/AvatarOnlyMemberList.css");. Now the member list will always be visible instead of on hover. See the below screenshots:

1. 

   • Now remove/comment out this line.

2. 

   • Finally, you should have something like this:

3. 

This is also very similar to the previous FAQ. This thing is also an addon. Remove it to get back default emojis:

• The steps are first Settings, then go to the Themes Section and then Edit Quick CSS.

• Remove or comment out the line (currently line number 29 and maybe different in your case) containing @import url("https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Microsoft.css");.

• Now you should have the old emojis.

• The steps are first Settings, then go to the Themes Section and then Edit Quick CSS.

• Remove or comment out the line (currently line number 34 and maybe different in your case) containing @import url("https://warrayquipsome.github.io/Chillax/Addons/FolderRedesign.css");.

• Now it should be normal like the old discord.

• The steps are first Settings, then go to the Themes Section and then Edit Quick CSS.

• Now the use/paste below css snippet at the very end:

If you are using dark mode, then the below css snippet

/* hide message in the sidebar when using dark mode */.theme-dark .sidebar_a4d4d9 .content_eed6a8:after { color: rgba(255, 255, 255, 0) !important; text-shadow: none !important;}

Or, if you are using light mode, then the below css snippet

/* hide message in the sidebar when using light mode */.theme-light .sidebar_a4d4d9 .content_eed6a8:after { color: rgba(255, 255, 255, 0) !important; text-shadow: none !important;}

• Now it should be a bit better.

You can enable dark or light mode from the Discord Settings. Steps are:

• Now go to Settings > Appearance.

• Finally, choose either light mode or dark mode based on your preference, and Chillax will reflect that.

Before applying the theme:

• Firstly, make sure that there is no custom css or css snippet(s) is/are running.

• Secondly, make sure that no party plugin related to theming is running (if debugging, disable all plugins for quicker conclusion).

• Thirdly, Settings > Appearance is set to either Dark or light mode.

• Now apply the Latest version of Chillax.

• Now you should have Chillax with the default look and feel.

• The steps are first Settings, then go to the Themes Section and then Edit Quick CSS.

• Now go to the line 92 or find the line that says --rs-phone-visible: block; and change this line to the below line:

  --rs-phone-visible: none;

• Now mobile icon or phone icon should be gone.

• The steps are first Settings, then go to the Themes Section and then Edit Quick CSS.

• Now apply the below css snippet, which will change the color of every url to the color of your choice.

[href^="http://"], [href^="https://"], [href^="www."] { color: #30d944 !important; /* change it to whatever you like */}