joelshepherd / tabliss

A beautiful, customisable New Tab page for Firefox, Chrome, and Edge.
https://tabliss.io
GNU General Public License v3.0
2.25k stars 295 forks source link

Background image hue/etc filtering option? #622

Open mxmilkiib opened 1 year ago

mxmilkiib commented 1 year ago

I'm wondering if it could be possible to use CSS to filter the background image in the dimension of hue or monochrome etc.?

the-wright-jamie commented 1 year ago

Add Custom CSS widget: Settings → Add widget → Custom CSS → Cog → Paste in code

Change hue:

.image {
    filter: hue-rotate(90deg);
}

Change monochrome:

.image {
    filter: grayscale(100%);
}
mxmilkiib commented 1 year ago

Thanks!

I went with

.image {
  filter: invert(10%) sepia(100%) saturate(1409%) hue-rotate(244deg) brightness(69%) contrast(200%) blur(6px) !important;
}

using this generator (with sepia turned up full).

the-wright-jamie commented 1 year ago

Ooo, that looks cool!

Just an FYI, there is a blur and brightness slider in the Background Display settings:

image

It works just as well in the custom CSS, I just figured you might appreciate having a GUI slider for some of that custom CSS 🎨

In the meantime, glad I could help and happy hacking! 👨‍💻

mxmilkiib commented 1 year ago

I just figured you might appreciate having a GUI slider for some of that custom CSS

Thank you, yes.

The point of my making this feature request was that other users might appreciate sliders for more than just those filter types :)

The Custom CSS bit is super handy. There are though font suboptions for both it and the time bit, which I think is mildly confusing.

I had images pulled from a search for "purple abstract", but "purple" isn't uniform, and rotating hue for the majority colour makes other colours not purple, so the sepia option manages that where grayscale doesn't work.

Using a custom CSS filter overrides the existing sliders.

the-wright-jamie commented 1 year ago

Ah, ok cool, just wasn't sure if you were aware of that option, I didn't realise it was there for months 😁. Absolutely, having a slider for all of this would be super cool - maybe an additional "advanced options" sub menu

Unfortunately the project is kinda dead, I've been considering forking it but much like the original developer I wouldn't have the time to maintain it but I'd be interested in accepting PRs and making sure they get published.