To what extent can you customise the visual elements?

#help

Forem looks sensational. Before I set up our instance, *I'm keen to understand to what extent you can customise the visual elements of Forem.
*

Specifically:

Can you change the font type, size and colour of the text?
Can you change the size of the elements (e.g. make the post boxes or buttons smaller)?
Can you change the layout of Forem pages (e.g. move the topic navigation menu from the left hand column to the right hand column)?

If these customisations are not available 'off the shelf', I'd be interested to know whether - given Forem is open source - it would be possible for me to customise these elements myself (if my engineering skills are up to it) or whether there'd be any meaningful blockers to that.

Top comments (6)

Ella (she/her/elle) • Mar 21 '22

Short answer: yes.

Long answer: You can customize anything you want, but there are a few things you may want to consider before you dig too deep.

Licensing: - Forem software is licensed under AGPL v3. What this means is, you can use the software as-is without really worrying about licensing whatsoever. However, once you start modifying it, things change. As @djuber put it:

if you do make changes to the software for an external site (users other than yourself or your company, open to strangers on the internet), you'll need to provide access to download your modified sources, as well as identify the changes.

Dan also explains how making modifications to the app code can be fussy:

since Forem self-host runs in Podman (as containers), the app code is inside the images, rather than loaded from the server's disk as a volume. To make the changes you want to make, you'll need to build new custom images with your modified code, and install/run those images, rather than Forem's current release. This means you won't get any upstream patches/updates/features without first merging them into your branch, rebuilding the images, and deploying to your site.

@pp wanted to add that this could get messy over time, as you'll need to be sure that any functional updates we add to the Forem code won't conflict with your custom changes. You won't necessarily need to worry about automatic conflicts (because your modifications will then require you to pull in upstream changes manually, which will allow you to review the updated code before deploying it) but there is a sustained commitment to maintaining this for every update (and the way that we're developing Forem right now means there are fairly frequent updates happening).
I would add that, from a community perspective, we optimize our UI/UX for accessibility. This means that we do our best to build a platform that can be used by people across devices and assistive technologies. We would encourage anyone wanting to make UI changes to the platform to consider a11y as part of any planned changes.

Daniel Uber • Mar 21 '22

We were talking about this internally today, and someone reminded me of Andrew Brown's great series of posts about self-hosting.

forem.dev/andrewbrown/how-to-creat... might be a useful guide (the rest of the series he wrote is good, but this specific post covers separating out the template/view changes you'd like to make from the underlying forem code).

Building your own image, and putting it in an accessible repository, like dockerhub or quay.io, are required steps before you call foremimg and foremctl update to load the modified code - that's covered a bit in forem.dev/andrewbrown/how-to-keep-... but the default forem latest image is downloaded there (you'd need to point at your images, instead of forem:latest).

Paddy • Mar 21 '22

Thanks a lot Dan - those posts are very instructive, and we'll dig into them/test as we work out what route to take forward. Really appreciate it.

Paddy • Mar 21 '22

Thanks so much for this Ella - really appreciate such a swift response, and this is super helpful and clear. Some meaningful points to mull over there (mainly around the ongoing maintenance) .Will ponder hard :) Thank you again.