How to update / customize the Lemmy CSS themes
How to update / customize the Lemmy CSS themes
Hello everyone,
I managed to make some minor changes to Lemmy's default CSS Theme and uploaded that as a new theme which I set as the default for my instance.
I'm looking forward to making much larger changes, but I wanted to share the process since it took me a while to understand and thought other admins might find it interesting.
- Download the theme you want to customize and its corresponding SCSS file.
In my case I just did darkly.css and _variables.darkly.scss
-
Edit them You can override classes and properties of the default styles.css by adding them to that theme and giving them a higher priority with !important.
-
Change the name of the files, for example "defaulttheme.css" and "_variables.defaulttheme.scss"
-
Upload the files to your server to the lemmy install folder. It's probably something like "/srv/lemmy/<yourdomain>/volumes/lemmy-ui/extra-themes/"
-
Enable the theme on your profile to make sure everything looks alright.
-
As instance admin, go to main settings and set the new theme as the default for all users.
In my case what I did was simply removing the NSFW blur, which doesn't make much sense to have if you've already agreed to see NSFW content. Anyone who still wants to have the blur can switch back to any of the other themes.
I'm not skilled at CSS, but I'll try to make some more changes to customize the site's experience.
Anyways, I hope somebody will find this useful.
You're viewing a single thread.
I'm terrible at CSS too. But the default theme is very much not for me -- I'd like a "compact" mode that can fit more than a few article titles on the page. Do you think the layout is flexible enough to do that with CSS?
This, please. I'd prefer an old.reddit experience with RES enabled versus this New Reddit Compact Mode experience. Shame I don't know CSS in the slightest.