this post was submitted on 09 Jun 2023
12 points (100.0% liked)

Furry Technologists

1325 readers
10 users here now

Science, Technology, and pawbs

founded 2 years ago
MODERATORS
 

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.

  1. Download the theme you want to customize and its corresponding SCSS file.

In my case I just did darkly.css and _variables.darkly.scss

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

  2. Change the name of the files, for example "defaulttheme.css" and "_variables.defaulttheme.scss"

  3. Upload the files to your server to the lemmy install folder. It's probably something like "/srv/lemmy//volumes/lemmy-ui/extra-themes/"

  4. Enable the theme on your profile to make sure everything looks alright.

  5. 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 are viewing a single comment's thread
view the rest of the comments
[–] kiwifoxtrot 2 points 1 year ago

I would suggesting merging your change on the UI git.