zeus ⁧ ⁧ ∽↯∼

Il faut imaginer Camus hébété.

website

  • 279 Posts
  • 404 Comments
Joined 3 years ago
cake
Cake day: June 15th, 2023

help-circle
  • well i don’t really know how much you know, so i don’t want to over-explain things, but:

    • data uris are basically a way of embedding a whole image in text, rather than linking to an image (i.e. src=./favicon.png). more reading. so there’s no way of guessing what image to replace, you have to inspect the source of the image in the browser chrome
    • which leads me to: the browser toolbox allows you to inspect the actual browserchrome itself more reading. you can’t right click → inspect to pinpoint a specific element, but you can click the “⇱” icon and select an element
    • so you’ll have to inspect your own browser to find the specific string
    • if the code actually did nothing (on lemmy, not amazon) you might be out of luck - it’s possible firefox compresses them differently so the uri doesn’t match i’m an idiot, it would do nothing, it has [..] in it because the actual string is too long for a lemmy comment

    do feel free to ask further questions, although my replies may be slow as i’m not really on lemmy that often


  • okay there is a way to do this in css, but

    1. it’s really fucking tedious to do it for many images;
    2. i haven’t tried to do it in userchrome, just normal css.
      • i just tested it with the browser toolbox, and it doesn’t work, but it may do if you add it to userchrome then restart &c.

    but it is less hacky than doing it with the background-image way, so if you want to try it:

    • the basic way to replace an image by its url is with content[1]
      • so to replace your avatar with mine, use
    img[src="/static/1787a77/assets/icons/icon-96x96.png"] {
    	content: url("https://lemm.ee/pictrs/image/e04cf77f-b694-4a15-9633-3281efbe8157.webp")
    }
    
    • however tab favicons use data uri’s (i also don’t know if they accept svg - they ought, but i’m not sure)
      • so you’d need to inspect the tab, copy the uri, and hope it never changes. lemm.ee’s, at the moment, is img[src="data:image/png;base64,iVBORw0K[..]8sRwEqwGyXYQAAAABJRU5ErkJggg=="]
    • using this technique, you should be able to have (obviously use the full data uri for the match, but it’s too long for a lemmy comment)
    [src="data:image/png;base64,iVBORw0K[..]8sRwEqwGyXYQAAAABJRU5ErkJggg=="] {
    	content: url("data:image/webp;base64,UklGRpwBAABXRUJQVlA4TI8BAAAvL8ALEI+gNpKt5CONUBD9DxGRu0tEG2pj24b+JlOH1rWjA5Fo34mMokhSnP2iAPxrwAc4QAFcDs/5DwAAwA/w3ldbUOGaa/PFlUhSTtKHXMo1SnxBLWOOcGW8HgAxttW4jtGCAn9R3H+1seFhmBQQ0X8GbtvGsWovC7r7eMSBkSRHjIyZYIjSA3OCy7GkZ7itFHpkYP0nej/k0xP6fUihtunvvL6G0jCydTrwojK20TWjImAJJqa1fVkU4Zydi49/En92lG0WTcwIzNjeOxtgottXvr19XsPVOxXXq4dGWaBh6mRc9YNM6fN2GZHQ49+SF1Htf4ZUfwiLU1grlqZwfuFVymENQ7MYw5CeRxWH9DGjnFefXa65loYRdEyFzUtfYbR2et/FbfHwWq84zvOEYWpyvBDAPAHsWQbhewqz9M5U8Q4i33LuTI/7EkAF7hBWKvXgpeS2cKflcB6sHFiU4N66AoZFZQS+lXxXhUd3X6p19vNUWcu/AWJ8SBIVce+KqCpVfJ7wwyY6KiAL6BwA") !important
    }
    
    • you might want to add extra specifiers so it doesn’t match the same image if used elsewhere (i don’t know if it ever is)
      • i.e. img.tab-icon-image[src=".."] {}

    however, this doesn’t work from my minute or so’s testing

    (by the way if you add 3 backticks you get a codeblock rather than the ol’ ugly inline code. also you can specify the language in markdown, although i don’t know if it affects anything in lemmy)


    1. also this only works in ffx, but that’s not important right now ↩︎