├── .github └── ISSUE_TEMPLATE │ ├── config.yml │ ├── feature_request.yml │ └── bug_report.yml ├── .gitignore ├── assets ├── forum.png ├── adblock.png ├── alttext.png ├── botmsgs.png ├── quickcss.png ├── settings.png ├── threads.gif ├── accountgrid.png ├── bartender.gif ├── chatprompt.png ├── customEmoji.png ├── declutter.png ├── fancysearch.png ├── membercount.png ├── quicksearch.png ├── spotplayer.png ├── tabsv2icon.png ├── themehotfix.png ├── channeltweaks.png ├── acrylicPopouts.png ├── glowConnections.png └── spotplayerHovered.png ├── modules ├── fancySearch.css ├── hiddenthreads.css ├── acrylicpopup.css ├── custom-bar-prompt.css ├── vc-membercount.css ├── custom-emoji-bar.css ├── bartender.css ├── bartenderAnimated.css ├── channeltweaks.css ├── declutter.css └── compressbotmsgs.css ├── LICENSE └── README.md /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Prevent `.DS_Store` from launching into the repo 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /assets/forum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/forum.png -------------------------------------------------------------------------------- /assets/adblock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/adblock.png -------------------------------------------------------------------------------- /assets/alttext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/alttext.png -------------------------------------------------------------------------------- /assets/botmsgs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/botmsgs.png -------------------------------------------------------------------------------- /assets/quickcss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/quickcss.png -------------------------------------------------------------------------------- /assets/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/settings.png -------------------------------------------------------------------------------- /assets/threads.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/threads.gif -------------------------------------------------------------------------------- /assets/accountgrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/accountgrid.png -------------------------------------------------------------------------------- /assets/bartender.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/bartender.gif -------------------------------------------------------------------------------- /assets/chatprompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/chatprompt.png -------------------------------------------------------------------------------- /assets/customEmoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/customEmoji.png -------------------------------------------------------------------------------- /assets/declutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/declutter.png -------------------------------------------------------------------------------- /assets/fancysearch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/fancysearch.png -------------------------------------------------------------------------------- /assets/membercount.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/membercount.png -------------------------------------------------------------------------------- /assets/quicksearch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/quicksearch.png -------------------------------------------------------------------------------- /assets/spotplayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/spotplayer.png -------------------------------------------------------------------------------- /assets/tabsv2icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/tabsv2icon.png -------------------------------------------------------------------------------- /assets/themehotfix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/themehotfix.png -------------------------------------------------------------------------------- /assets/channeltweaks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/channeltweaks.png -------------------------------------------------------------------------------- /assets/acrylicPopouts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/acrylicPopouts.png -------------------------------------------------------------------------------- /assets/glowConnections.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/glowConnections.png -------------------------------------------------------------------------------- /assets/spotplayerHovered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AushevAhmad/awesome-css/HEAD/assets/spotplayerHovered.png -------------------------------------------------------------------------------- /modules/fancySearch.css: -------------------------------------------------------------------------------- 1 | /* search bar tweaks: increased height, defaults to icon size */ 2 | .searchBar__97492 { 3 | height: 30px !important; 4 | width: 30px; 5 | padding: 3px 5px; 6 | border-radius: 8px; 7 | cursor: pointer; 8 | } 9 | .icon__97492.iconLayout_fea832.small_fea832 { 10 | cursor: pointer; 11 | scale: 1.2; 12 | } -------------------------------------------------------------------------------- /modules/hiddenthreads.css: -------------------------------------------------------------------------------- 1 | /* Make Threads hidden by default and slide down on hover */ 2 | #channels [class^=container_]:not([class*=containerWithMargin]) 3 | { max-height: 0; 4 | overflow: hidden; 5 | transition: max-height 2s ease; } 6 | 7 | #channels [class^=containerDefault_]:hover + [class^=container_], 8 | #channels [class^=container_]:hover 9 | { max-height: 100%; } -------------------------------------------------------------------------------- /modules/acrylicpopup.css: -------------------------------------------------------------------------------- 1 | @import url('https://s-k-y-l-i.github.io/discord-themes/Theme%20code/transparent-popups.css'); 2 | 3 | /* Config */ 4 | :root{ 5 | --blur-popup: 40px; /*Popup blur size*/ 6 | --opacity-popup: 0.6; /*Popup background opacity*/ 7 | --radius-popup: 40px; /*Popup border radius*/ 8 | --radius-context: 20px; /*Context menu popups radius*/ 9 | /*--pop-up-color: black; /*uncomment for custom Popup color*/ 10 | /*--context-menu-border: 1px solid red; /*uncomment for custom border*/ 11 | } -------------------------------------------------------------------------------- /modules/custom-bar-prompt.css: -------------------------------------------------------------------------------- 1 | /* custom chat bar input text */ 2 | 3 | /* hide existing text */ 4 | .placeholder__1b31f.slateTextArea_ec4baf.fontSize16Padding__74017 { 5 | visibility: hidden; 6 | } 7 | 8 | /* add custom text */ 9 | .placeholder__1b31f.slateTextArea_ec4baf.fontSize16Padding__74017::before { 10 | visibility: visible; 11 | content: var(--prompt-text); /* replace var() with your desired text (in quotes) */ 12 | 13 | /* for example: 14 | 15 | content: "i like snow cones"; 16 | 17 | */ 18 | } -------------------------------------------------------------------------------- /modules/vc-membercount.css: -------------------------------------------------------------------------------- 1 | /* Vencord MemberCount Tweaks */ 2 | /* This module has no affect unless the vencord MemberCount plugin is installed */ 3 | /* https://vencord.dev/plugins/MemberCount */ 4 | 5 | .vc-membercount-online-dot, 6 | .vc-membercount-total-dot { 7 | display: none !important; 8 | } 9 | 10 | .vc-membercount-total::before { 11 | content: "/"; 12 | visibility: visible; 13 | position: absolute; 14 | display: contents; 15 | } 16 | 17 | .vc-membercount-total::after { 18 | content: " online"; 19 | visibility: visible; 20 | position: absolute; 21 | display: contents; 22 | } 23 | 24 | .membersGroup_c8ffbb.container_cc72c1 { 25 | padding-top: 20px; 26 | } -------------------------------------------------------------------------------- /modules/custom-emoji-bar.css: -------------------------------------------------------------------------------- 1 | /* Replaces the default emoji picker with any emoji of your choice! */ 2 | 3 | [aria-label="Select emoji"]::before { 4 | content: ""; 5 | background-image: var(--image-link); /* replace var() with url("link-to-image") */ 6 | 7 | /* for example: 8 | 9 | background-image: url("https://cdn.discordapp.com/emojis/1226352687914942484.webp"); 10 | 11 | */ 12 | 13 | background-size: contain; 14 | background-position: center; 15 | background-repeat: no-repeat; 16 | border-radius: 20%; 17 | position: absolute; 18 | /* Adjust the width or height for the emoji */ 19 | width: 24px; 20 | height: 24px; 21 | /* end */ 22 | display: block; 23 | visibility: visible; 24 | } 25 | 26 | /* hide original emoji */ 27 | [aria-label="Select emoji"] { 28 | visibility: hidden; 29 | } -------------------------------------------------------------------------------- /modules/bartender.css: -------------------------------------------------------------------------------- 1 | /* Simple drawer for discord's toolbar, hover over the menu to open. */ 2 | 3 | /* NOTE: this module does not work properly on Vesktop */ 4 | 5 | /* add a menu icon to be visble at all times */ 6 | [class="toolbar__9293f"]::before { 7 | content: "∙∙∙"; /* Change this to anything you like [Default: ∙∙∙] */ 8 | font-size: 110%; 9 | margin: 0 8px; 10 | color: var(--text-muted); 11 | } 12 | 13 | /* decrease width to hide everything but menu icon */ 14 | [class="toolbar__9293f"] { 15 | width: var(--bartender-width); /* Adjust this based on design requirements */ 16 | /* If you pick a new icon, instead of "∙∙∙", you may need to adjust this value */ 17 | } 18 | 19 | [class="toolbar__9293f"]:hover, /* expand toobar on hover */ 20 | [class="toolbar__9293f"]:has(.open__97492, .selected__9293f:not([aria-label="Hide Member List"])) /* keep the toolbar open if an item (e.g., search) is active */ 21 | { 22 | width: unset; /* Adjust the width to show the whole section if necessary [default: 21%] */ 23 | /* If you pick a new marker, instead of "∙∙∙", you may need to adjust this value as well */ 24 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Ahmad 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /modules/bartenderAnimated.css: -------------------------------------------------------------------------------- 1 | /* Simple drawer for discord's toolbar, hover over the menu to open. */ 2 | 3 | /* NOTE: this module does not work properly on Vesktop */ 4 | 5 | /* add a menu icon to be visble at all times */ 6 | [class="toolbar__9293f"]::before { 7 | content: "∙∙∙"; /* Change this to anything you like [Default: ∙∙∙] */ 8 | font-size: 110%; 9 | margin: 0 8px; 10 | color: var(--text-muted); 11 | } 12 | 13 | /* decrease width to hide everything but menu icon */ 14 | [class="toolbar__9293f"] { 15 | width: var(--bartender-width); /* Adjust this to 34-45px based on design requirements */ 16 | transition: width 0.5s ease-in-out; 17 | /* If you pick a new marker, instead of "∙∙∙", you'll need to adjust this value */ 18 | } 19 | 20 | [class="toolbar__9293f"]:hover, /* expand toobar on hover */ 21 | [class="toolbar__9293f"]:has(.open__97492, .selected__9293f:not([aria-label="Hide Member List"])) /* keep the toolbar open if an item (e.g., search) is active */ 22 | { 23 | width: var(--animation-size); /* Adjust the width to show the whole section if necessary [default: 21%] */ 24 | /* If you pick a new marker, instead of "∙∙∙", you may need to adjust this value as well */ 25 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Request a new feature. 3 | title: "✨ [Title here]" 4 | labels: ["feature"] 5 | body: 6 | - type: textarea 7 | attributes: 8 | label: Feature Request Description 9 | description: Provide a clear and concise description of this feature request with any problems and solutions. 10 | validations: 11 | required: true 12 | 13 | - type: textarea 14 | attributes: 15 | label: Screenshots 16 | description: Add screenshots to help explain this feature request, if applicable. 17 | validations: 18 | required: false 19 | 20 | - type: textarea 21 | attributes: 22 | label: Additional Context 23 | description: Provide any additional information about this feature request. 24 | validations: 25 | required: false 26 | 27 | - type: checkboxes 28 | attributes: 29 | label: Final Checks 30 | options: 31 | - label: My issue title is descriptive 32 | required: true 33 | - label: This is a single feature request (multiple feature requests should be reported individually) 34 | required: true 35 | 36 | - type: markdown 37 | attributes: 38 | value: Thank you for taking the time to report this feature request! -------------------------------------------------------------------------------- /modules/channeltweaks.css: -------------------------------------------------------------------------------- 1 | /* changes to the channel list for better usability */ 2 | 3 | /* squish channel height/spacing */ 4 | [class="link__2ea32"] { 5 | padding-block: 3px; 6 | } 7 | 8 | /* shrink all channel icons */ 9 | [class="iconContainer__2ea32"]>svg[role="img"] { 10 | scale: 0.8; 11 | } 12 | 13 | /* squeeze channel list left */ 14 | .wrapper__2ea32:not(.typeThread__2ea32) { 15 | margin-left: 0 !important; 16 | } 17 | 18 | .wrapper__29444 { 19 | padding-left: 8px !important; 20 | } 21 | 22 | /* fix threads "spine" */ 23 | .spineBorder__5b40b { 24 | bottom: 20px !important; 25 | left: 16px; 26 | } 27 | 28 | .containerDefault_c69b6d>svg { 29 | top: 5px; 30 | left: 16px; 31 | } 32 | 33 | .wrapper__2ea32.typeThread__2ea32 { 34 | margin-left: 28px; 35 | } 36 | 37 | /* make unread channel's icons brighter (because the unread indicator is now hidden)*/ 38 | .modeUnreadImportant__2ea32 .icon__2ea32, 39 | .modeUnreadImportant__2ea32:hover .icon__2ea32, 40 | .modeSelected__2ea32:hover .icon__2ea32 { 41 | color: var(--interactive-active); 42 | } 43 | 44 | /* dim all category labels */ 45 | [class="mainContent__29444"] { 46 | opacity: 70%; 47 | } 48 | 49 | /* hide category dropdown arrows, instead dim label when collapsed */ 50 | [class="mainContent__29444"]>[class="icon__29444"] { 51 | display: none; 52 | } 53 | 54 | [class="mainContent__29444"][aria-expanded="false"] { 55 | opacity: 50% !important; 56 | } -------------------------------------------------------------------------------- /modules/declutter.css: -------------------------------------------------------------------------------- 1 | /* Declutter Discord's UI */ 2 | 3 | /* Hide various elements */ 4 | .panelSubtextContainer__37e49, /* Hide status/username viewer near mic button */ 5 | .newMemberBadge_f80704, /* No "New member" badge */ 6 | div[class*="listItem"]:has(div[aria-label="Explore Discoverable Servers"]), /* Hide 'Explore Discoverable Servers' in server page */ 7 | .text_a2f514, /* Remove loading quote */ 8 | .threadSuggestionBar__841c8, /* Hide thread suggestion in reply */ 9 | div.themed_b3f026.item_b3f026.item__133bf:nth-of-type(4), /* No blocked section in friends list */ 10 | .nowPlayingColumn__133bf, /* No "Active now" tab */ 11 | button[aria-label="Open GIF picker"], /* Hide GIF picker button */ 12 | button[aria-label="Open sticker picker"], /* Hide sticker picker button */ 13 | [class^=bar__]:has([class^=voiceChannelsIcon__]), /* Hide "x in vc" scroll indicator */ 14 | [aria-label="Help"], /* Removes "Support" question mark button */ 15 | [aria-label="Start Video Call"], /* remove video call button */ 16 | [aria-label="Show User Profile"], /* Remove Show User Profile button */ 17 | [aria-label="Add Friends to DM"], /* Remove Add Friends to DM button */ 18 | [aria-label="Threads"], /* Remove Threads button in topbar */ 19 | [aria-label="Notification Settings"], /* Remove Notification Settings button in topbar */ 20 | .divider_d2b491.divider_ae36e5, /* Remove dividing line in profile */ 21 | [class^="iconGroup"]:has([class^="hangStatusIcon"]), /* Hide hang statuses */ 22 | [class*=channelAppLauncher_] /* No app launcher */ { 23 | display: none !important; 24 | } -------------------------------------------------------------------------------- /modules/compressbotmsgs.css: -------------------------------------------------------------------------------- 1 | /**** Compress GitHub Bot's star and fork messages ****/ 2 | [class^="grid_"]:has(> :last-child:nth-child(2)) { 3 | display: flex; 4 | flex-wrap: wrap; 5 | padding: 0.1rem 1rem 0.6rem 0.75rem; 6 | } 7 | 8 | /* add padding between username and link */ 9 | [class^="grid_"]:has(> :last-child:nth-child(2)) [class^="embedTitle_"], 10 | [class^="grid_"]:has(> :last-child:nth-child(2)) [class^="embedDescription_"] { 11 | padding-left: 12px; 12 | } 13 | 14 | /* Hide the extra GitHub bot avatars */ 15 | [class^="messageListItem_"]:has([class^="botText_"]):has([class^="grid_"] > :last-child:nth-child(2)) [class^="contents_"] { 16 | display:none; 17 | } 18 | /* Reduce padding between selected bot messages */ 19 | [class^="messageListItem_"]:has([class^="botText_"]):has([class^="grid_"] > :last-child:nth-child(2)) [class*="groupStart_"] { 20 | margin-top: -12px; 21 | } 22 | .container_b7e1cb:has([class^="grid_"] > :last-child:nth-child(2)) { 23 | padding-top: 0rem; 24 | padding-bottom: 0rem; 25 | top: 12px; 26 | } 27 | 28 | /* I do some weird offseting, it just looks better to not have a misaligned hover overlay */ 29 | .message__5126c:has([class^="grid_"]):hover { 30 | background-color: #00000000 !important; 31 | background: #00000000 !important; /* Why do you do this, Discord Nitro themes.. */ 32 | } 33 | 34 | /* Align small bot messages with large ones */ 35 | /* Alternately, you could remove their background color or just live with mismatched lengths */ 36 | [class^="gridContainer_"], [class^="embedWrapper_"] { 37 | min-width: 525px; 38 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: File a bug report. 3 | title: "🐛 [Title here]" 4 | labels: ["bug"] 5 | body: 6 | - type: textarea 7 | attributes: 8 | label: Bug Description 9 | description: Provide a clear and concise description of this bug, what is the repo/css issue you can see, etc. 10 | validations: 11 | required: true 12 | 13 | - type: textarea 14 | attributes: 15 | label: Steps To Reproduce 16 | description: Provide steps to reproduce this bug. 17 | placeholder: | 18 | 1. [First Step] 19 | 2. [Second Step] 20 | 3. [and so on...] 21 | validations: 22 | required: true 23 | 24 | - type: textarea 25 | attributes: 26 | label: Expected Behavior 27 | description: Provide a clear and concise description of what you expected to happen. 28 | validations: 29 | required: true 30 | 31 | - type: textarea 32 | attributes: 33 | label: Actual Behavior 34 | description: Provide a clear and concise description of what happened. 35 | validations: 36 | required: true 37 | 38 | - type: textarea 39 | attributes: 40 | label: Screenshots 41 | description: Add screenshots to help explain this bug, if applicable. 42 | validations: 43 | required: false 44 | 45 | - type: textarea 46 | attributes: 47 | label: Additional Context 48 | description: Provide any additional information about this bug. 49 | validations: 50 | required: false 51 | 52 | - type: checkboxes 53 | attributes: 54 | label: Final Checks 55 | options: 56 | - label: My issue title is descriptive 57 | required: true 58 | - label: This is a single bug (multiple bugs should be reported individually) 59 | required: true 60 | 61 | - type: markdown 62 | attributes: 63 | value: Thank you for taking the time to report this bug! -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome CSS Snippets for Discord 2 | 3 | Welcome to Awesome CSS Snippets for Discord! This repository is a curated collection of CSS snippets designed to enhance your Discord experience. Whether you want to customize the appearance, improve functionality, or streamline your usage, these snippets offer a variety of solutions. 4 | 5 | Jump down to [Installing Modules](#installing-modules) for help getting started. 6 | 7 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/AushevAhmad/awesome-css/pulls) 8 | [![License](https://img.shields.io/github/license/AushevAhmad/awesome-css)](https://github.com/AushevAhmad/awesome-css/blob/main/LICENSE.md) 9 | ![Stars](https://img.shields.io/github/stars/AushevAhmad/awesome-css) 10 | 11 | ## Modules Overview 12 | 13 | Below is a list of modules available in this repository: 14 | 15 | ### 🍸 Bartender 16 | 17 | Hide Discord's toolbar icons until you need them. 18 | 19 | ```css 20 | @import url("https://aushevahmad.github.io/awesome-css/modules/bartender.css"); 21 | :root { 22 | --bartender-width: 4ch; /* Width for displayed icon. Adjust depending on your needs [Default: 4ch] */ 23 | } 24 | ``` 25 | 26 | ![Bartender](assets/bartender.gif) 27 | 28 | If you fancy an animated version, which slides in from the left, you can use this version: 29 | 30 | ```css 31 | @import url("https://aushevahmad.github.io/awesome-css/modules/bartenderAnimated.css"); 32 | 33 | :root { 34 | --bartender-width: 34px; /* Adjust this to 34-45px based on themes [Default: 34px] */ 35 | --animation-size: 21%; /* Adjust the width to show the whole section if necessary [default: 21%] */ 36 | } 37 | ``` 38 | *note that the toolbar's width will not be consistent with all window sizes.* 39 | 40 | ### 🙂 Custom Emoji 41 | 42 | Replace the emoji icon in text inputs with one of your choice. 43 | 44 | ```css 45 | @import url("https://aushevahmad.github.io/awesome-css/modules/custom-emoji-bar.css"); 46 | 47 | :root { 48 | --image-link: url("https://cdn.discordapp.com/emojis/1196313509525471355.webp"); 49 | } 50 | ``` 51 | 52 | ![Custom Emoji](/assets/customEmoji.png) 53 | 54 | ### ⌨️ Custom Prompt 55 | 56 | Replace the text prompt in the chat bar. 57 | 58 | ```css 59 | @import url("https://aushevahmad.github.io/awesome-css/modules/custom-bar-prompt.css"); 60 | 61 | :root { 62 | --prompt-text: "be silly :3"; 63 | } 64 | ``` 65 | 66 | ![Custom Prompt](assets/chatprompt.png) 67 | 68 | ### 📶 MemberCount Tweak 69 | 70 | Minor adjustments to the membercount view. *This module has no effect unless the [Vencord MemberCount](https://vencord.dev/plugins/MemberCount) plugin is installed.* 71 | 72 | ```css 73 | @import url("https://aushevahmad.github.io/awesome-css/modules/vc-membercount.css"); 74 | ``` 75 | 76 | ![MemberCount Tweak](assets/membercount.png) 77 | 78 | ### 💬 Channel Tweaks 79 | 80 | A few changes to the channel list, to increase density. 81 | 82 | ```css 83 | @import url("https://aushevahmad.github.io/awesome-css/modules/channeltweaks.css"); 84 | ``` 85 | 86 | ![Channel Tweak](assets/channeltweaks.png) 87 | 88 | ### 🔍 Fancy Search 89 | 90 | Keep the search bar out of the way when it's not in use 91 | 92 | ```css 93 | @import url("https://aushevahmad.github.io/awesome-css/modules/fancySearch.css"); 94 | ``` 95 | 96 | ![Fancy Search](assets/fancysearch.png) 97 | 98 | ### 🧹 Declutter 99 | 100 | Remove useless buttons and give Discord a cleaner look. 101 | 102 | ```css 103 | @import url("https://aushevahmad.github.io/awesome-css/modules/declutter.css"); 104 | ``` 105 | 106 | ![Declutter](assets/declutter.png) 107 | 108 | ## Modules from Other Developers 109 | 110 | In addition to our modules, here are some contributions from other developers: 111 | 112 | ### 🛑 HideNitroUpsells by [tom](https://github.com/tom22k) 113 | 114 | Hide (or limit, where hiding isn't possible) annoying Nitro upsells. 115 | 116 | ```css 117 | @import url("https://raw.githubusercontent.com/tom22k/discord-css/main/Themes/HideNitroUpsellV2.css"); 118 | 119 | :root { 120 | /* do you want to see your quests/billing/nitro settings? */ 121 | /* yes, I want to see it -> --billing: block !important; */ 122 | /* no, hide it -> --billing: none; */ 123 | --billing: none; 124 | /* do you want to see server boosting/server shop upsell? */ 125 | /* yes, I want to see it -> --boosting: block !important; */ 126 | /* no, hide it -> --boosting: none; */ 127 | --boosting: none; 128 | } 129 | ``` 130 | 131 | ![Adblock](assets/adblock.png) 132 | 133 | ### 💡 Connection Glow on Hover by [Vortex-Chaos](https://github.com/Vortex-Chaos) 134 | 135 | Make the connection buttons glow when hovering in Discord profiles. 136 | 137 | ```css 138 | @import url("https://raw.githubusercontent.com/Vortex-Chaos/Discord-Connections-Glow/main/Code.css"); 139 | ``` 140 | 141 | ![Connection Glow](/assets/glowConnections.png) 142 | 143 | ### 🎵 Better Spotify Player by [Panniku](https://github.com/Panniku) 144 | 145 | Make the Spotify player look like it's from Samsung OneUI. 146 | 147 | ```css 148 | @import url("https://raw.githubusercontent.com/Panniku/vc-snippets/main/BetterSpotifyPlayer.css"); 149 | ``` 150 | 151 | ![Spotify Player](/assets/spotplayer.png) 152 | ![Spotify Player Hovered](/assets/spotplayerHovered.png) 153 | 154 | ### 🖼️ Acrylic Pop-outs by [Skyli](https://github.com/s-k-y-l-i) 155 | 156 | Give pop-outs such as user profiles a background blur effect. 157 | 158 | ```css 159 | @import url("https://aushevahmad.github.io/awesome-css/modules/acrylicpopup.css"); 160 | ``` 161 | 162 | ![Acrylic Pop-outs](/assets/acrylicPopouts.png) 163 | 164 | ### 🔲 Alt Text Improvements by [Saltssaumure](https://github.com/Saltssaumure) 165 | 166 | Display a 'show alt` button for any image that has alt text. 167 | 168 | ```css 169 | @import url("https://minidiscordthemes.github.io/Snippets/AltTextImprovements/main.css"); 170 | ``` 171 | 172 | ![AltTextImprovements](assets/alttext.png) 173 | 174 | ### 🔎 QuickSwitch V2 by [Dablulite](https://github.com/dablulite) 175 | 176 | A redesign to Discord's quickswitcher, making it look more like spotlight and similar search bars. 177 | 178 | ![QuickSwitch](/assets/quicksearch.png) 179 | 180 | ```css 181 | @import url("https://dablulite.github.io/css-snippets/QuickSwitchV2/import.css"); 182 | ``` 183 | 184 | ### 💠 Account Details Grid by [Dablulite](https://github.com/dablulite) 185 | 186 | A refresh to the now archived "account details columns" snippet. 187 | 188 | ```css 189 | @import url("https://dablulite.github.io/css-snippets/AccountDetailsGrid/import.css"); 190 | ``` 191 | 192 | ![Accountgrid](assets/accountgrid.png) 193 | 194 | ### 💬 Tabs V2 Home Icon by [Dablulite](https://github.com/dablulite) 195 | 196 | Replace the Discord Home icon with a modern Chats icon. 197 | 198 | ```css 199 | @import url("https://dablulite.github.io/css-snippets/TabsV2HomeIcon/import.css"); 200 | ``` 201 | 202 | ![Tabsv2icon](assets/tabsv2icon.png) 203 | 204 | ### 🎨 Hotfix for the Nitro Themes by [Dablulite](https://github.com/dablulite) 205 | 206 | Hotfix that styles the previously unstyled areas when using Nitro Themes. 207 | 208 | ```css 209 | @import url("https://dablulite.github.io/css-snippets/NitroThemesFix/import.css"); 210 | ``` 211 | 212 | ![ThemeHotfix](assets/themehotfix.png) 213 | 214 | ### 📖 Forum Improvements by [Saltssaumure](https://github.com/Saltssaumure) 215 | 216 | Provides a series of fixes and QoL features to bring forums closer to full-assed. 217 | 218 | ```css 219 | @import url("https://minidiscordthemes.github.io/Snippets/ForumImprovements/main.css"); 220 | ``` 221 | 222 | ![ForumImprovements](assets/forum.png) 223 | 224 | ### ⚙️ Settings icons by [mwittrien](https://github.com/mwittrien) 225 | 226 | Adds icons to settings. 227 | 228 | ```css 229 | @import url("https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/SettingsIcons.css"); 230 | ``` 231 | 232 | ### 🧵 Hidden Threads by [LuLu](https://lusaffi.carrd.co/) 233 | 234 | Make Threads hidden by default and slide down on hover. 235 | 236 | ```css 237 | @import url("https://aushevahmad.github.io/awesome-css/modules/hiddenthreads.css"); 238 | ``` 239 | 240 | ![HiddenThreads](assets/threads.gif) 241 | 242 | ### 🤖 Compress bot messages by [Andrew6rant](https://github.com/Andrew6rant/) 243 | 244 | Compress Github's bot messages. 245 | 246 | ```css 247 | @import url("https://aushevahmad.github.io/awesome-css/modules/compressbotmsgs.css"); 248 | ``` 249 | 250 | ![BotMessages](assets/botmsgs.png) 251 | 252 | ## Installing Modules 253 | 254 | To install these modules: 255 | 256 | 1. Open the CSS file for your modded Discord client. 257 | 258 | > [!TIP] 259 | > We recommend using [Vencord](https://vencord.dev) however you can also use [BetterDiscord](https://betterdiscord.app) 260 | 261 | - **Vencord:** In the Vencord settings tab, ensure *Enable Custom CSS* is turned on, then select 'Open QuickCSS File'. 262 | 263 | - **BetterDiscord:** Open the CustomCSS tab in settings. 264 | 265 | 2. Paste the CSS modules you want into the CSS file. 266 | 267 | > [!IMPORTANT] 268 | > Make sure to put all `@import` URL links **ON TOP** of the CSS configuration. 269 | 270 | 3. That's it! If you experience issues, try reloading your client. 271 | 272 | If you prefer not to receive updates, see [Customizing Modules](#customizing-modules). 273 | 274 | ![Vencord Settings](assets/settings.png) 275 | 276 | ![QuickCSS](assets/quickcss.png) 277 | 278 | ## Customizing Modules 279 | 280 | If you would like to to customize your modules: 281 | 282 | 1. Open the link found in the module's `@import` URL. 283 | 284 | 2. Copy all of the CSS and paste it into your custom CSS file. 285 | 286 | 3. You can now customize any of the module's contents. 287 | 288 | > [!WARNING] 289 | > Doing this means the modules will not receive updates from this repository. 290 | 291 | ## Issues / Ideas 292 | 293 | If you encounter any issues or have ideas for improvement, please report them in GitHub's Issues tab. 294 | 295 | ## Credits 296 | 297 | This project is maintained by [Ahmad](https://github.com/AushevAhmad), [FormalSnake](https://github.com/formalsnake), [geb](https://github.com/underscoregeb), and [Kami](https://github.com/senpaihunters). 298 | 299 | ## Third-party Devs 300 | 301 | Special thanks to the following third-party developers for their contributions: 302 | 303 | - [Vortex-Chaos](https://github.com/Vortex-Chaos) 304 | - [Panniku](https://github.com/Panniku) 305 | - [Skyli](https://github.com/s-k-y-l-i) 306 | - [Saltssaumure](https://github.com/Saltssaumure) 307 | - [Dablulite](https://github.com/dablulite) 308 | - [mwittrien](https://github.com/mwittrien) 309 | - [LuLu](https://lusaffi.carrd.co/) 310 | - [Andrew6rant](https://github.com/Andrew6rant/) --------------------------------------------------------------------------------