Help theming my community

I want make my own theme for my new community !carmechanicsimulator@piefed.social but I don't have a clue how to do that and this guide: https://codeberg.org/rimu/pyfedi/src/branch/main/docs/developer_docs/09_Theming_Guide.md was a little to advanced for me.

If you can't dumb it down I uderstand, and I'll just leave the theming alone.

6 points · 12 comments · view on lemmy.world

12 Comments

rimu@piefed.social · 2 pts · 6d (5 replies)

At the moment, all you can do it choose from the preset list of themes that PieFed has.

So there's no way to theme a community directly - you need to make a new theme for PieFed as a whole and get it added to the PieFed project. Then you can choose it from the list.

Monkey@piefed.social · 1 pts · 6d (4 replies)

Thanks for the reply

I understood that, but I was asking about how to make a new theme.

rimu@piefed.social · 3 pts · 6d

Copy an existing theme, then rename the files and change the CSS.

one_old_coder@piefed.social · 2 pts · 6d (2 replies)

I was asking about how to make a new theme

Change the CSS, but it's not what you really want, and I'm pretty sure what you want is not possible.

Monkey@piefed.social · 3 pts · 6d (1 reply)

Oops I didn't mean to do that emoji reaction.

one_old_coder@piefed.social · 2 pts · 6d

I'm offended now!

wjs018@piefed.social · 2 pts · 6d (1 reply)

Hey, I wrote that guide! I'll try to help simplify it a bit.

tl;dr of creating a basic theme is that all your css changes live in a styles.css file inside your theme's folder.

Here is what you actually need to do to create a theme:

First, you will need some way to experiment with css yourself to create your theme. That can either be running a development instance where you do your work (relevant guide), or it can be something like running a browser extension that lets you define a custom css to a web page (like stylus that was mentioned in the theming guide).

The actual process of defining what your css should be is kind of tedious. If there is an element on the web page you want to apply styling to, you can right click -> inspect on that element to see the page source for it. That can help inform you about any css classes or an id that might be present on that element to help you write your css selectors. If there is an element where a custom css class would be really helpful, you can either add it yourself if you are going the full local development route by editing the relevant jinja template, or you can ask in the PieFed matrix room for it to get added to the source by somebody else to make your life easier.

I am not really a css expert by any means, but you can reference the css changes that other themes make by browsing the different themes and looking at their styles.css files (link to themes folder).

Once you have a file with all the css changes you want for your theme, the next step would be to get your theme added to the source code. That is where you would reach out to rimu and pass your css to him. He would likely do a QC pass on it before adding it to the main project.

Then, when the next version of PieFed is released and is live, your theme is now part of the project and should be select-able as a community theme! Well done!

Monkey@piefed.social · 2 pts · 6d

Thanks, this is the kind of answer I was looking for.

one_old_coder@piefed.social · 1 pts · 6d (3 replies)

TL;DR: What do you want to do?

Do you know CSS? The guide seems pretty straightforward. Learning CSS would be the first step. Making a theme that is accepted by the developers is the hard part.

You could fix the blurry banner on !carmechanicsimulator@piefed.social, but it's the only leverage you have right now.

Last but not least, do you want to have a theme for yourself? You can do that in the Settings > Additional CSS but most people won't use it. If you want to force it for everyone, you need to create your own instance I guess, but people from another instance won't see it.

Anyway, what you want to do was possible on Reddit, not on Lemmy or Piefed.

Monkey@piefed.social · 1 pts · 6d (2 replies)

I don't know CSS.

one_old_coder@piefed.social · 1 pts · 6d (1 reply)

It's not that hard, try both HTML and CSS, and have fun: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics

Monkey@piefed.social · 1 pts · 6d

Thank, I'll take a look.