├── README.md
├── assets
└── logo_law.svg
└── scripts
├── channels_categories_color.css
├── channels_categories_compact.css
├── channels_name_capitalized.css
├── colorful_role_tags.css
├── custom_background.css
├── custom_discord_font.css
├── custom_home_icon.css
├── custom_title.css
├── mini_search_bar.css
├── rounded_menu.css
└── unclamp_about_me.css
/README.md:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | Custom CSS Scripts for DISCORD
4 |
5 |
6 |
7 | 
8 |
9 | 
10 |
11 | 
12 |
13 |
14 | Top 10 Custom CSS Scripts for DISCORD (2022)
15 |
16 | ---
17 |
18 | ## Video Tutorial:
19 |
21 |
22 |
23 | ## All Scripts:
24 |
25 | - #### [🏠] **[Custom Home Icon](https://github.com/LawOff/10CustomCSS/blob/main/scripts/custom_home_icon.css "Custom Home Icon").**
26 |
27 | - #### [📟] **[Custom Text Font](https://github.com/LawOff/10CustomCSS/blob/main/scripts/custom_discord_font.css "Custom Text Font").**
28 |
29 | - #### [📚] **[Channels & Categories Color](https://github.com/LawOff/10CustomCSS/blob/main/scripts/channels_categories_color.css "Channels & Categories Color").**
30 |
31 | - #### [🔎] **[Minified Search Bar](https://github.com/LawOff/10CustomCSS/blob/main/scripts/mini_search_bar.css "Minified Search Bar").**
32 |
33 | - #### [🖼️] **[Custom Background Image](https://github.com/LawOff/10CustomCSS/blob/main/scripts/custom_background.css "Custom Background Image").**
34 |
35 | - #### [📑] **[Unclamp the About Me section](https://github.com/LawOff/10CustomCSS/blob/main/scripts/unclamp_about_me.css "Unclamp the About Me section").**
36 |
37 | - #### [🫓] **[Rounded Context Menu](https://github.com/LawOff/10CustomCSS/blob/main/scripts/rounded_menu.css "Rounded Context Menu").**
38 |
39 | - #### [:page_with_curl:] **[Compact Channels & Categories](https://github.com/LawOff/10CustomCSS/blob/main/scripts/channels_categories_compact.css "Compact Channels & Categories").**
40 |
41 | - #### [:mega:] **[Discord Custom Title](https://github.com/LawOff/10CustomCSS/blob/main/scripts/custom_title.css "Discord Custom Title").**
42 |
43 | - #### [🅰️] **[Channel Names Capitalized](https://github.com/LawOff/10CustomCSS/blob/main/scripts/channels_name_capitalized.css "Channel Names Capitalized").**
44 |
45 | - #### [🏷️] **[Colorful Role Tags](https://github.com/LawOff/10CustomCSS/blob/main/scripts/colorful_role_tags.css "Colorful Role Tags").**
46 |
47 |
48 | ## Credits:
49 |
50 | Scripts found here:
51 | [Kiyoshi-23](https://github.com/Kiyoshi-23/BD-Custom-CSS "Kiyoshi-23") -
52 | [Vendetta-Does-Stuff](https://github.com/Vendetta-Does-Stuff/Custom-BetterDiscord-CSS "Vendetta-Does-Stuff") -
53 | [LuckFire](https://github.com/Discord-Theme-Addons/snippets "Vendetta-Does-Stuff") -
54 |
55 |
56 | **10/06/2022.**
57 |
--------------------------------------------------------------------------------
/assets/logo_law.svg:
--------------------------------------------------------------------------------
1 |
2 |
10 |
--------------------------------------------------------------------------------
/scripts/channels_categories_color.css:
--------------------------------------------------------------------------------
1 | /* Channels & Categories Color: */
2 |
3 | .channelName-3KPsGw{color: #f59abb !important;}
4 | .icon-2W8DHg,.container-q97qHp,.icon-3zI3d2{color: #C62347 !important;}
5 |
6 |
7 | /* Rainbow alternative */
8 | .channelName-3KPsGw {
9 | animation: chromaYeet 5s linear infinite;
10 | }
11 | .icon-2W8DHg {
12 | animation: chromaYeet 6s linear infinite;
13 | }
14 |
15 | .container-q97qHp {
16 | animation: chromaYeet 7s linear infinite;
17 | }
18 |
19 | .icon-3zI3d2 {
20 | animation: chromaYeet 8s linear infinite;
21 | }
22 |
23 |
24 | @keyframes chromaYeet {
25 | from {
26 | color: #6666ff;
27 | }
28 |
29 | 10% {
30 | color: #0099ff;
31 | }
32 |
33 | 50% {
34 | color: #00ff00;
35 | }
36 |
37 | 75% {
38 | color: #ff3399;
39 | }
40 |
41 | 100% {
42 | color: #6666ff;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/scripts/channels_categories_compact.css:
--------------------------------------------------------------------------------
1 | /* Compact channels catégories */
2 |
3 | :root {
4 | --category-spacing: 0px;
5 | --channel-spacing: 4px;
6 | }
7 |
8 | .containerDefault-3TQ5YN, .containerDragAfter-1J_-1V, .containerDragBefore-ei4h1m, .containerUserOver-3woq86 {
9 | padding-top: var(--category-spacing);
10 | }
11 |
12 | .mainContent-20q_Hp {
13 | padding: var(--channel-spacing);
14 | }
15 |
--------------------------------------------------------------------------------
/scripts/channels_name_capitalized.css:
--------------------------------------------------------------------------------
1 | /* Channel Names Capitalized */
2 |
3 | .channelName-3KPsGw {
4 | text-transform: capitalize;
5 | }
6 |
--------------------------------------------------------------------------------
/scripts/colorful_role_tags.css:
--------------------------------------------------------------------------------
1 | /* Colorful Roles Tags */
2 |
3 | #app-mount .roleCircle-1EgnFN::after {
4 | content: "";
5 | position: absolute;
6 | height: 22px;
7 | width: 100%;
8 | left: 0px;
9 | background: inherit;
10 | opacity: 0.70;
11 | z-index: -1;
12 | border-radius:4px;
13 | }
14 |
15 | #app-mount .role-2TIOKu {
16 | position: relative;
17 | z-index: 1;
18 | background: inherit;
19 | }
20 |
--------------------------------------------------------------------------------
/scripts/custom_background.css:
--------------------------------------------------------------------------------
1 | /*Add Background image to Discord*/
2 |
3 | :root {
4 | --background-image: url('https://i.imgur.com/rn0AlMm.jpg'); /*Change the link to your custom image*/
5 | --opacity: .95;
6 | }
7 |
8 | :root {background:var(--background-image) center/cover no-repeat;opacity:var(--opacity)}
9 |
--------------------------------------------------------------------------------
/scripts/custom_discord_font.css:
--------------------------------------------------------------------------------
1 | /* --== Custom Discord Font ==-- */
2 |
3 | html, body {
4 | font-family: 'Fira Code', monospace; /* --== Use a Google Font (https://fonts.google.com/) ==-- */
5 | }
6 |
--------------------------------------------------------------------------------
/scripts/custom_home_icon.css:
--------------------------------------------------------------------------------
1 | /* Add custom home icon */
2 |
3 | .homeIcon-r0w4ny {
4 | display: none;
5 | }
6 |
7 | .tutorialContainer-1pL9QS .wrapper-3kah-n .childWrapper-1j_1ub {
8 | background-color: transparent;
9 | }
10 |
11 | .tutorialContainer-1pL9QS .wrapper-3kah-n .childWrapper-1j_1ub:before {
12 | position: absolute;
13 | content: " ";
14 | width: 45px; /* Change size if needed */
15 | height: 45px; /* Change size if needed */
16 | background-image: url('https://i.imgur.com/72ygEjp.png'); /* Replace the link, with your image link */
17 | background-size: contain;
18 | }
19 |
--------------------------------------------------------------------------------
/scripts/custom_title.css:
--------------------------------------------------------------------------------
1 | /* Add custom title! */
2 |
3 | .wordmarkWindows-2dq6rw svg {
4 | width: 0px;
5 | }
6 |
7 | .wordmarkWindows-2dq6rw::after {
8 | content: '';
9 | display: inline-block;
10 | -webkit-mask-image: url("https://raw.githubusercontent.com/LawOff/10CustomCSS/1ead8e178dd6eb1fe160d97726b0eb89bd8b1a81/assets/logo_law.svg");
11 | -webkit-mask-repeat: no-repeat;
12 | -webkit-mask-size: cover;
13 | background-color: var(--highlight);
14 | width: 240px !important;
15 | height: 14px !important;
16 | }
17 |
--------------------------------------------------------------------------------
/scripts/mini_search_bar.css:
--------------------------------------------------------------------------------
1 | /* Minified Search Bar */
2 |
3 | :root {
4 | --transitionspeed: 0.25s;
5 | }
6 |
7 | .search-2Mwzzq:not(.open-1F8u2c) .searchBar-jGtisZ {width: 27px; transition: var(--transitionspeed); background-color: transparent;}
8 | .search-2Mwzzq:not(.open-1F8u2c):hover .searchBar-jGtisZ {width: 170px; background-color: var(--background-tertiary);}
9 | .search-2Mwzzq:not(.open-1F8u2c) .iconContainer-1RqWJj {transform: scale(1.3); transition: var(--transitionspeed);}
10 | .search-2Mwzzq:not(.open-1F8u2c):hover .iconContainer-1RqWJj {transform: scale(1);}
11 | .search-2Mwzzq:not(.open-1F8u2c) .icon-18rqoe {color: var(--text-normal);}
12 | .search-2Mwzzq:not(.open-1F8u2c):hover .icon-18rqoe {color: var(--text-muted);}
13 |
--------------------------------------------------------------------------------
/scripts/rounded_menu.css:
--------------------------------------------------------------------------------
1 | /* Rounded Context Menu */
2 |
3 | .menu-1QACrS, .colorDefault-CDqZdO {
4 | border-radius: 15px;
5 | }
6 |
--------------------------------------------------------------------------------
/scripts/unclamp_about_me.css:
--------------------------------------------------------------------------------
1 | /* Unclamp the About Me section, so it's not limited to just 6 lines. (normally it cuts off at 6 and adds a ...) */
2 | .clamped-2ZePhX{
3 | -webkit-line-clamp: 190; /*Maximum amount of characters as new lines, unset just breaks links*/
4 | max-height:112px;
5 | overflow-x: hidden;
6 | overflow-y:scroll;
7 | }
8 | .clamped-2ZePhX::-webkit-scrollbar {
9 | width: 10px;
10 | height: 15px;
11 | }
12 | .clamped-2ZePhX::-webkit-scrollbar-track {
13 | border-radius: 10px; /*How round you want the scrollbar to be. 0 is square, 10px is round.*/
14 | background-color: rgb(255 255 255 / 10%); /*Edit this to what color you want the track to be.*/
15 | }
16 | .clamped-2ZePhX::-webkit-scrollbar-thumb {
17 | background: linear-gradient(45deg, #C62347, #830432); /* Edit this to whatever color/colors you'd like*/
18 | border-radius: 10px; /*How round you want the scrollbar thumb to be. 0 is square, 10px is round.*/
19 | }
20 |
--------------------------------------------------------------------------------
