Up for discussion:
The userscript I (and others) have written seems to be fairly popular among people who have found it. I’ve had several requests to turn it into a Lemmy theme, but I have been hesitant to do so. Partly because I lack the skill to do it, and partly because it isn’t really a “theme” as such. It doesn’t change the colors or do some of the things a theme typically does. In truth, the script is actually (essentially) theme agnostic - I use it with darkly, but it works with all of the other Lemmy themes without issue (hopefully).
I have no qualms with someone helping turn the CSS stuff into a Lemmy theme (or just taking the bull by the horns and doing it) , but with the changes coming in v.0.18 it may be better to wait.
Anyone have any thoughts? Is this script even appropriate for a Lemmy theme?
You must log in or register to comment.
Hey. Let me start off by saying that this script is great and I’m really thankful for it. There’s still some room for improvement but it makes the experience much much more enjoyable.
So, I’m working on modding the lemmy-ui source code to work on a modded Lemmy instance I’m building with some friends. I’ve only been working on it for a couple days so I’m quite ignorant myself, but I have a few ideas about your project.
So, I don’t think this could be a theme because it does something fundamentally different. A theme is simply a set of colours, fonts and other customization options that describe how Bootstrap should make the content that’s already defined look like. Example, this is what a theme’s code looks like.
What you are doing instead, is replacing the Bootstrap code itself, which is beyond a theme’s scope. You are touching the page’s code.
As far as I know, Lemmy has no way of toggling a feature like this on a user level so user scripts might be your best bet for the time being. However, I like the design so much (and on my instance we are all Reddit refugees anyway) that I’m considering making it the official layout of my instance. I’d still need to figure out how that would work in the details, but I think it could be done without excessive trouble.As a sidenote, reading your code I saw you used the browser’s user agent to check for mobile users. I’d avoid doing that because users can actually modify their user agent if they want to, and some people who really care about their privacy have extensions that do so automatically. Instead you could try using media queries and the window.matchMedia() function (not sure if it’s suported in user scripts as I’m quite the noob in that field, but that’s how I’d do it in a web page).
So, I don’t think this could be a theme because… What you are doing is replacing the Bootstrap code itself
yeah, this is what I thought. Makes sense and I appreciate the insight/feedback.
As a sidenote, reading your code I saw you used the browser’s user agent to check for mobile users.
Yes indeed. That’s coming out. New released updates handle screen width with pure CSS (the @media you mentioned) so there’s no need to check for browser type/agent anymore. In fact, I’m getting rid of basically all the functions (except for the tagline reposition which I’m pretty sure won’t be needed for v0.18).
Is this “new version” you speak of the one you pushed 5 hours ago? I really like it! The fix to the banner in user profiles is great, it looks much nicer. Yes I really think I’m going to add this to my instance.
yep, that is the new version
You might take a look at other Lemmy -> Reddit appearance themes and see what you need to adapt. I found this one which changes Lemmy to look much more like old reddit. Tinker with it, see what changes what, then see what object/class names you need to change to make your script affect the same stuff on Lemmy.
Also yeah, that’s gonna be a chunk of work.
Yeah, the old.reddit.compact script already edits most of those styles. It’s less about the CSS which has already been written/modified and more about getting it into Lemmy as a selectable “native” style rather than relying on Stylus or Tamper/Violentmonkey
I was going to say the same.
don’t know why it cross-posted all over the fediverse… that was not my intention
It wasn’t you who did it. If you check the crossposts it’s just people sharing the link to your github repo.
oh. odd behaviour
Do you have a link to what a Lemmy theme is? Idk if there’s docs or anything. If we can find them I can help you do it.
https://join-lemmy.org/docs/administration/theming.html
it’s a little cryptic. It talks about bootstrap (ok, fine) and then links to a bootstrap builder (there is where I get lost). As I have mentioned in the past, CSS isn’t really my bag (baby). I just poke around until I like how it looks…
I think this is the guide for installing themes for lemmy instance admins. Not for the theme makers. We have to see how to test a theme without having control of the deployment.
k so i researched, there’s nothing new about this bootstrap stuff, what’s new is they’re adding classes to make it easier to theme https://github.com/LemmyNet/lemmy-ui/pull/1361
and that they’re discussing theming
next step is then to check if, having your theme converted to pure CSS or SCSS, when put into the themes folder of a deployment, does it look the same as the userscript, or does it substitute the previous theme and therefore deletes existing colors and shit, or is it simlpy incompatible because it assumes it’s a bootstrap theme and then does it destroy the whole ui due to the lack of bootstrappy defaults?
ez way to check: convince an instance holder (example, the dude) to run a dummy lemmy-ui with a dummy theme that was tedted on stylus for example and see how it behaves when placed into the themes folder.
yeah, i was aware of the theming and UI discussion. I’ve actually started a new userscript based on the beta test instance here: https://enterprise.lemmy.ml/
The CSS will indeed look the same from a layout perspective, but it doesn’t change any colors - and you can’t select two themes at the same time (currently). It doesn’t destroy any bootstrappy defaults, but it would default back to the standard bootstrap color theme. This is why I lean towards this not being appropriate for a “native” Lemmy theme.
Converting the script to stylus is rather trivial - especially now that the comment collapse button and mobile styling is being modified with pure CSS. There are no other functions to convert.
The CSS will indeed look the same from a layout perspective, but it doesn’t change any colors - and you can’t select two themes at the same time (currently). It doesn’t destroy any bootstrappy defaults, but it would default back to the standard bootstrap color theme
Are you implying that you have the ability to upload a .css directly to the UI somehow? or how are you testing its effect on colors and boostraps default classes & color themes? are you talking about stylus with this or something else? cuz i went into enterprise.lemmy.ml and the theme selector seems to have the same themes as this one, maybe i’m missing something.
no, I have no ability to upload .css to UI. But that’s where folks want it - selectable along with darkly, litely, etc.
exactly
what i worry is that if it’s selectable with those, then the default colors of darkly, litely, etc., and their default sizes for buttons, sizes for comments, all the orders and reorders and spacings of things will crumble down, because, well, our CSS would not be placed on top of another CSS, but in substitution of it. I’m not sure if this is true, but I think it has a high likelihood of being true.
and i also worry that it is not possible to test these low-level themes without first removing the defaults, and i believe that this can only be done on your own lemmy-ui deployment, although i am not very sure about this yet.
for your second point: yes, proper testing would require a theme separate from the defaults.
for your first point - that’s where the work is: replacing only the things that are modified by the script to use the script values in addition to any color theming. It is a big job… One that may not be doable at this time.
Naaahhhh what a mess. That’s why I don’t use bootstrap in my projects. All that building and shit is annoying. Not sure if this is the case but first thing I imagine is having to install your own lemmy instance, turning on Lemmy UI, testing your script, dropping it into the folder and reloading to see if it worked? That’s probably not how it’s done cuz if it is then it’s mental to expect anyone to do it. I’ll do some research and ask around.
that was the impression I got. I attempted to start with theming and noped out.
I’d copy darkly.css if I could, but a) it isn’t a simple theme, and b) I can only seem to locate the minimized version. That would also lock people into a dark theme, which seems silly and a little presumptuous.
