Welcome to the Power Users community on Codidact!
Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.
Comments on How can I get my browser to block a specific SVG (Discord server icon)?
Parent
How can I get my browser to block a specific SVG (Discord server icon)?
I am on several Discord servers. One of them has, as its server logo, an image I would rather not see every time I use Discord. I had previously used AdBlock to suppress it, but it came back recently and it now appears that Discord is embedding an SVG rather than referencing an image URL, so I don't know how to block that. I tried using AdBlock again, but it disabled all access to the server -- I couldn't click on it. I only want to block the image; I still want to be able to click on the space where the image would have been to get to the server.
I thought to use a CSS override (using the Stylus browser extension), but I can't figure out how to do it. (I don't know if CSS is the right tool for this job. Also, I'm not very good at figuring out CSS selectors.) Here's what I see in developer tools:
The structure shows a div containing an svg containing a defs containing a path with an id attribute. I want to find that ID (but not any others) and replace or obscure its d (definition?) attribute. I don't want to affect any other server icons (or other graphics for that matter).
Is CSS the right tool for this job? If so, how do I express what I want to do? I'm looking for the selector to use and a way to express "if id=(that) then d = (black box or null or something)". If CSS isn't the right tool for the job, then what is -- how should I go about blocking the image?
In case it matters: Chrome on MacOS 11.6 (priority), Firefox on Windows 10 (nice to have).
Post
The selector may be something like:
#<idname> { visibility: hidden; }
This should leave the space allocated but hide the content.
Note: I added this in the comments but putting here as well: It looks like the id is "a20a6299-bf96-4f12-b3bf-fa6597c9eff-blob_mask". The id will be specific to this specific tag. So this might work:
#a20a6299-bf96-4f12-b3bf-fa6597c9eff-blob_mask { visiblity: hidden; }
0 comment threads