Comments (7)
Here's an example of using Pico.css as an external, CDN-hosted stylesheet:
from showmy.chat.
There's a brief comment about this feature in the config docs — https://showmy.chat/docs/configuration/#theme — but it's easy to miss. I think this feature is very cool because not only does it mean folks can build their own themes without having to go through the contributor workflow, it also allows us to provide private themes for folks (and have them be responsible for hosting).
from showmy.chat.
Hey, @NickyMeuleman! Can you let me know what you're imagining this experience to be like?
from showmy.chat.
I was thinking about an optional way to load a (local) .css file.
That way you could use showmy.chat without having to stick strictly to the pre-defined themes.
This wouldn't replace the pre-defined themes, but be an optional way to provide CSS rules and supply additions/overrides.
Not sure how that would work yet. But some possible implementation:
We may be able to provide another queryparam that does this.
Like how the correct theme .css file is chosen now, also add a (local) one if it is supplied.
The filereader API is pretty neat, I use it on https://nickymeuleman.netlify.app/aoc2021-solver/ to let someone "upload" their own input.
Upload is in quotes there, because the file never leaves the user's computer and all work is done on their machine.
#73 Would be the guide for users to provide their own style rules, how they know what to target.
from showmy.chat.
Gotcha — I thiiiiink this is already supported, through other routes.
If you want to start with a theme and just tweak styles, OBS (and maybe OBS's descendants?) let you inject custom styles into your browser source.
If you'd like to inject a whole dang stylesheet, the theme
attribute does support a valid URI. I haven't really tested it with local files, but I have confirmed that it supports any stylesheets hosted publicly and served with the text/css
MIME type? (Unfortunately, GitHub's raw viewer serves even stylesheets as text/plain
). It'd be worth validating whether this already supports local filepaths out of the box.
from showmy.chat.
Nice! Didn't know that.
Just tried to load a local file really quick (with some minor changes to the sourcode) and it seems browsers block this for security reasons.
The method I tried was using a file:// URI.
I tested http://localhost:8080/c/test?DEMO=true&theme=file://home/nicky/projects/showmy.chat/src/test.css
and the browser blocked it.
Since using local CSS is possible via the tools you're likely to use showmy.chat with like OBS this is fine.
(OBS worked perfectly, really nice)
Didn't test the web-hosted files yet.
If that works, feel free to close this issue!
from showmy.chat.
It's awesome and was exactly what I was thinking of when I created this issue!
from showmy.chat.
Related Issues (20)
- Improve `showCommands` experience in URL builder HOT 1
- [feature request] Add badge to names HOT 8
- Allow themes to style `/announce` messages HOT 1
- [Docs] Homepage should explain what this is and how to use it more clearly
- Bug: long links are causing scrollbars on the default theme HOT 2
- Document available css custom properties available for developers HOT 1
- [feature request]: Hotdog based theme HOT 1
- Allow config for buffering messages
- Create progress bar for fundraisers HOT 3
- [feature request] Elevated message flag? HOT 1
- Automatic dependency updates HOT 1
- Document all stylehooks a theme can use
- Let users customize themes with URL-encoded styles HOT 3
- Create a guide for integrating with OBS
- Provide textual descriptions for themes in the HTML for accessibility HOT 3
- Testing Discord webhook; please disregard. HOT 2
- [Lint] Disable `no-descending-specificity` Stylelint rule HOT 1
- show latest messages causes lockup
- Remove deletion delay when themes don't animate/transition outgoing messages HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from showmy.chat.