#๐จ-theme-development
formal kayak
low lantern
very nice. that reminds me, i wonder how Fontworks' font would look on discord...
it's too bold... but i still like it.
formal kayak
You might like "ใฉใใฉใใใกใณใฟใธใข" if you want a unique font.
formal kayak
I believe it's likely only available on Booth.
Since many international users also use Booth for things like VRChat, I don't think international IPs are being blocked or anything like that.
low lantern
win7 enjoyer
all hail the chief!
humble jay
it's too bold... but i still like it.
wait is your status indicator the outline??
banger ngl can u send me this 
low lantern
yep!
humble jay
i only have the basic bitch dots
low lantern
should i drop it here or in DMs
humble jay
here or dms idc
i just need 
lmao
i still got it, thx
life hack
ok this a banger, gonna have to rip out just that piece, but tyvm
hoary stone
Anyone know any cool themes that make use of the ThemeAttributes plugin?
I'm very curious as to what kind of things people have come up with using it
clear siren
one thing that people use it for is styling their own messages differently, like I had message bubbles with mine in a different color
my old theme
celest bobcat
do u guys know how to make it like this?
clear siren
not super simple to do because of the way the elements are laid out but very possible
mainly excluding the avatar from the bubble will require a bit of work
and if you want all grouped messages to appear as one block that's another can of worms
crimson skiff
stupid ass specificity
pure cairn
pure cairn
and if you want all grouped messages to appear as one block that's another can o...
I think it would be a :has() nightmare, unless messages have different classes whether the headertext is present or not
crimson skiff
only header has a different class
pure cairn
Then :has() nightmare it is
crimson skiff
there is no tail class, you need to do a .messageListItem__5126c:not(:has(> .groupStart__5126c)):has(+ .messageListItem__5126c > .groupStart__5126c) just to check for tail
and thats exactly what i needed, thanks rubber duckie
wow im so used to setting the quick styler into a floating window that i cannot force it to tile without making my eyes struggle
i think?
need to fix embeds though
pure cairn
there is no tail class, you need to do a `.messageListItem__5126c:not(:has(> .gr...
Yeah I know
You know what, you gave me an idea for my next snippet
crimson skiff
Looks good although the small gaps are still noticeable
will need to tweak the margins
horror code though
so many edge cases to take note of
plain kelp
I don't think nth-of-class will ever be a thing, nth-match(.foo) would make more sense to me
pure cairn
wonder how to handle the margins
Add pseudos covering them
crimson skiff
love hate relationship
pure cairn
That will definitely have no downsides
crimson skiff
hmm
pure cairn
pure cairn
Sorry I'm not on pc rn
pure cairn
Well I am but it's my office's
crimson skiff
14 :has selectors
pure cairn
Rookie numbers
Had discord not improved its performance a few months ago that would probably massacre any performance
crimson skiff
now, how to margin
clear siren
pretty nice, some gaps still present
crimson skiff
pretty nice, some gaps still present
yeah i need help
my css skills have definitely improved by a lot
clear siren
also this happens lol
crimson skiff
its literally named id="---new-messages-bar", like why not id="new-messages-bar"
clear siren
easy fix for gaps .cozyMessage__5126c { padding-top: 0 !important; padding-bottom: 0 !important;}
the message item has padding but you're styling the contents in it so yeah
crimson skiff
ooh nice thanks
it is slightly pissing me off though, hovering over a message keeps it indistinguishable from when you dont hover a message
time to make it less obnoxious (i needed it black and white so it is obvious enough)
lowkey lookin kinda fire
clear siren
yeah looks nice for sure
crimson skiff
margin needs some help maybe? idk
here is a sorta black image
yeah image broder radius doesnt match
image seems a bit more rounded
shouldnt be that obvious right?
clear siren
not a big deal tbh
crimson skiff
lemme see what i can do, or not
clear siren
if oyu make them have the same radius they still won't match visually
crimson skiff
why is css style filter so slow
pure cairn
Variables
clear siren
image should have smaller radius so the curve would look like it has consistent thickness
crimson skiff
how tf is the image 8px radius
ah its midnight
i blame refact0r
this works
gonna shove this to my repo rq
margin a bit weird
but like does a snippet like this not exist in #๐จ-css-snippets
i swear it would have
clear siren
don't fall into the endless margin/padding adjustment rabbithole
crimson skiff
lmao
pure cairn
I feel like the reactions should stay outside the bubble, but that would be difficult if B message gets reactions
brazen quartz
crimson skiff
<:husk:1026532993923293184>
can i take my soul back pls
hmm, wonder if this is a by product of the padding fix
is it worth fixing that
pure cairn
Not really
crimson skiff
also what exactly does the @source part of the 'frontmatter' of themes do
like in
* @name ahh
* @author NSPG911
* @version 1.0.0
* @description smth
* @source https://github.com/NSPC911/themes
*/
```what should i link `@source` toIirc it adds a link in the themes panel
But I don't remember if it's source or link
crimson skiff
stupid american english
might need to try harper again, codebook gives me stuff wrong
pure cairn
echo frost
Then :has() nightmare it is
maybe you could make the background on non header ones extend up?
to cover the curves of the previous one
clear siren
but what if you want bubbles that have a non opaque bg
pure cairn
Why is science blue
echo frost
Why is science blue
to make lab coats look whiter
echo frost
wtf why is it science blue
oh it just generates a random hex then gets the color name for that from thecolorapi.com
(this took me way too long to find)
crimson skiff
maybe you could make the background on non header ones extend up?
how would that even work
you cant just get the height and extend up
thats not how css works
pure cairn
Would height: calc(100% + 10px) not work?
For instance
I remember having something similar in an old snippet of mine
clear siren
padding and negative margin
pure cairn
does quickcss not work inside embedded youtube videos?
pure cairn
is it not a shadow dom
dunno what that is
clear siren
not shadow dom but iframe
echo frost
how would that even work
really scuffed, but it's 09:30 and i need to go to bed
.message__5126c>.contents_c19a55 {
background: black;
border-radius: 8px;
padding: 0 8px;
}
.repliedMessage_c19a55 {
background: black;
padding: 4px 4px 0px;
border-radius: 8px 8px 0 0;
margin-bottom: 0 !important;
+.contents_c19a55 {
border-radius: 0 0 8px 8px;
}
}
.message__5126c:not(.groupStart__5126c)>.contents_c19a55 {
border-radius: 0 0 8px 8px;
&::before {
content: '';
background: black;
width: calc(100% - 96px);
height: 20px;
/* padding: 8px; */
display: block;
position: absolute;
bottom: 15px;
right: 24px;
z-index: -1;
}
}```
toxic oak
i can send what works for me but im scared of being judged
sonic mesa
.contents_c19a55 {
padding: 10px 14px !important; /* more padding for breathing room - 10px 14px */
margin: -2px 0 !important; /* space between messages - 6px, can edit to make closer/further */
background-color: rgba(4, 4, 4, .6) !important; /* adjustable, (200, 200, 200, 0.1) */
border-radius: 10px !important; /* rounded corners */
}
ill send mine then
crimson skiff
oh hmm, i think i have an idea with that then
the thing is that with my method, borders are supported
humble jay
[aria-labelledby*="user-profile-sidebar-heading"] *, i cant seem to find the specific frame to add to your snippet, but this line here added to the bg removal section does work
i tried using the * to move down the list, but if i go any further i cant get it, and if i remove the * it doesnt owrk
also just discovred the +~ selector mod things from ur snippet 
odd laurel
trying to theme for my friend, but it seems a font won't load even though it's on github?
this is the font: https://github.com/eleonorefines/Facade-font/raw/refs/heads/master/fonts/Facade-Ouest.woff
fonts and cors are so frustrating
what should i do to troubleshoot?
humble jay
is it possible to make one of these # id selectors toggleable with a variable
cuz all 3 menus use the same css, but i dont wanna dupe each one behind a container style to make them toggleable
or myabe thats fine, idk if its bad for performance to dpulicate it 3 times tho
clear siren
idk what you mean
but yeah you can toggle entire rulesets with variables using style queries or individual properties using if()
can't really toggle a single selector
and it shouldn't matter much for perf if you have duplicated (triplicated?) css
humble jay
idk what you mean
so ex. there are like 3 places this orange icon can show up, context menu/settings/msg hover action bar, so i put all 3 of their selectors together. but i wanna make each a toggle, so i can turn off context menu and keep msg hover
but afaik the only way todo that is to give each one its own
@style1 .context {
css1
}
@style2 .msghover {
css1
}
@style3 .settings {
css1
}```pretty much yeah
leaden hinge
so ex. there are like 3 places this orange icon can show up, context menu/settin...
Can use a variable on the id set to 1 or 0, and then multiply a value like max-width by the variable in a calc. But yeah still requires 3 declarations. You could use nesting but there's like 5 ways to do this probably.
humble jay
Can use a variable on the id set to 1 or 0, and then multiply a value like max-w...
idrk wym, this is how the css looks
#message, /* message context menu */
[data-list-item-id^='chat-messages___chat-messages'] >[class^='buttonContainer_'] {
path[d$='c-.79-.83-1.92-1.25-3.38-1.25H10Z']{color: red;}
}```
how does max width work here, rn im already using @container style to toggle a few things, but this is just so i can avoid duplicated css
can import the whole thing here but its kind of a lot
@import url('https://raw.githubusercontent.com/fckyough/css1/refs/heads/main/vcSnippets/colouredIconsController.css');
(i dont think i can another way so duplciated css it is)
fluid badge
Hey guys any ways i could fix those stupid boxes? kinda new in css so im using AI to help me, but this isnt working
leaden hinge
idrk wym, this is how the css looks
```css
#message, /* message context menu */...
I'll have to look at it. Using a true/false variable to conditionally change things only works for numerical values or true/false states like visibility (can use max-width * 0 or * 1 to effectively show/hide the element)
humble jay
yea that makes sense
i just dk if it applies to this snippet
but if u wanna look, its these 5 lines and the 5th is msg hover, first 4 are right click menu, which are the two groups i wanna toggle
fluid badge
Hey guys! i made a theme and there are possible a ton of issues, but i wanted to hear about your opinions! Please check it out here
also i used ai to help me with the website and readme since im too lazy :3
the theme isnt ai...
hoary stone
Hey guys! i made a theme and there are possible a ton of issues, but i wanted to...
No pictures in the repository?
humble jay
No pictures in the repository?
#๐จ-theme-development message looks like this
darker w new font i think
fluid badge
No pictures in the repository?
scroll down
wait
i forgot to put
im a rookie in github
kinda new
@hoary stone
hoary stone
Much better
hoary stone
No clue, I don't make themes for them be popular, I just make what I want and share it
fluid badge
No clue, I don't make themes for them be popular, I just make what I want and sh...
can i at least post it on better discord ?
fluid badge
because i thought you need to do a special process or something
Yeah, Knew it
how do i post it on the github page for the vencord themes?
oh nvm, its a search
late lichen
Hey guys! i made a theme and there are possible a ton of issues, but i wanted to...
try to see if any of your selectors match these
fluid badge
try to see if any of your selectors match these
Thank you but- i already fixed it
late lichen
oh
fluid badge
i have a question; which one is better?
late lichen
purple
late lichen
nice purple
late lichen
im already trying
fluid badge
try to see if any of your selectors match these
also, back to this, i fixed the thing in most servers but in 1 certain server it still has them, i dont know what happened
late lichen
im stealing that channel transition
late lichen
my theme pushes them to the side
fluid badge
my theme pushes them to the side
mine does that too
late lichen
and they look a hell lot cooler with transition
fluid badge
and they look a hell lot cooler with transition
im so desprate to fix the purple thing im even using ai to try to fix
and it is not helping
๐ญ
late lichen
thing is that my channels look like this
fluid badge
thing is that my channels look like this
Well, i only tested it on the web but i can test it on the app
on the app its fine for me
wait
thats my old css
late lichen
i think you forgot to round a corner there
fluid badge
i think you forgot to round a corner there
no no, its my old css it hasent updated
weird
Try taking the straight css from the file
can you maybe help me fix the code
these damn lines
@late lichen
i tried everything
Dang it
late lichen
why it purple
fluid badge
try to see if any of your selectors match these
how do i fix this
late lichen
why not purple
late lichen
i think my things are affecting yours
fluid badge
What do you mean
late lichen
my css
fluid badge
Yeah?
late lichen
i love purple
late lichen
i dont have them for some reason
fluid badge
hmm, maybe its a web issue
late lichen
let me see
fluid badge
let me see
Its only on certain servers
late lichen
fr?
fluid badge
Yea.
late lichen
i think this is what goes in there
late lichen
found a server that does it
late lichen
hell naw
fluid badge
so thats the culprit
im just dumb
Sorry im new in this css dev thing
like 2 months
@late lichen Is that it?
fluid badge
have you tried clicking the checkbox next to it?
next to what im stupif
WAIT
IT WORKED
WAR IS OVER
late lichen
style rule
late lichen
(only appears on hover btw)
late lichen
as in what?
fluid badge
as in what?
Profile
late lichen
my discord username?
fluid badge
my discord username?
Oh thats your github?
late lichen
(the second one)
fluid badge
Oh ok!
late lichen
why?
fluid badge
why?
Just to give a thank you for the help in the repo
also @late lichen what would you rate the theme
late lichen
sorry, im bad with voting stuff, cant do it
late lichen
add this to the thing --background-brand: #a855f7; real quick
and look at your server icon
fluid badge
Found another proble,
fluid badge
add this to the thing `--background-brand: #a855f7;` real quick
One second
fluid badge
add this to the thing `--background-brand: #a855f7;` real quick
Yo!!!
Looks really good
Thanks
fluid badge
Found another proble,
any idea how to fix this
@late lichen Sorry for the pings
can you help
late lichen
let me see if i can get that to happen
fluid badge
its a gif
only on gifs
Try this @late lichen
its the One im using
i never really tested gifs
late lichen
its the One im using
update the repo
fluid badge
update the repo
Not yet, its just a try to fix the gifs
if its fixed then ill update
if u can help me fix it, ill be grateful
pure cairn
why so many !important
fluid badge
why so many `!important` <:husk:1026532993923293184>
bc i like it
Idk
im just trying to fix
tbh
as long as it works
late lichen
thing is, idk if these are supposed to be used somewhere else
but its [class*="imageContainer_"], and [class*="embed_"],
fluid badge
Ok one second
late lichen
have you ever tried this thing?
fluid badge
No
late lichen
(element selector)
late lichen
you hover over something and it brings you exactly to that thing
late lichen
devtools (ctrl+shift+i)
late lichen
topleft corner?
late lichen
i was testing something of the same level so...
but weird that it didnt fix it
for me it did
have you removed both of them?
late lichen
fluid badge
It worked but the beatiful outline is GONEEEE
fluid badge
use this one
ok
yeah it worked, W bro
expect a lifetime of health
coming your way
late lichen
i was gonna say skill issue, but good thing it still works
oh no
ive noticed something
locate css [class*="sidebar_"], [class*="sidebar_"] > div, [class*="sidebar_"] [class*="scroller_"] and change to css [class*="sidebar_"], [class*="sidebar_"] > div:not([class*="sidebarResizeHandle_"]), [class*="sidebar_"] [class*="scroller_"] NOW
fluid badge
locate ```css
[class*="sidebar_"],
[class*="sidebar_"] > div,
[class*="sidebar_"...
Huh
why
I cant find it @late lichen
in the github ctrl f
Why?
late lichen
line 60
fluid badge
Thanjs
late lichen
you are painting the sidebar resize thing
late lichen
i dont even know if you can see this, but just to be sure
fluid badge
Huh
late lichen
(the line going from top to bottom)
fluid badge
What was wrong with it
late lichen
it being visible?
fluid badge
i didnt notice anything xfd
xd
also
does refreshing discord with the theme in online themes make it refresh and update with the commit?
late lichen
i think yes
fluid badge
Also what do you think i need to add in my theme
late lichen
cause you are forcing a redownload of everything
fluid badge
cause you are forcing a redownload of everything
yeah
fluid badge
Also what do you think i need to add in my theme
^^
fluid badge
https://docs.betterdiscord.app/themes/tutorials/selectors#tips-tricks
As long as it works,
late lichen
sorry for not dropping something like that
fluid badge
sorry for not dropping something like that
Wat? its ok
pure cairn
As long as it works,
sure, but you might get your theme submission rejected because of that
fluid badge
sure, but you might get your theme submission rejected because of that
ill make it less XD
is the theme good tho
fluid badge
not a fan of pitch black themes
i could make another version of it
with other colors
late lichen
ill make it less XD
if you got my .txt i prob already did it for you
cause i think i nuked them
and the theme still works fine
pure cairn
cause i think i nuked them
good
fluid badge
if you got my .txt i prob already did it for you
oh thank you for making my life easier
late lichen
the only reason they are valid are when elements have inline styles
fluid badge
You removed every single one of them
its still okay right?
pure cairn
quick question, out of curiosity
late lichen
why would you
pure cairn
do you know what !important does?
fluid badge
do you know what `!important` does?
Prioritieses it
fluid badge
Prioritieses it
Right????????
pure cairn
yes
fluid badge
ok cuz i thought i was dumb
late lichen
you somehow made me change purples
i used "#6F1EFA" for discord and now i have "#8F50FB"
fluid badge
you somehow made me change purples
Huh
late lichen
our themes are opposites ๐ญ
yours is oled with no borders
mine has a bg image and loaded with borders
fluid badge
mine has a bg image and loaded with borders
Show me
late lichen
umm
fluid badge
but there are settings
My theme is use it or no
Lol
i dont know what to add
this is basically the theme
version 1.2
DumbCord
pine needle
/* Hide Dev Tools */
[aria-label="DevTools"] { display: none }
not working anymore?
humble jay
```css
/* Hide Dev Tools */
[aria-label="DevTools"] { display: none }
```
not wo...
trying to hide this or what
pine needle
ya hide that.
onyx mesa
idk what they did with the search bar but now it keeps getting pushed around by the channel name and channel topic width and it just jumps around to different spots in every channel
can't find a fix for it either
half crystal
pure cairn
Scary
humble jay
idk what they did with the search bar but now it keeps getting pushed around by ...
https://discord.com/channels/1015060230222131221/1363870789845258251 try this snippet
/* Server name titlebar text */
.title_c38106 {display: none;}
/* Channel "Follow" button for announcement channels */
.followButton_f75fb0,
/* Channel topic text */
.topicClickTarget__6ec1a {
-webkit-app-region: no-drag !important;
}
/* ^ this shit makes it impossible to drag without */
/* a windows header + a channel w a description */
/* fixed below w the clicktarget shit */
/* Channel Name/Topic gradient to fade overflow (was incorrect color, use mask instead) */
.children__9293f {
mask-image: linear-gradient(to right, black calc(100% - 8px), transparent 100%);
&::after {content: unset;}
}
.topic__6ec1a.expandable__6ec1a {width: fit-content;}
.topicClickTarget__6ec1a {max-width: 100px;}
/* Title bar positioning within window controls & navigation buttons */
.base__5e434 {
anchor-scope: --bar-leading-anchor, --bar-trailing-anchor;
&>.bar_c38106 >.leading_c38106 {anchor-name: --bar-leading-anchor;}
&>.bar_c38106 >.trailing_c38106 {anchor-name: --bar-trailing-anchor;}
}
.title_f75fb0 {
position: fixed;
left: anchor(--bar-leading-anchor right);
right: calc(anchor(--bar-trailing-anchor left) + var(--space-8));
top: anchor(--bar-trailing-anchor top);
bottom: anchor(--bar-trailing-anchor bottom);
width: unset;
height: unset;
min-height: 0;
padding: 0 0 0 5px;
margin: 0;
background: transparent !important;
border: none !important;
/* Fix searchbar height in compact titlebars */
.searchBar_c322aa {
max-height: calc(var(--custom-app-top-bar-height) - 8px) !important;
padding: 0;
&>.DraftEditor-root,
&>.DraftEditor-root * {
line-height: min(22px, var(--custom-app-top-bar-height) - 12px) !important;
height: min(22px, var(--custom-app-top-bar-height) - 12px) !important;
padding-block: 0 !important;
}
}
}
heres the most functional form of it i think, if u combine all the misc fixes in the thread
pure cairn
idk what they did with the search bar but now it keeps getting pushed around by ...
I had to add a min-width: unset to your snippet to get it working fine again, but I'm using a local version so you might have fixed it already
onyx mesa
I had to add a `min-width: unset` to your snippet to get it working fine again, ...
my snippet was all kinds of fucked up for me
tepid carbon
if you still need a snippet
/* Compact channel search. */
@import url(https://eight-p.github.io/BD.8P/Themes/Snippets/dist/CompactChannelSearch.css);```no i managed to fix my own snippet, the issue i am having is that the button jumps around when i switch channels
i might just need to completely rewrite it, since it's pretty old
nvm i fixed, it was an issue with the toolbar itself
half crystal
```css
/* Server name titlebar text */
.title_c38106 {display: none;}
/* Channe...
-# oh look thats mine!!!
fluid badge
will putting em dashes in my code in the /* */ area make people think my code is ai?
i like em dashes for some reason..
late lichen
i think you got them flipped
late lichen
yes
fluid badge
did you do the online themes method and not the local css editor?
late lichen
i have @import url('https://raw.githubusercontent.com/novimp3/phantom-theme/refs/heads/main/phantom.theme.css'); on qcss
fluid badge
i have `@import url('https://raw.githubusercontent.com/novimp3/phantom-theme/ref...
wait, ill update it and see
late lichen
wait, ill update it and see
no, this is to load the theme
late lichen
okay
fluid badge
im finding the perfect color
pushing the commit
wtf is wrong
ok
it took longer then usual
but worked
lets see now
this is better ?
i forgot to chagne the color
Fuckk
late lichen
you broke it.
late lichen
you removed padding on the button side
pure cairn
my snippet was all kinds of fucked up for me
Yay
tidal vapor
just ended up losing a bunch of my css
im trying to recreate a hoverable memberlist but the old css for some reason wont work
most up to date thing i could dig up
i dont think im getting the elements right or something
humble jay
yea those are old classnames, maybe the calssupdate would fix it
tidal vapor
yea those are old classnames, maybe the calssupdate would fix it
oh right this was before the classname thing
rightt
this is pretty much perfectly functional now
what's the name of the container for the little nameplate things? they're pitch black n i wanna make them transparent like everything else
fluid badge
this is pretty much perfectly functional now
what's the name of the container f...
What are you talking about
i might know but i just wanna know what exactly
tidal vapor
i don't think i articulated what i meant very clearly
area under the names is solid
wanna get rid of it p much
just not sure what the container for it is called
fluid badge
Try the devtools and inspect element
should help you
ctrl shift i for dev tools
all the way to the left ^
fluid badge
This is not it
tidal vapor
hm?
fluid badge
it seems that i cant do it
tidal vapor
me neither
fluid badge
like press on that area exactly
to be honest, i looked at random themes on betterdiscord site when i had similar issues
at the code
i never needed to look there
it might help but idk
humble jay
this is pretty much perfectly functional now
what's the name of the container f...
use devtools to find it, ctrlShift i
m alr got reply
tidal vapor
use devtools to find it, ctrlShift i
cant figure this shit out still
unrelated but i've been digging in #๐จ-css-snippets for 2 hours and i legitimately cant find any script that works to change the icon to something custom like an icon
humble jay
.childWrapper__6e9f8 {
background-image: url('https://i.imgur.com/vgdGbvO.png');
background-repeat: no-repeat;
background-size: cover;
[d^='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21'] {display: none;}
}
was pretty easy to make just now
@tidal vapor try that
i thought someone already made this tho
tidal vapor
```css
.childWrapper__6e9f8 {
background-image: url('https://i.imgur.com/vgdGb...
that works !! ty
lunar hamletBOT
https://github.com/nvhhr/discordcss/blob/main/snippets%2Fswaphomeicon.theme.css
snippets/swaphomeicon.theme.css:
/**
* @name swaphomeicon
* @author nvhhr
* @description replace home icon/dm button with custom image
*/
/* set a background-image on dm button */
[data-list-item-id=guildsnav___home] > [class^=childWrapper_]
{ background-image: url("https://i.imgur.com/ekIk6Ux.png");
background-position: center;
background-repeat: no-repeat;
background-size: 70% 70%; /*adjust as you see fit*/
svg { display: none; }} /*remove discord logo from top leaving only background*/
[d^='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21'] {display: none;}```is this not better
cuz ithought the naked svg has to check evrey svg then see if its below that class
clear siren
I still have no idea how css parsers actually work so idk but shouldn't make much of a difference
leaden hinge
cuz ithought the naked svg has to check evrey svg then see if its below that cla...
that should be worse because it is missing a left-hand selector for a tag. So with this it has to check all elements of any tag for an attribute 'd' and then start the comparison. You could do svg[d^=... to limit the scope to only svg tags though easily.
at least, that's how I understood it last I read up on it. For standard attributes in the HTML spec, it keeps a hash map of all of the elements with those attributes defined so things like classes are still really performant. But using the attribute selector inherently negates that advantage.
humble jay
that should be worse because it is missing a left-hand selector for a tag. So wi...
ahright so
path[d^=123]
is better
leaden hinge
That should be yeah
humble jay
i c
leaden hinge
effectively without a left-hand selector you are always doing * in it's place.
exceptions for things like .classname and #id since the browser keeps a dedicated hasmap for those.
humble jay
effectively without a left-hand selector you are always doing `*` in it's place.
still im still confused for this specific example, if its faster to just collect all svg and chekc parent like the github snippet, or check all svgs for the d= and then check parent of only those matching, cuz just grabbing svg and not evaluating the d= is prolly faster in some ways
and idk if this one is dependent on whats in the dom or what
leaden hinge
That I can't recall the performance advantage whether its to used nested statements or not.
It might actually be faster to do
[data-list-item-id=guildsnav___home] > [class^=childWrapper_] svg { display: none; }
But with left-hand components for the prior two or even a specific id or something to get to them faster.
I think the way the nested stuff works it still crawls the full DOM - AI might be able to answer that faster than looking at the code though
humble jay
lol i feel like every time i learn smth i have to change all my stuff now
fluid badge
```css
.childWrapper__6e9f8 {
background-image: url('https://i.imgur.com/vgdGb...
is there any way to prevent servers with no pictures from doing this then
humble jay
try the github snippet
i think it was more specific on that selector
or can jus tmake it uh
[data-list-item-id='guildsnav___home'] >.childWrapper__6e9f8 {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/84/Mozilla_Firefox_3.5_logo.png');
background-repeat: no-repeat;
background-size: cover;
[d^='M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21'] {display: none;}
}```prolly that might fix it
but atp its just the same thing as the github snippet i just realized
lol
fluid badge
how does this look
clear siren
how does this look
watermark kinda cringe but clean ๐
fluid badge
cool icon [โ ](https://cdn.discordapp.com/emojis/1366798665234124992.webp?size=48...
Thanks
fluid badge
watermark kinda cringe but clean ๐
how do i improve it
clear siren
idk what your end goal is
humble jay
like the other guy said, usually u just make what u want
and then share it
its what most ppl prolly do
so tbh u should like it first
looks fine to me tho โ
fluid badge
and then share it
where thats the question
fluid badge
so tbh u should like it first
i use it myself i like it
clear siren
we still have no theme sharing channel/forum here unfortunately
fluid badge
aww
fluid badge
also i have a question
in github
the code is updated without the watermark
but
when i refresh my discord, its still there
and i use this
so idk
clear siren
or github or both idk
I also often update a snippet and even if I remove it from vencord, restart, reapply it won't get the updated one until after a while
fluid badge
Yeah thats annoying'
pure cairn
same here, that's why I use quickcss for testing/developing
fluid badge
same here, that's why I use quickcss for testing/developing
Yeah same
tepid carbon
<https://themes.equicord.org/> maybe here?
lol, did they just scrape the BD site and reupload the themes
iron smelt
lol, did they just scrape the BD site and reupload the themes
Nah they are user uploads
iron smelt
i definitely did not upload my own themes there
Means someone at some point submitted it
To my knowledge at least
fluid badge
lol, did they just scrape the BD site and reupload the themes
They also take days to view the submissions (i can also view all the submissions)
this is not mine, But just as an example
there are like 5 submissions
i would not upload mine there
An enhanced version of Vencord
Lmao
humble jay
it's vencord with more plugins
fluid badge
it's vencord with more plugins
Then why isnt anyone using it
humble jay
Then why isnt anyone using it
what
fluid badge
never saw a single person use it
humble jay
prolly cuz ur in the vencord discord
pure cairn
echo frost
a lot of people here use equicord
storm geyser
can someone send me a fully transparent theme for discord
clear siren
I have one kinda
https://github.com/nvhhr/discordcss/blob/main/snippets/actuallybasicbackground.theme.css
this with no bg image
it's what I'm using, see also bordercleanup css
it's not very good tbh and has been due for some rewriting for a long time
late lichen
i was gonna send mine, but you already did so
clear siren
in July I'm on holidays I'm planning on doing some css
karmic crater
Hi,
I'm new to anything regarding CSS and custom Discord themes and I'd to ask for help on how I can import the highlighted UI elements from the DTM-08 theme to the SkeuCord theme.
https://cdn.discordapp.com/attachments/123136820409139200/1509894727980552344/DTM-08_highlights.png?ex=6a1ad68b&is=6a19850b&hm=61af31b926ab49cf50f74df1248f437b7f55052e45ac668224044a08296a9d8a&
https://cdn.discordapp.com/attachments/123136820409139200/1509894728563556462/image.png?ex=6a1ad68b&is=6a19850b&hm=900a80c005d691bd893c03b471079f8fdd5c8b53e968b8e8cd4ccabf5e03b027&
For the server list, I'd like to have the icons be always square.
How can I do that?
clear siren
this might help you https://github.com/nvhhr/discordcss/blob/main/snippets/squareicons.theme.css
dire jay
hi no idea if this is the right channel as im kinda lost here. i know basically nothing about css or anything but i want to disable this incredibly annoying and making my game lag "you are currently muted" alert. i managed to select it and find its name (i think?) using inspect element and this is what ive tried in the css editor but it doesnt work (just random stuff but i couldnt find anything about it on the internet๐ญ). does anyone know if its possible and if so how to do it? here is the name copied from the editor thing: "tooltip_c36707 tooltipTop_c36707 tooltipGreen_c36707 tooltipDisablePointerEvents_c36707 greenTooltip67645"
humble jay
just do .tooltipDisablePointerEvents_c36707
instead of that whole div-> thing
also if it doesn't work then maybe it needs !important
dire jay
like this right?
wintry cape
hi no idea if this is the right channel as im kinda lost here. i know basically ...
You can't put classes together like that
wintry cape
If you want to use multiple classes then it looks something like div.class.class.class
dire jay
div with exactly that line in parenthesis
dire jay
.tooltip {display:none !important;}
okay but i think this might be working thank you!!
humble jay
can combo or pick any class, i just picked that one cuz i assumed it's the most specific
dire jay
okay i dont have a screenshot but i found the entire element as text:
<div class="tooltip_c36707 tooltipTop_c36707 tooltipGreen_c36707 tooltipDisablePointerEvents_c36707 greenTooltip67645" style="opacity: 1; transform: none;"><div class="tooltipPointer_c36707 tooltipPointerBg_c36707" style="left: calc(50% + 0px);"></div><div class="tooltipPointer_c36707" style="left: calc(50% + 0px);"></div><div class="tooltipContent_c36707 greenTooltipContent67645">You are currently muted!</div></div>
so not exactly sure what this means but its working now anyways so thanks a lot!
humble jay
yea like some elements will share a class
so some random other tooltip might have the tooltipPointer69 class
and if ur thing only grabs that it might remove stuff inadvertently
adding more will make it more specific to that element, but sometimes u need to be even more specific like adding the element above it with .above >.below
dire jay
ohh okay i see
hope i didnt break anything then
but i dont really recall any important popups similar to this so it should be fine
mighty mural
@serene glacier hey... uh long time no talk. Unsure if you're still rocking my revert discord trial theme. Well if you still are and noticed the dev tools icon in the way I'm glad to present a fix:
(Yes I double pinged because I went to the wrong channel)
(Bonus I also fixed the top bar when in settings view.
serene glacier
<@668414033615126538> hey... uh long time no talk. Unsure if you're still rocki...
Im still using it :3
And yeah i kinda noticed some weird bugs with toolbar but they didn't bother me much
mighty mural
Im still using it :3
And yeah i kinda noticed some weird bugs with toolbar but t...
Interesting... Never seen the bookmark icon. Anyway the update should have been up for a while and the Dev tools should have disappeared
echo frost
Interesting... Never seen the bookmark icon. Anyway the update should have been ...
it's from the holynotes plugin i believe (which isn't built into vencord)
mighty mural
it's from the holynotes plugin i believe (which isn't built into vencord)
Oh, thank you.
mighty mural
I kind of thought it was broken
Oh, well as you can see from my screens my main theme objective was to revert to april 2025 theme.
So moving down all the stuff from the top bar.
Obviously that creates quite some issues (if I don't see them)
As I'm manually x y moving stuff.
tepid carbon
it's from the holynotes plugin i believe (which isn't built into vencord)
could also be the message-bookmarks experiment
humble jay
I kind of thought it was broken
used to be in equicord but removed cuz broken
serene glacier
Interesting... Never seen the bookmark icon. Anyway the update should have been ...
yeah everything is working great not couting that bookmark icon, i don't even use them
echo frost
used to be in equicord but removed cuz broken
yeah
that's what i meant
fierce knot
I need some help with getting the transparent app background back
.app__160d8 {
background: none;
background-color: transparent;
}```
here's the snippet I have in my theme, but the class must've changed because it doesn't appear to do anything anymore
fierce dagger
I hope I am using the right channel for this, but can someone tell me if my QuickCSS can be optimized?
/* Hiding Help in the window title */
div[class^="trailing"] > a:has([aria-label*="help" i]) {
display: none !important;
}
/* Hiding Apps button*/
div[class^="buttons"] > div[class~="app-launcher-entrypoint"] {
display: none !important;
}
/* Hiding Gift button */
div[class^="buttons"] > [aria-label*="a gift" i] {
display: none !important;
}
/* Make emoji selector much taller */
div[class^="layerContainer"] section[class^="positionContainer"] {
height: 85vh !important;
}
/* Best attempt in hiding Activity from servers */
aside[class^="membersWrap"] [class^="membersGroup"]:has([role="button"])
{
display: none !important;
}
aside[class^="membersWrap"] div[class=""]
{
display: none;
}
You can group all "display: none" snippets together with , if you want and try to not use :has()
There is only 1 'a' tag in the trailing children so the :has() is not needed
humble jay
could use classnames instead of attribute selectors