this post was submitted on 12 Mar 2024

6 points (100.0% liked)

Firefox Customs

3 readers

9 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

yoasif@fedia.io

MrOtherGuy@lemmy.world

Help with color favicon sites tabs. (fedia.io)

submitted 8 months ago by soilentgreen@lemmy.world to c/FirefoxCSS@fedia.io

5 comments fedilink hide all child comments

Hi,
I want to color the tabs URLs icons to red- just the icons of the sites.
Someone on reddit gave me that code and explanation:

.tabbrowser-tab .tab-icon-image { filter: sepia(1) saturate(5000%) hue-rotate(0deg); }

What this does is make every icon the same hue with the sepia filter, then, you rotate the hue towards red. You need to use high saturation to make the colours pop and every icon should be red.

https://www.quackit.com/css/functions/css_hue-rotate_function.cfm

It partially succeeded. All the webs icons with one color as github, virusetotal...are colored in red, but all the webs with more than one color as google, amazon.. are colored partially in red. It as like this code can color only one color of the icon.
There is any way to color all the icons to red or replace them?

Thanks.

top 5 comments

sorted by: hot top controversial new old

[–] Zeus@lemm.ee 2 points 8 months ago (1 children)

if you fully colour images without transparency [i.e. the google/amazon icons] in red, they won't be distinguishable - they'll just be a red circle/square

however, if you still want to do it; put brightness(0) as the first filter to make it black, then an invert(0.5) to make it not black

also, you can use https://codepen.io/sosuke/pen/Pjoqqp to calculate the exact colour you want (although if it's 0deg red that's not hugely important)

filter:
	brightness(0)
	invert(18%)
	sepia(97%)
	saturate(3399%)
	hue-rotate(0deg)
	brightness(85%)
	contrast(90%);

[–] soilentgreen@lemmy.world 2 points 8 months ago (1 children)

Thank you for your answer.

I added brightness(0) and invert(0.5) and as you say they become red circle/square. I wonder if there is is anyway to replace those icons as it can done with bookmark icons? An example of replacement of Amazon bookmark image (gave me by Firefox-gx theme creator Godiesc):

search for an image for amazon here: https://iconduck.com/icons/2881/amazon-square.
edited that image code to add the property _fill="context-fill"__ to give the image the color of the theme.
Add the image into chrome/icons folder.
add the next code:

.bookmark-item[image*="page-icon:https://www.amazon.com"]>.toolbarbutton-icon { width: 0px !important; height: 0px !important; padding: 0 0 18px 18px !important; background-image: url("../icons/amazon-square.svg") !important; background-size: cover !important; }

[–] Zeus@lemm.ee 2 points 8 months ago (1 children)

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

it's really fucking tedious to do it for many images;
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

[–] soilentgreen@lemmy.world 2 points 8 months ago (1 children)

First of all, thanks for the detailed answer. I must ask. I do not understand how are these codes can help to change the amazon icon for example? Nothing in the code links to any site that I want to change his icon. And the code did nothing.

[–] Zeus@lemm.ee 1 points 7 months ago

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