joelshepherd/tabliss

Background image hue/etc filtering option?

Opened this issue · 5 comments

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

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%);
}

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).

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! 👨‍💻

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.

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.