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
You don't show enough of the document structure in the question to provide a fully fleshed-out example, but since it appears that you're now able to block based on CSS selectors and simply need help figuring out what CSS selector you should use...
CSS supports both attribute substring matching and positional pseudo-classes, which can help you out here. For example, if I'm not mistaken, you could use a CSS selector along the lines of
div[aria-label="Servers"]:nth-child(4) div[class^="listItem"] div div svg { }
which would find a div with an aria-label attribute value of Servers, locate the fourth child element of that, then go three div elements deep (the first of which must have a class attribute with a value that begins with listItem), then apply the specified style to the svg element therein.
You blacked out the value for class for the div listItem class names; it's possible that those could provide something more reasonable to match on, in which case you might instead try something like
div[aria-label="Servers"] div.listItem-12345 div div svg { }
It's also possible that the data-dnd-name property might be useful for matching, in which case you can try as a starting point
div[aria-label="Servers"] div div div[data-dnd-name="..."] svg { }
or to match something at the beginning of the property value, again
div[aria-label="Servers"] div div div[data-dnd-name^="some-"] svg { }
Complex CSS selectors can be a bit tricky to get right, and something like the above will likely be very heavily dependent on the exact document structure, but they are also extremely powerful when you need to match something that you can't readily match directly (such as something that doesn't have an appropriate id or class attribute to match on). Here's a fairly readable overview of some of the more complex CSS selector mechanisms available; the Attribute Selectors (currently about a third of the way down from the top of the page) and Structural & Position Pseudo-classes (about half way down) sections are likely to be particularly useful in your scenario.
2 comment threads
0 comment threads