Sidebar
Lemmy UI | Theming, UX, UI, CSS, Bootstrap V4.
cross-posted from: https://tkohhh.social/post/4829 > Unfortunately, the [official documentation on theming lemmy ](https://join-lemmy.org/docs/administration/theming.html)is severely lacking. I made some progress on getting it figured out today, so I wanted to share that with you all. > > This is by no means meant to be an exhaustive guide, but my hope is that it will at least get you going. I'm sure that I will say things that are incorrect, so please correct me if you know better! > > # Background > > Lemmy uses Bootstrap-compatible theming. As far as I can tell, this means that it uses a pre-defined set of CSS classes. This is important because if you provide a CSS file that doesn't have all of the correct classes defined, it will break the layout of your lemmy. > > Your custom CSS needs to be saved in the bind mount for your lemmy-ui container. If you followed the [install instructions](https://join-lemmy.org/docs/administration/install_docker.html) on join-lemmy.org, the location will be `/lemmy/volumes/lemmy-ui/extra_themes/`. > > # Prerequisites > > In order to generate the correct CSS, you need a couple of things: > - your customized Bootstrap variables, saved in an scss file > - the Bootstrap scss files > - the SASS compiler > > Let's go through each of these (last to first): > > **The SASS compiler** > > The SASS compiler needs to be installed on the machine you will use to generate your CSS files (it doesn't NEED to be the computer that lemmy is installed on, but it can be). Follow the [install instructions](https://sass-lang.com/install/) relevant to you. I used the "Install Anywhere (Standalone)" instructions and installed SASS on the Ubuntu machine that is running my lemmy instance. > > **The Bootstrap scss files** > > These files need to be saved on the same machine as the SASS compiler. The [Bootstrap download page](https://getbootstrap.com/docs/5.3/getting-started/download/) has a button to download the source files ("Download source"). This will give you a zip folder, so unzip it. Within the unzipped files, the only directory you need to keep is `/bootstrap-5.3.0/scss`. Save that folder in a place that makes sense for you. I put it in my home directory, so the path looks like `~/bootstrap-5.3.0/scss`. You'll need to reference this directory when you're creating your custom scss file. > > **Your customized Bootstrap variables, saved in an scss file** > > This is the fun part... you define your Bootstrap variables. I'm still a little unclear on which version of Bootstrap lemmy is using (and therefore which variables are valid), so I chose to start with one of lemmy's default themes as a starting point. I grabbed `_variables.litely.scss` and `litely.scss` from the [lemmy-ui github repo](https://github.com/LemmyNet/lemmy-ui/tree/main/src/assets/css/themes) as a starting point. > > You'll notice that `litely.scss` is just importing `variables.litely` as well as the Bootstrap scss files. You'll need to change the path of the Bootstrap scss files to the path where you saved your copy of the files. However, leave `bootstrap` at the end of the file path, as this is actually referring to the `bootstrap.scss` file within the Bootstrap scss directory. > > It wasn't obvious to me initially, but you can also add your own CSS styles at the bottom of your scss file. These will be merged with the styles defined in the Bootstrap files. For instance, I wanted my navbar to have a different font from the body, so I added this: > > ``` > #navbar { > font-family: sans-serif; > } > ``` > > # Generating the CSS file > > Once you have all of the prerequisites satisfied, you can generate your CSS files using the SASS compiler. Go to the directory where your customized scss file(s) are saved, and run this command (you added the SASS install directory to your PATH, right??): > > ``` > sass [inputfile.scss] [outputfile.css] > ``` > > This will generate a CSS file. However, pay attention, as there might be errors. If so, fix the errors until you can run SASS without any errors. > > Finally, drop the generated CSS file into your "extra_themes" directory. You'll now see your theme show up in the list of themes on your profile (it'll be the filename of your CSS file). > > *************************** > And that's it! I hope somebody finds this helpful. Please let me know if there's anything I can clarify!
Hey everyone. Im using the winternord theme, but I'd like to theme it slightly. I already managed to change some stuff through the inspector as a test, but I would like to be able to share it and also make it persistent. I've downloaded the winternord.css file but how can I go about applying it to my instance? It says I'm not allowed to load a local file as a stylesheet if I replace the style link tag from the inspector.
I'm pretty happy with the theme I have now. It's personal and "proprietary software", I won't be sharing this one cool thing I have :> but, I'm sure you all can theme stuff yourself and tweak it to your liking. a few days ago when i first started, what I did basically was a bit messy and hacky. I couldn't find the CSS classes (I didn't look close enough between the lines) so I just kind of went off and copy a lot of CSS paths and then combine the base theme and the junk i've written. that's why the previous themes aren't install-able directly through the Stylus browser addon. you had to pick the base theme from the settings. Then I learnt a bit about bootstrap. and how it works. but it doesn't matter if you're theming lemmy. bootstrap CSS basically manages columns, divs, and such, with classes. in our case we just want to modify their shape, colors and borders. Some classes are missing in lemmy-ui that needs to fall into place so there aren't seemingly missing elements, and generally easier to theme. i'll probably work on that in my free time. but of course, no promises. one other thing if I've done that, I wanna write a documentation on lemmy's css. I think most fediverse platforms need this (e.g. peertube) explaining the CSS. I had to figure it out which-affects-what using browser tools and it was tedious. Often times I miss some button colors that are more hidden. If I do it It's gonna take a lot of time and effort. But.. I could write it just little by little. I probably don't wanna do it alone, I'll be glad if someone wants to give me a hand. So anyway, That's the plan at least. I'm gonna take care of my health and a lot of things I want to do, so, see you later.
 software: [Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) (firefox addon) theme-repo: [2xx04/lemmy-ui-themes](https://github.com/2xx04/lemmy-ui-themes)
Stylus is pretty neat for rapid mockups. Personally I like the default themes as starter themes, but here's a quick mockup/iteration on minty-bubble (tightening things up a smidge) Nice work pushing things in this area ier.
cross-posted from: https://lemmy.ml/post/219601 > Hi, i wanna create new UI for Lemmy federations, but i have big problems with an understanding of linux system. > > I made a small improved version, but in my opinion it is not convenient and beautiful enough. Nevertheless, I have already made a pull request to add this css to the list of topics. > > Perhaps there are people here who will help me edit the original Lemmy-UI and install it on my VDS so that I can continue development. > > The main changes that I need to make for further development are described here: https://github.com/LemmyNet/lemmy-ui/issues/610 > > Of course, I tried to make a fork and edit it myself, but I just don't understand how to implement this into the docker/ansible installation. I meet a lot of mistakes and misunderstandings of the system design on the way (I'm talking about myself ignorance in this matter). > > That's why I'm looking for outside help, maybe someone has free time to improve Lemmy for the whole community, it would also be cool if you understood any Slavic language.
I see the theme list under settings, but I don't see how to use one besides the built-in ones. Is it possible? (Or can one only use custom themes on their own instance?)
  software: [Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) (firefox addon) theme-repo: [2xx04/lemmy-ui-themes](https://github.com/2xx04/lemmy-ui-themes)