tabliss
tabliss copied to clipboard
Background image hue/etc filtering option?
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:
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.