first
#π¨-theme-development
grand surge
gritty badger
h
safe python
REAL
slim pond
thank you overlords
cedar stag
hi
gritty badger
safe python
can someone test my code
* {
display: none;
}
:3
edgy sentinel
https://caniuse.com/css-nesting
you can on vesktop
megu can u move this channel below #π§©-plugin-development
kthxbai
safe python
https://media.discordapp.net/stickers/869925263952187423.png?size=160&name=Nope
you will
gritty badger
megu can u move this channel below <#1032770730703716362>
yes
edgy sentinel
thank u
slim pond
https://github.com/DaBluLite/DiscordColorways I need some colors for a shiggy colorway
cedar stag
yo how do I change the reply color in the css editor? Like what in :root does that? Also how do I change the color of the message box and notifications?
This is what I have rn:
/* IMPORT CSS */
@import url(https://clearvision.github.io/ClearVision-v6/main.css);
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@800&family=Work+Sans:wght@300&display=swap');
/* SETTINGS */
:root {
/* GENERAL */
--background-overlay: linear-gradient(to bottom, rgb(0, 0, 0), rgba(107, 26, 139, 0.6)), url("https://i.imgur.com/qJ7oMPD.jpeg");
--background-position: center center;
--background-size: cover;
--background-contrast: 120%;
--background-saturation: 120%;
--background-blur: 5px;
/* THEME COLORS */
--main-color: #ff00bf6e;
--hover-color: #ff00f2;
--url-color: #ff00f2d0;
/* FOREGROUND TRANSPARENCY */
--foreground-opacity: 0.9;
/* CHANNEL COLORS */
--channel-color: rgba(255, 255, 255, 0.555);
--muted-color: rgba(116, 116, 116, 0.5);
--reply-color: #ff00f2;
/* MODAL BACKDROP */
--backdrop-overlay: rgba(0, 0, 0, 0.8);
/* USER POPOUT BACKGROUND */
--user-popout-blur: calc(var(--background-blur) + 3px);
/* USER MODAL BACKGROUND */
--user-modal-blur: calc(var(--background-blur) + 3px);
/* Font */
font-family: 'Work Sans', sans-serif;
}
Actual Question ^^^^
How do I get the font to work and how do I change the default popout background (like when you click on an image and stuff)
safe python
Trying to reorder the channels? Make side to enable Show All Channels!!!!!
βΌοΈ βΌοΈ βΌοΈ
safe python
yo how do I change the reply color in the css editor? Like what in `:root` does ...
change font-family to --font-primary
cedar stag
change `font-family` to `--font-primary`
π
cedar stag
and wdym by reply color
the background highlight
cedar stag
change `font-family` to `--font-primary`
some of it works but it does not work for messages
safe python
some of it works but it does not work for messages
try --main-font then
safe python
yo how do I change the reply color in the css editor? Like what in `:root` does ...
it's --background-mentioned
cedar stag
it's `--background-mentioned`
k
safe python
it's `--background-mentioned`
note that the value you put in also should be transparent
cedar stag
it's `--background-mentioned`
hmm not really working
safe python
hmm not really working
wdym
cedar stag
I have --background-mentioned: rgba(189, 4, 206, 0.562); in :root but it's still broken
safe python
i love css
add !important between the rgba() and semicolon
why do themes have priority over quickcss
digital pier
There's some PR for that
safe python
There's some PR for that
cedar stag
add `!important` between the `rgba()` and semicolon
--background-mentioned: !important rgba(189, 4, 206, 0.562); Like that? (It's still not working π’)
safe python
`--background-mentioned: !important rgba(189, 4, 206, 0.562);` Like that? (It's ...
between the
rgba()and the semicolon
cedar stag
--background-mentioned: rgba(189, 4, 206, 0.562) !important; lol still doesn't work
cedar stag
also how do I keep my background from repeating at the bottom so it's centered properly. I know in normal css it's easy but it's not working
This is what I have @safe python
/* GENERAL */
--background-overlay: linear-gradient(to bottom, rgb(0, 0, 0), rgba(107, 26, 139, 0.6)), url("https://i.imgur.com/qJ7oMPD.jpeg");
--background-position: center center;
--background-size: snap;
--background-contrast: 120%;
--background-saturation: 120%;
--background-blur: 5px;
toxic yew
lmao they hardcode it
cedar stag
if I turn off or on clear vision it works for like 5 frames and then goes back
cedar stag
if I turn off or on clear vision it works for like 5 frames and then goes back
test reply
edgy sentinel
this channel was long overdue idk why i didnt make it earlier
mortal mantle
Wtf new channel
safe python
lmao they hardcode it
horror
vast delta
also how do I keep my background from repeating at the bottom so it's centered p...
"How do I keep my background from repeating" try background-repeat: no-repeat
mortal mantle
just do background: url() center/cover no-repeat;
half crystal
oh yay now i dont have to use the betterdiscord server for css help
little agate
whar
balmy torrent
@nilmod {
/* There is no id field. The filename defines the id of the mod. */
name: "NilExample";
description: "An example mod for NilLoader.";
authors: "unascribed";
version: "${version}";
}
entrypoints {
/* premain is the only entrypoint defined by NilLoader itself. */
premain: "com.example.nilexample.NilExamplePremain";
}
forgot to download CSS for minecraft im gonna get purple textures π
hot cedar
Im happy about this channel made, i was really stuck at css about highlighting mentions.
Anyone using materialdiscord theme?
I'm trying to add mentioned background color but when messages all in together this happens. (No problem at single message or quoting messages though 
)
I'm adding this because on this lovely minimalistic theme i cant see who mentioned me from full of walltext discord chat channels, so i scroll fast until i see highlight 
Previously i made highlighting unread channels and I made it work 
, can share if anyone using same theme
glad urchin
6800 lines 
hot cedar
I kno right, painful to search something 
glad urchin
are all 6.8k lines one single theme
or seperate snippets
hot cedar
I mean... the theme css is
https://capnkitten.github.io/BetterDiscord/Themes/Material-Discord/css/source.css
glad urchin
if its seperate i reccommend making a repo to store them in a single file
then using @import url(); to import the raw css file
hot cedar
Oh i copied the theme on to quickcss
to make editing realtime
After i done i was thinking to do what you suggest later 
mortal mantle
are you using some sort of chat bubbles
hot cedar
are you using some sort of chat bubbles
No, only using material discord theme and some kind of plugins not related to theme
hot cedar
Yup, can you quote this message?
mortal mantle
quote?
hot cedar
Reply i mean, like you did
mortal mantle
Yup, can you quote this message?
okay then
hot cedar
If its work on reply message mentions
oh yes
it works on single message
The main problem when someone mention by @hot cedar and in same message bubble it gets messier
@hot cedar
like that
mortal mantle
try pinging me multiple times in a message
hot cedar
mortal mantle
that has something to do with Material Discord itself
hot cedar
yeah.. when messages all in together its connected to keep minimal textwalls
mortal mantle
thats too advanced for me
hot cedar
No problem altought, i'd like to do some brainstorming and find a way to make it work
(Thats how combined messages bubbles are)
hot cedar
yeah on my side they are displayed separately
Could you post that message bubble theme?(if not private) maybe i could make it seperate when someone mentions on same message content top on top
mortal mantle
mortal mantle
finally a good channel
edgy sentinel
css development
whats wrong=
midnight stone
idk this name feels weird
alpine cove
css-programming
mortal mantle
custom-css like the BD server
digital pier
Did you put it at the top of your quick CSS
digital pier
Weird
tidal pollen
it works if i put it in here
mortal mantle
Why is the first line empty
digital pier
Imagine that's the problem
tidal pollen
Why is the first line empty
was moving things around
it actually doesnt seem to apply any CSS
mortal mantle
digital pier
Check if you have it enabled lol
mortal mantle
digital pier
cedar cairn
true mica
flat shuttle
mortal mantle
Double skull skeleton
tidal pollen
or wait
hold on
it does
triple skull
im sorry for my severe brain damage guys
π
true mica
mortal mantle
digital pier
edgy sentinel
π
grand surge
π
rugged echo
rugged echo
probably a stupid question, but I was wondering if it was possible to remove this thing, I am trying to remove that and center the profile picture, but I think it may not be possible
flat shuttle
probably a stupid question, but I was wondering if it was possible to remove thi...
[class*=bannerSVGWrapper-] > mask {
display: none;
}
I though I had to like mess with the banner, thanks
rugged echo
looks amazing, I just need to move badges and other stuff lol
true bloom
Can someone help me improve on my OCD?
Trash code below
/* Popout Fix */
.popout-15UxD6 {width:147.49% !important;}
Images on what it does
true bloom
https://tenor.com/view/blinking-eyes-white-guy-blinking-meme-what-huh-gif-263343...
HEY, it fixes it on every even zoom level okay
I tried rem and it was like 59.08 or something
true mica
wait why u even doing this 
edgy jungle
rose geode
CSS
mortal mantle
scss soon
glad urchin
geniunely annoying at sometimes
or im bad at css
true mica
most
mortal mantle
π
safe python
good enoughβ’οΈ
slim pond
Can someone help me improve on my OCD?
Trash code below
```CSS
/* Popout Fix */...
this makes me want to scream some really bad things
ky-
this made me feel extreme rage, sadness and pain at the same time
slim pond
well ... most of them
me when transition on my themes
mortal mantle
~~*ky-*~~
dont need to censor it, just say it
me when Mutual groups are not translated
slim pond
no, I shall not tell people to unalive themselves just because of css
mortal mantle
yes you shall :3
glad urchin
do you know how to make the serverlist be aligned at the bottom without breaking alignment
i tried changing the horizontalserverlist css (originally alignn top) to align bottom
but it goes below, and adding margin/padding makes resizing look weird
also, how to remove this tooltip
mortal mantle
[class*=layer-][class*=disabledPointerEvents-]>[class*=tooltip-] {
display: none;
}
little agate
awesome
glad urchin
almost got the DisplayServersAsChannels plugin to work within css
dont know how to fix this mess
the full raw broken horror css
/* .scroller-3X7KbA {
/* width: 100px; */
/* margin-right: 100px; */
/* margin-right: 1px; */
/* } */
/* .scroller-3X7KbA > div > div > div > div > svg,
.scroller-3X7KbA > div > div > div > div > div > svg,
.scroller-3X7KbA > div > div > div > div */
/* { */
/* background-color: red; */
/* width: 10px;
height: 10px; */
/* height: 24px;
width: 24px;
} */
/* this works */
.link-1_kTxV::after{
content: 'test: ' attr(aria-label) 'd';
}
/* !!! padding */
.base-2jDfDU {
/* padding-left: 148px; */
}
.guilds-2JjMmN {
/* background-color: red; */
width: 240px;
}
.guilds-2JjMmN > ul > div > div::after{
/* content:"fun"; */
background-color: black;
}
.listItem-3SmSlK {
display: flex;
width: 100%;
background-color: gray;
}
.listItem-3SmSlK > div
{
/* display: inline; */
position: relative;
padding-right: 168px;
/* content: attr(aria-label); */
/* content: ''; */
}
.listItem-3SmSlK > div > div[class*="blobContainer-"]::after {
content:attr(data-dnd-name);
padding-top: 100px;
color:white;
padding-left: 100px;
}
.listItem-3SmSlK > div[class*="wrapper-3XVBev"] {
/* content:attr(data-dnd-name);
padding-top: 100px;
color:white;
padding-left: 100px; */
/* background-color: red; */
margin-left: -100px;
}
wrong server in image but oh well
mortal mantle
horror
glad urchin
mortal mantle
Sanest BD themeing experience
For align messages sent by yourself to the right Iike an actual Messaging app
mortal mantle
was that snippet meant to bruteforce
slim pond
was that snippet meant to bruteforce
no idea
all I know is that they should have vscode deleted by the police
and their pc wiped
they are dangerous
mortal mantle
as long as it works, it works
slim pond
*as long as it works, it works*
no
I do not take "barely works, needs steroids to work" as working
slim pond
What I do take as working is not half baked, fully implemented, not buggy
mortal mantle
and thats why I ditched the idea of Whatsapp like chat bubbles
teal cave
YIPPEEEE
tidal pollen
the pr is not merged
sorry for bothering you about it >_>
edgy sentinel
I'll try to get it merged soonish I've been slacking too much
tidal pollen
i might increase my donor amount i feel bad for always bothering ven π
glad urchin
is there a way to know the current selected server (unlike "selected" selector for channels)
oh
im trying to shrink the server icon size
unfortunately to shrink the pill size you have to use !important
radiant spruce
hey guys im new to ventoy, i tried importing a transparent theme i had for better discord. It isn't transparent, is there like a transparency toggle somewhere like there is i better disc
safe python
hey guys im new to ventoy, i tried importing a transparent theme i had for bette...
ctrl+shift+i -> console tab
Vencord.Settings.transparentUNSAFE_USE_AT_OWN_RISK = true
thank you it worked
slim pond
https://github.com/Vendicated/Vencord/pull/635
megu ftw
slim pond
kindly die
mortal mantle
edgy sentinel
what does this do π
mortal mantle
.tabBarContainer-sCZC4w {
margin: 20px 0 0;
}
.tabBar-2hXqzU {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
row-gap: 0.5em;
column-gap: 0.5em;
margin-bottom: 1em;
}
.top-Ktfr_T .item-2GWPIy {
border: none;
background: red;
border-radius: 1em;
padding: 0.125em 5em;
font-weight: 600;
text-align: center;
}
@vast delta now instead of the grid theres this flex
mortal mantle
just remove the variables and replace with fixed value
vast delta
yeah but whats your value for the variables aoi
mortal mantle
I use the default --background-modifier-accent and the --modular-border-radius
but yeah i replaced em with fixed values in the code for u
slim pond
what does this do π
let's not ask unnessecary questions that will only harm you more
brittle juniper
hii
brittle juniper
<@518795791318384647> little peek of what im wasting my time on haha
inase
mortal mantle
<@518795791318384647> little peek of what im wasting my time on haha
That looks unholy
vast delta
basically everything is from aoi but im gonna make the page selector a box like the info with the username
itll probably look shit but shhhh
brittle juniper
ive stopped using css im using couve π€
mortal mantle
but that's css
vast delta
use assembly, best language for beginners
mortal mantle
π
brittle juniper
but that's css
shh
mortal mantle
okay okay .... π₯Ή
vast delta
thats better already lol
mortal mantle
fix padding
true mica
looks cursed
mortal mantle
I don't see any
vast delta
looks cursed
this is the development channel, im not supposed to send working things :3
glad urchin
must be the divider between the options and user
vast delta
its so weird
everything is so annoying
i change the width by 20px the object changes by13.3333 or something
or i set width to be 200px and its 231.452
WHY
mortal mantle
padding: 0.125em 0;
width: 31%;
if i say width 20, BE 20!
mortal mantle
removing left-right padding was a good decision after all
vast delta
i removed it as well
vast delta
Mutual Groups not being translated is great
mortal mantle
vast delta
you could actually change that in css couldnt you?
vast delta
looks better imo
vast delta
well together with the other german words
its like a black sheep in a group of white ones
mortal mantle
it looks funni
vast delta
interesting point
vast delta
after all this time
i think this is alright
i made the name box thingy smaller because it kinda had too much space imo
vast delta
yours looks great too though, i think i had that as well at some point, i really tried basically everything to find something i like
cedar stag
what element is the sidebar?
mortal mantle
use inspect element yourself to see
cedar stag
.scroller-1ox3I2 thin-RnSY0a scrollerBase-1Pkza4 fade-27X6bG customTheme-3QAYZq doesn't work if I do
.scroller-1ox3I2 thin-RnSY0a scrollerBase-1Pkza4 fade-27X6bG customTheme-3QAYZq {
background-color: black;
background: black;
}
hmm
toxic yew
dot instead of space
mortal mantle
.container-1NXEtd
cedar stag
dot instead of space
ah, so it's .scroller-1ox3I2.thin-RnSY0a.scrollerBase-1Pkza4.fade-27X6bG.customTheme-3QAYZq
that works thanks
mortal mantle
the container is the outermost element
grand surge
why are the class names mangled
safe python
why are the class names mangled
because discord uses css modules
"mangled" css allows discord to use the same class name for different components as the compiler(or someone in the build process idk) separates them
sharp shell
hey guys what is your favorite css selector
safe python
*
safe python
[class*="m"][class*="e"][class*="s"][class*="s"][class*="a"][class*="g"][class*="e"]
edgy sentinel
totally does not slow things down
shouldn't much
mortal mantle
but when you have like 500 of them
settings used to launch at 10 fps with those attribute selectors on
cedar stag
How do I make selected channels and stuff like a certain color
.blah:magic{
//TODO: Make a cake
}
.containerDefault-YUSmu3.selected-2TbFuo .link-1_kTxV, .wrapper-NhbLHG.modeSelected-3DmyhH .link-1_kTxV, .wrapper-NhbLHG.modeConnected-NrO4cP .link-1_kTxV, .selected-1-Z6gm .layout-1qmrhw {
background: var(--background-modifier-selected)
}
:has(.content-1Tgc42:hover) .wrapper-NhbLHG.modeConnected-NrO4cP .link-1_kTxV {
background: transparent !important
}
Guys try my new theme!/!/1/1/1?!?1/!?!//1/1
body{--epic-bg:true;}body{--load:fast;}*.my-class {clip-path: circle(0);}
attribute selectors have nightmare time complexity, pls do not your entire theme with them 
cedar stag
How do I make selected channels and stuff like a certain color
```css
.blah:mag...
Anyone?
cedar stag
hovered or the channel you're currently in?
the one I am currently in
glossy aurora
yeah so basically the channel has a class that starts with the word selected
cedar stag
.modeSelected-3DmyhH?
glossy aurora
right now it's selected-2TbFuo
but i would recommend not hardcoding the last bits into your css as they can change over time
cedar stag
wdym?
vestal field
but i would recommend not hardcoding the last bits into your css as they can cha...
yeah but attribute selectors are slow af so
its fine for a single thing
glossy aurora
yeah i guess
teal cave
I can see how attr selectors would be preferable for #π¨-css-snippets stuff, since it's short and probably not going to go back to perform maintenance on anything in there
But whole themes, normal selectors all the way
true mica
for whole themes id recommend not using them tbh. thereβs AT LEAST 50 different classes throughout the app called container-XXXβ¦ and i bet you dont want to edit them all
mortal mantle
I can see how attr selectors would be preferable for <#1028106818368589824> stuf...
The case is the opposite for me, because many of my snippets are essentially just part of a bigger theme, so having normal classes synchronized on both files makes it easier to manage things
I was convinced in the past into using all attr selectors, until they grew out of hand, and certain elements required the entire tree to reach
mortal mantle
username visibility improvement ig
true mica
contrast 101
true mica
no point
vast delta
aoi how are you permanently on css
alpine cove
css is so bad
vast delta
you can do hsl stuff i guess, i cant get behind it but ive seen it a lot
mortal mantle
aoi how are you permanently on css
?????
sharp shell
css is so bad
nop
slim pond
css is so bad
oh boy
mortal mantle
Rini told the truth tho :<
slim pond
also no screenshot perms?
mortal mantle
whar
slim pond
no image perms here
safe python
Image perms have been removed from whitenames
mortal mantle
I can hear that
Which sucks in these situations because css-dev without images is horror
slim pond
slim pond
at least I can send sharex links
mortal mantle
hates college
little agate
at least I can send sharex links
some
slim pond
hates college
will be relevant in a year
mortal mantle
(get dablu the cute role so he can send things)
slim pond
noice
mortal mantle
but you have a full time job lol
slim pond
It's <:fear:1126220232176975942>
you don't want to see the situation in greece
slim pond
our education system is self destructing
mortal mantle
as with anywhere else
everytime the curriculum updates strain is put on both teachers and students
slim pond
here they just want to remove free education altogether
mortal mantle
I got to uni during a wrong period of time, our uni got hacked last year
slim pond
and make all public unis private
mortal mantle
And still can't fully recover until this day
mortal mantle
Make Spotify track title loop around
slim pond
a marquee?
mortal mantle
Yeah that
slim pond
Make Spotify track title loop around
plugin or status?
mortal mantle
the track title in the Spotify controls plugin
mortal mantle
slim pond
slow it downnn
mortal mantle
nu :3
slim pond
vee gimme cute role
Trade offer:
I receive:
cute role
You receive:
quality CSS snippets
mortal mantle
ping him
slim pond
nah
mortal mantle
you will ping vee or i will
knotty minnow
gimme
mortal mantle
#vc-spotify-titles {
margin: 0 0.5em;
}
#vc-spotify-song-title {
font-weight: 1000;
display: flex;
justify-content: flex-start;
overflow: hidden;
white-space: nowrap;
padding: 0 100%;
animation: move-rtl 10s linear infinite;
}
@keyframes move-rtl {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
this for the marquee title
knotty minnow
thanks 
slim pond
you will ping vee or i will
he has better things to do than hear me cry for a goddamn role like a five year old
I can just post my snippets here
@import url(//dablulite.github.io/css-snippets/UserReimagined/import.css);
robust totem
π
mortal mantle
@slim pond sorry for ping but now you hopefully can send images as normal, ven gave you a role
slim pond
eyyy
slim pond
ye
edgy sentinel
slim pond
#π¨-css-snippets message my comeback
glad urchin
understandable
vast delta
can i select an object based on the white text in it, for example the Role in this one?
flat shuttle
can i select an object based on the white text in it, for example the Role in th...
not with css
vast delta
ughhhhhhhhhh
simple kiln
can i select an object based on the white text in it, for example the Role in th...
just do, div[class^="section-"] > h2[data-text-variant="eyebrow"]
vast delta
yeah but i'd like to remove the "No roles" text but not the "Roles" text when someone has roles and i guess that isn't possible unless something else distinctive changes
toxic yew
yeah but i'd like to remove the "No roles" text but not the "Roles" text when so...
.section-28YDOf:has([aria-label="No roles"]) .title-3CjiSS
maybe dont even need .title-
simple kiln
ahh yes,. you can do that with :has if there's an something that only exist on the selector that you want to..
vast delta
.section-28YDOf:has([aria-label="No roles"]) .title-3CjiSS
doesnt work :(
wait it does
just had to capilize Roles
thank you!
toxic yew
oh lol
glad urchin
is it possible to make servers look like channel bars
im using ::after , though i dont know how to align the text
glad urchin
mortal mantle
.section-28YDOf:has([aria-label="No roles"]) .title-3CjiSS
not language dependent:
.section-28YDOf:nth-child(4):not(:has(.roleCircle-3TFUOr)) {
display: none;
}
hmm that doesnt work very properly
it works in servers but breaks in DM
body:not(:has(.searchBar-3TnChZ)) .section-28YDOf:nth-child(4):not(:has(.roleCircle-3TFUOr)) {
display: none;
}
this seems to solve the issue
mortal mantle
I like this
vast delta
@true mica this is a cease and desist letter, you should change the name of your snippet IMMEDIATELY or i will sue, shiggycord is MY IP and you are NOT allowed to use it https://github.com/xdCoolesding/shiggycord/blob/main/shiggycord.css
vast delta
can i submit this is a css snippet though?
vast delta
its not really a snippet, and i cant send the full .css file because its toooo long
true mica
can i submit this is a css snippet though?
not themes
vast delta
ah okay
errant cipher
back when i used betterdiscord and used the spotify plugin, i'd click the spotify album cover and then hide it with some css so i could see more, never really cared about seeing the cover anyway lol
mortal mantle
wheat escarp
<:husk:1026532993923293184>
how is it so badly messed up ππ
grand surge
* {
all: unset;
}
i made best css
vestal field
.markup-eYLPri code,
.messageAttachment-CZp8Iv {
resize: both;
}
resizable images and codeblocks
(you can do this)
mortal mantle
Will the status marquee
slim pond
ellipsis overflow, I think
simple kiln
instead of :hover use :focus-within
ooh,. nvm
looks like there's no div that can be use to click, so that the :focus-within will work on ur css
grand surge
Anyone can fix it with css?
balmy torrent
nc
grand surge
Anyone can fix it with css?
Also this
true mica
discord on mobile web is unsupported by discord itself
just gid gud buddy
use a god damn pc
rugged echo
or use vendetta
true mica
rugged echo
looks too wide
slim pond
that's just spotify
not spotify
the user area, for the mobile vencord app
I'm working on a UI overhaul snippet
mortal mantle
I don't like those pill options though .....
mortal mantle
I'd rather they blended seamlessly into the user panel
slim pond
so, transparent?
slim pond
I'd rather they blended seamlessly into the user panel
other than that tho, any opinions on the animation?
mortal mantle
The popup menu towards the end of the gif
mortal mantle
I figure that's probably a bug or something
slim pond
The popup menu towards the end of the gif
buggy recorder
mortal mantle
Wait is that supposed to be for mobile?
slim pond
Wait is that supposed to be for mobile?
yep
half crystal
how to make this color of the scrollbars different?
slim pond
--scrollbar-auto-thumb this is the color variable
replace "auto" with "thin" for the thin scrollbars
half crystal
sorry but i meant this one :/
slim pond
replace the word thumb with track
half crystal
thanks
rugged echo
idk what to call this but basically adds spacing and rounded corners
the user panel looks nice like that, but I don't think this is a channel to send snippets, like I guess its about css but idk
vestal field
i dont have snippet perms :(
little agate
L
edgy sentinel
i dont have snippet perms :(
Post ur snippet here
vestal field
Post ur snippet here
thats what i did
edgy sentinel
where
ah
you should try to avoid using aria labels if possible
they are localised meaning your snippet only works if discord is English
gave u the role tho
vestal field
they are localised meaning your snippet only works if discord is English
the buttons dont have unique classes so the aria label is the only way to identify them
but i will keep that in mind in the future
and thanks for the role
slim pond
devout umbra
atrocious
slim pond
that's the goal
slim pond
.listItem-3SmSlK {
width: 48px;
margin-bottom: 0;
}
.listItem-3SmSlK:has(.guildSeparator-a4uisj) {
display: none;
}
.wrapper-38slSD,
.wrapper-38slSD > ul {
height: fit-content !important;
width: fit-content !important;
}
.expandedFolderBackground-1kSAf6 {
display: none;
}
.wrapperSimple-2SFl9K,
.ColorwaySelectorBtn,
.folderIconWrapper-1oRIZr {
border-radius: 0 !important;
}
.svg-2ifYOU foreignObject {
mask: none !important;
}
.listItem-3SmSlK:has(.guildSeparator-a4uisj) + div:not([class])[aria-label],
.tutorialContainer-1pL9QS {
width: fit-content !important;
}
.guilds-2JjMmN {
width: 48px;
}
kekcord
mortal mantle
I wonder what else I should add to my layout
or start fixing all the bugs
There's one really annoying bug that I have seen and people have reported
it's that whenever I click on a channel, I get sent back like 100 messages and I have to scroll down to present almost every single time
It's caused by CSS, but I'm struggling to find out exactly what caused the issue
slim pond
what the hell am I making?
slim pond
I made it worse
mortal mantle
wait is there a way to clamp the profile at the member since
and everything underneath has to be scrolled down to
slim pond
slim pond
wait is there a way to clamp the profile at the member since
hmm?
what part of the profile?
you can also always just set the overflow to visible
and the height to fit the content
mortal mantle
say i want to stop the profile at exactly here
while also accounting for people's statuses
vast delta
say i want to stop the profile at exactly here
hide everything below that :P
mortal mantle
vast delta
and everything underneath has to be scrolled down to
so you wanna always show everything above it?
mortal mantle
yeah kind of
vast delta
lemme see
slim pond
shiggy
mortal mantle
vast delta
xd
mortal mantle
little agate
mines the best fr
mortal mantle
no usrbg
slim pond
mortal mantle
sadge
mortal mantle
it's that whenever I click on a channel, I get sent back like 100 messages and I...
holy sh i found the problem
nvm it came back
vast delta
dont hide one of the divider thingies, i forgot which one
just remove all the things that do display:none on dividers and try out which one it is
vast delta
the issue is that when you go on a channel with new messages the new message thing is gone or something and for some reason discord spawns you in the middle of nowhere
its like when you put a nether portal in minecraft but the one at your home was broken so you spawn over an ocean even though you put your house at the top of a mountain surrounded by plains
vast delta
try the section divider
might also be separator
try both and then try out each one to find the specific one
vast delta
css β
mortal mantle
so if i restarted the client
vast delta
the problem still exists
it should be fixed?
mortal mantle
omg the dividers look horrible
slim pond
remove them
mortal mantle
I figured out it was caused by hiding the dividers
so I removed them for the time being
mortal mantle
the ugly lines are still there
wait am i supposed to match the suffix
i mean the random numbers behind
slim pond
yes
mortal mantle
I actually have no idea what the + does
slim pond
.divider-2dDziJ ~ .divider-2dDziJ {
display: none;
}
```try this
true mica
I actually have no idea what the + does
div class="1"
β¦
div class="2"
β¦
div.1 + div targets class 2
next element in DOM
slim pond
now it removes the first line
you want to remove them all?
slim pond
boy does this look awful
mortal mantle
i thought i removed that
true mica
boy does this look awful
either that or it targets mini profiles as well
mortal mantle
yeah but it doesnt exist anymore
slim pond
either that or it targets mini profiles as well
no
I mean the classes
these wildcard selectors could have been avoided
and they should have
true mica
improve them then
mortal mantle
i already did
slim pond
.userPopoutInner-nv9Y92:has(#account) > *:not(:has(#account)),
.userPopoutOverlayBackground-3A0Pcz:has(#account) > *:not(#account) {
display: none;
}
condensed it to smithereens
mortal mantle
.accountProfilePopoutWrapper-3GskID .section-28YDOf
{
display: none;
}
thats what I currently use
manages to hide everything (but the dividers)
slim pond
.userPopoutInner-nv9Y92:has(#account) > *:not(:has(#account)),
.userPopoutOverlayBackground-3A0Pcz:has(#account) > *:not(#account) {
display: none;
}
.userPopoutOverlayBackground-3A0Pcz:has(#account) {
margin: 10px;
}
BRUH
.userPopoutOverlayBackground-3A0Pcz:has(#account) > *:not(#account) {
display: none;
}
that simple
(jk I didn't even expect it to work this well)
glad urchin
do you know how to center the server icon and ::after content?
slim pond
huh?
glad urchin
<:husk:1026532993923293184>
asking from this
slim pond
I have no idea what dark magic you used to make this
glad urchin
wait
glad urchin
I have no idea what dark magic you used to make this
/* width: 72px; */
.guilds-2JjMmN {
}
/*
.guilds-2JjMmN > ul > div > div > div > div > div > div > svg,
.guilds-2JjMmN > ul > div > div > div > div > div > div > svg
.guilds-2JjMmN > ul > div.scroller-3X7KbA.none-1rXy4P.scrollerBase-1Pkza4 > div
{
background-color: red;
width: 24px;
height: 24px;
} */
.listItem-3SmSlK > div > div[data-dnd-name] > div,
.listItem-3SmSlK > div > div > div > svg
{
border: 2px solid blue;
width: 24px;
height: 24px;
border-radius: 0px;
}
.listItem-3SmSlK > div > span {
border-radius: 0px;
height: 24px !important;
width:7px;
top: 0px;
}
.listItem-3SmSlK > div {
/* */
/* border: 1px solid green; */
}```how do you manage to break that so badly
glad urchin
no idea
i only resized the icons then added the content text, then tried to fix the horror using padding and margin
glad urchin
wait is the text not there?
glad urchin
ah, i forgot to include the ::after content when i cut and deleted
slim pond
.listItem-3SmSlK > div > div > div > svg,
.listItem-3SmSlK div > div > .wrapper-2PSQCG {
width: 24px;
height: 24px;
border-radius: 0;
}
.svg-2ifYOU foreignObject {
mask: none !important;
}
.listItem-3SmSlK > div > div > div > svg {
border: 2px solid blue;
}
.listItem-3SmSlK > div > span {
border-radius: 0;
height: 24px !important;
width: 7px;
top: 0;
}
.listItem-3SmSlK > div > div[class*="blobContainer-"]::after {
content:attr(data-dnd-name);
padding-top: 100px;
color:white;
padding-left: 100px;
}```try adding that
mortal mantle
super ultra compact
.userPopoutOverlayBackground-3A0Pcz:has(#account) {
margin: 0;
}
.accountProfilePopoutWrapper-3GskID {
left: 0;
}
.accountProfilePopoutWrapper-3GskID>.userProfileOuterUnthemed-11rPfA .userProfileInnerThemedNonPremium-2AJg-H {
background: var(--background-primary);
width: 75%;
border-radius: 8px;
}
.userPopoutInner-nv9Y92:has(#account) > *:not(:has(#account)), .userPopoutOverlayBackground-3A0Pcz:has(#account) > *:not(#account) {
display: none
}
.userPopoutOuter-1OHwPL.userProfileOuter-2tQwNf.userProfileOuterUnthemed-11rPfA.profileColors-2AgAV4.theme-dark {
background-color: transparent;
box-shadow: none;
}
proper theme manager with theme watcher is here
glad urchin
mortal mantle
this is now comfycord
slim pond
I was looking at the css snippets channel
good golly ppl don't know how to use classes properly
wildcards in discord are fundamentally wrong for many reasons
with the first example being
how many .wrapper- classes do you think discord has? one?
edgy sentinel
wildcards in discord are fundamentally wrong for many reasons
no but okay
mortal mantle
I still confuse between whether to use them or not
edgy sentinel
its just preference and how often you want to have to update your selectors
mortal mantle
well BD theme devs surely dont use attr
slim pond
not everyone has 5 years of experience man
didn't say it was an issue of experience
mortal mantle
as a selector
edgy sentinel
there is nothing wrong with them
you're just turning "i don't like this" into "this is objectively bad"
slim pond
sometimes they dont
depends on what attribute you select
edgy sentinel
it is not
slim pond
you're just turning "i don't like this" into "this is objectively bad"
you're prob right on that
mortal mantle
the problem with attr is that I am really stupid
and often times I will write the entire path leading to it
slim pond
I just remember them having a significant performance impact
mortal mantle
making extremely long selectors
slim pond
if not extremely specific
mortal mantle
and burns your retina even more
edgy sentinel
I just remember them having a significant performance impact
they dont
or at least not noticeable
what has a much greater impact is *
slim pond
or at least not noticeable
for small snippets I guess that's true
edgy sentinel
.this .is .terrible * {
please: "dont"
}
my thought process with attr selectors is:
open devtools
hover on element
look at path
write the entire path of 15 divs to it with everything enclosed in [class*=]
watch my laptop die
slim pond
still with the theme ideology in mind
slim pond
```css
.this .is .terrible * {
please: "dont"
}
```
that is actually horrid
edgy sentinel
still with the theme ideology in mind
do you have any relevant data to prove they have a performance impact
slim pond
do you have any relevant data to prove they have a performance impact
I just know that if I were to use them in a larger scale, eg a theme, it would straight up kill discord
eg cyan, and I bring cyan as an example because of how heavy a theme it is
mortal mantle
performance impacts will show on a low-end machine
on a strong PC tho I don't think there is any difference
slim pond
tell that to cyan
slim pond
no dablu i refuse to load your theme
as you should
I shall add minimum and recommended specs to cyan's readme\
mortal mantle
i dont want it to randomly combust
edgy sentinel
"specific theme is laggy" is not relevant data
i can name numerious themes that use normal class selectors and are laggy asf.
slim pond
"specific theme is laggy" is not relevant data
true
edgy sentinel
there are too many factors
there is no reason to prefer one over the other for performance reasons
that's called premature optimisation
slim pond
i can name numerious themes that use normal class selectors and are laggy asf.
again, cyan is one of those, it can prob make your pc combust into flames
welp anyways
edgy sentinel
all vencord plugin code uses attribute selectors for robustness
slim pond
what attributes?
edgy sentinel
classname
edgy sentinel
slim pond
anything except aria-label is fine as a selector
slim pond
it's localized
mortal mantle
Just learn English
rugged echo
true, so easy
true mica
I shall add minimum and recommended specs to cyan's readme\
sorry the theme sucks you need NASAβs PC to get a 30fps Discord
rugged echo
```css
.userPopoutOverlayBackground-3A0Pcz:has(#account) > *:not(#account) {
d...
oh and this shorter than the other snippet I had, I am stealing it
mortal mantle
I realize quick css is meant for some qol or silly snippets
not an entire 10k line theme
I try my best to optimize the theme but it will still inevitably lag
slim pond
oh and this shorter than the other snippet I had, I am stealing it
sure thing
rugged echo
yeah discord slows down a bit, but idk if that changes using the themes tab
true mica
it doesnβt change anything regarding lag
slim pond
sorry the theme sucks you need NASAβs PC to get a 30fps Discord
Cyan truly sucks in terms of performance
all for the beauty
true mica
it doesnβt even look good π
slim pond
have you tried changing variables?
true mica
yes
slim pond
you change the import from import.css to import-lite.css
mortal mantle
Which in itself has been a huge improvement over my code in June
slim pond
My current quick css is like 1800 lines
7k lines when
true mica
My current quick css is like 1800 lines
the fuck
slim pond
no animations
mortal mantle
I have removed all the shadows I added back in June
safe python
no animations
you cant remove animations in css
they're done in js
mortal mantle
So closer to 2500 ish
I have not touched any animation/transition
Too much hassle
true mica
lite my ass
slim pond
why don't you try making it lite
slim pond
hmm
impossible
that basically means that you would have to strip cyan of core design elements
these 600 lines were packed with performance intensive code
mortal mantle
How did you even get to that long
slim pond
no idea
mortal mantle
Unless you have a NASA PC you won't be able to make themes
slim pond
might do a rewrite of cyan lite as a whole
well, for now my attention is on other themes
and cyan will prob get a rewrite as a whole in the next rehash
sacred anchor
Any tutorials to create a custom discord theme using css?
edgy sentinel
Any tutorials to create a custom discord theme using css?
sacred anchor
Dude. I know what css is. I just wanna know how to create a discord theme
glad urchin
just look at the css of other themes and copy
sacred anchor
Sounds easy. I will give a try.
"Good artists copy, Great artists steal" - Steve Jobs
π
sacred anchor
Thanks
vestal field
Dude. I know what css is. I just wanna know how to create a discord theme
a good starting point is to inspect element, scroll down in styles, and find discord's big list of color variables
you can copy the whole block to your theme and just start changing colors
glad urchin
i have this css thing i copied from inspector
probably the entire discord default css
sacred anchor
I see.
sacred anchor
a good starting point is to inspect element, scroll down in styles, and find dis...
But how can i apply the theme to my discord
edgy sentinel
Dude. I know what css is. I just wanna know how to create a discord theme
making a discord theme is nothing more than writing css
glad urchin
But how can i apply the theme to my discord
paste in quickcss
sacred anchor
making a discord theme is nothing more than writing css
Hmm.
mortal mantle
making a discord theme is nothing more than writing css
Actually it's scss for professionals, but you then use a tool to compile it back to css for the enduser
edgy sentinel
you just need to know how to use the inspector and that's it
exotic nexus
/* Remove stupid 'suggested' section */
li.containerDefault-3TQ5YN:has([class*="dismissWrapper-jq1mzB"]) {
display: none;
}
li.containerDefault-3TQ5YN:has([class*="dismissWrapper-jq1mzB"]) + li.containerDefault-YUSmu3.selected-2TbFuo,
li.containerDefault-3TQ5YN:has([class*="dismissWrapper-jq1mzB"]) + li.containerDefault-YUSmu3.selected-2TbFuo + div.sectionDivider-189lqb {
display: none;
}
Made this to remove the suggested channels section, only works for one channel in the section, any tips to allow it to remove multiple without hardcoding
mortal mantle
scss is much more powerful as far as I know, and Gibbu's CLI tool just enables writing themes with it a bit easier
exotic nexus
```
/* Remove stupid 'suggested' section */
li.containerDefault-3TQ5YN:has([clas...
/* Remove stupid 'suggested' section */
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB),
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb,
li.containerDefault-3TQ5YN:has(.dismissWrapper-jq1mzB) + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + li.containerDefault-YUSmu3 + div.sectionDivider-189lqb {
display: none;
}
It looks like it can only show up to 4, this is the best solution i could find
safe python
:has([class*="dismissWrapper-jq1mzB])
you could also just :has(.dismissWrapper-jq1mzB)
otherwise yeah i'd believe that's the best you can do 
exotic nexus
at least it works
fixed
actually such a good snippet, the suggested thing is so stupid
vestal field
scss is much more powerful as far as I know, and Gibbu's CLI tool just enables w...
how does the cli tool work?
mortal mantle
glad urchin
discord css
before/after (shortens popup by one pixel)
/* profile popup fix */
[id*="popout"] > div > div > div
{
width: 339px;
}
rose geode
just look at the css of other themes and copy
glad urchin
imo my css improved after looking at #π¨-css-snippets
mortal mantle
i started my theme from #π¨-css-snippets
glad urchin
what did i do on pure accident
mortal mantle
smh
glad urchin
looks clean somehow
mortal mantle
i prefer looking at my usrbg
glad urchin
/* cleaner popout (no banner) */
[id*="popout"] [class*=bannerSVGWrapper-] foreignObject{
display: none;
}
[id*="popout"] [class*=ThemedWithBanner-] > svg {
margin-top: -60px
}
[id*="popout"] [class*=ThemedWithBanner-] > [role=button]{
margin-top: -50px;
}
not what i was trying to do but iit worked
glad urchin
do i make it into
div[class*=ThemedWithBanner]
toxic yew
doesnt need > unless you really need it, try remove all > and div
glad urchin
/* cleaner popout (no banner) */
[id*="popout"] [class*=bannerSVGWrapper-] foreignObject{
display: none;
}
[id*="popout"] [class*=ThemedWithBanner-] > svg {
margin-top: -60px
}
[id*="popout"] [class*=ThemedWithBanner-] > [role=button]{
margin-top: -50px;
}
trying something using the same css
glad urchin
/* cleaner popout (no banner) */
[id*="popout"] [class*=bannerSVGWrapper-] foreignObject,
[class*=ProfileModalOuter] [class*=bannerSVGWrapper-] foreignObject,
[class*=ProfileModalOuter] > div > div > header > svg
{
display: none;
}
[id*="popout"] [class*=ThemedWithBanner-] > svg {
margin-top: -60px
}
[id*="popout"] [class*=ThemedWithBanner-] > [role=button]{
margin-top: -50px;
}
[class*=ProfileModalOuter] [class*=wrapper-3Un6-K][role=button]
{
width: 64px !important;
height: 64px !important;
margin-top: 80px !important;
margin-left: -5px;
}
[class*=ProfileModalOuter] [class*=wrapper-3Un6-K][role=button] > svg
{
width: 74px !important;
height: 74px !important;
}
[class*=ProfileModalOuter] [class*=ProfileModalOverlayBackground]{
margin-top: 30px;
}
cut down a lot
(?)
slim pond
Any tutorials to create a custom discord theme using css?
just select a theme and edit it
why did I do that
glad urchin
i fixed the horror
tho folders look wack
also trying to get the hover listener on the icon to the whole "bar"
glad urchin
it looks so much better now
full css
if someone can, please improve if possible
/* width: 72px; */
.guilds-2JjMmN {
width: 200px;
}
/*
.guilds-2JjMmN > ul > div > div > div > div > div > div > svg,
.guilds-2JjMmN > ul > div > div > div > div > div > div > svg
.guilds-2JjMmN > ul > div.scroller-3X7KbA.none-1rXy4P.scrollerBase-1Pkza4 > div
{
background-color: red;
width: 24px;
height: 24px;
} */
/* .scroller-3X7KbA {
align-items: stretch;
} */
/* .listItem-3SmSlK > div > div[data-dnd-name][class*=blobContainer-ikKyFs]{
display: flex;
margin-left: 60px;
border: 2px solid green;
height: 24px;
width: 130px;
} */
/* list item */
.listItem-3SmSlK {
/* border: 2px solid blue; */
width: 196px;
}
.listItem-3SmSlK > div > div[data-dnd-name][class*=blobContainer-ikKyFs]{
display: flex;
/* margin-left: 60px; */
/* border: 2px solid green; */
height: 32px;
width: 196px !important;
}
.listItem-3SmSlK > div > div > div > svg > foreignObject > div{
/* border: 4px solid gold; */
/* width: 68px; */
border-radius: 0px !important;
}
.listItem-3SmSlK > div > div > div > svg
{
/* display: none; */
margin-left: 10px;
width: 32px;
height: 32px;
border-radius: 0px !important;
border: 1px solid pink;
}
/* the text */
.listItem-3SmSlK > div > div[class*="blobContainer-ikKyFs"]::after{
position: relative;
content: attr(data-dnd-name);
color:white;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 6px;
width: 150px;
height: fit-content;
text-align: left;
/* border: 2px solid; */
}
.listItem-3SmSlK > div > span {
border-radius: 0px;
height: 24px !important;
width:7px;
top: 0px;
}
.listItem-3SmSlK > div {
/* */
/* border: 1px solid green; */
}
im not sure if you can cchange the :hover to affect the whole list item instead of the server icon
if not, i assume its only possible via a plugin?
glad urchin
im using the border to check which is which
slim pond
.listItem-3SmSlK > div > div > div > svg > foreignObject {
mask: none !important;
}
huh
thanks but, not what i was going for
trying to remake this as a snippet instead
also, seems like the click event is handled on that foreignobject
even using !important, you cant increase the width (?)
slim pond
mortal mantle
Magic
slim pond
it's already almost done
mortal mantle
I may or may not need that
slim pond
almost done
mortal mantle
LEW ... D
glad urchin
do you need to click on the icon or actually clicking on the bar works
slim pond
it now even has the color
edgy sentinel
```css
.listItem-3SmSlK > div > div > div > svg > foreignObject {
mask: none !...
why the div > div > div π
edgy sentinel
copy pasted selector
terrible selector
selectors like that perform terribly and are obsolete
slim pond
wasn't planning on using it
edgy sentinel
.listItem-3SmSlK foreignObject {
}
should likely do the trick, unless you need it more specific in which case you should just use a class in the tree
edgy sentinel
wasn't planning on using it
but i see a bunch of those in your snippets as well
edgy sentinel
also see
#π₯-vencord-support-π₯ message
slim pond
nolightindark is literally .theme-light and .theme-dark, and 2 of discord's selectors