Custom CSS/HTML

I was bummed out when (I think it was last year) the Custom CSS/HTML fields were removed from all but the default theme.

A workaround I’ve discovered is to make modifications to the default theme and then use the Export button…

Then, unzip the file, and change the settings in about.json

  • give it a new name, and
  • change the theme component to true

Save that file, and create a new .zip which includes, for example…

Then, if you upload that .zip file as a theme or a theme component, you will get the Custom CSS/HTML fields that were removed from all but the default theme.

2 Likes

Theme development is not my forte, but could you not just create a new theme on your site to achieve a similar thing? It’s only the remote themes that don’t have the edit css/html button.

3 Likes

@JammyDodger I hope (and it seems) that you are correct about that!

1 Like

Yep that option doesn’t appear when the Theme is remote, as you are expected to update the remote repo.

Here, the Default Theme is not cloned from a repo, that’s why that option appears. The option will appear for any local Theme.

When working with Remote Themes, one option is just to fork it and make your amendments to your fork.

It is in any case better practice to use source control to manage your Theme.

4 Likes

What does that mean?

1 Like

In order to manage the evolution of your Theme, just as with any code, it is good to use a system like Git(Hub) to control change.

This will allow you to track how the Theme evolves, easily roll back changes that don’t work or cause unexpected issues, mitigate loss of code (e.g. local corruption, loss of back-up). On the more advanced end, you can then also consider publishing your Theme to third parties and manage contribution via PR.

6 Likes

Thank you so much @merefield for clarifying that!

In this instance, I’m just wanting only to make super-minor CSS tweaks, not to establish or distribute a new theme.

For some unknown reason, the whole Git thing just scrambled-eggs my brain with a very unfortunate barrier (which I’m working hard to overcome!)

There might be others here in this community like me who (currently in their learning process) can only edit a certain amount of CSS which is only accessible through the Custom CSS/HTML settings in the default theme.

3 Likes

Would creating a theme component and attaching it to the theme(s) you want to tweak work for what you need?

2 Likes

@JammyDodger definitely. Making it as a Theme Component seems best as then I can apply it to any theme(s)!

3 Likes

This information might be useful to you:

So your approach is a good one, in that a Theme Component should always be able to override what you have in a Theme.

3 Likes

Sorry, just to add you could consider this additional extra refinement:

  • keep the main Theme as is
  • only keep the changes in a Theme Component and delete all the other code that already exists in the main Theme.
2 Likes

Yes that makes perfect sense, thank you!

Also check out Install the Discourse Theme CLI console app to help you build themes

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.