Custom CSS/HTML in non-default theme (without component)

UX
1

The default theme allows for custom CSS/HTML in its settings.

As an experiment, I wanted to hide the timeline, great suggestion for doing this using CSS was made (different topic). The suggestion was to implement the 4 lines as a theme component. Not difficult, but I thought the custom CSS option in the default theme might be easier.

I switched my theme and inserted the 4 lines as custom CSS. Indeed this worked perfectly.

This makes me wonder why this custom CSS/HTML is available (only) here. Wouldn’t it make more sense to have this as a general setting?

There is probably also a use for custom CSS only in a theme, but a general one would also be useful right?

EDIT: Just adding a link here to the main topic discussing custom CSS, which described the above “Default” theme approach: Make CSS changes on Your Site

2

A component connected to every themes is that kind general settings. What would be different if you had another tab, section or ”official” component for that?

1 Like
3

Well, a component means you have to edit the component, then update the component in your Discourse instance.

To be clear, the themes and components workflow is absolutely awesome. I just think it might be useful to edit little CSS things more directly / ad-hoc.

1 Like
4

Eh… no you don’t. Changes are on right away after saving.

First you were talking about general one, now you are editing directly just one theme. Well, if you are making changes just for one theme it would be nice if there would be an option per every theme. But when a CSS changes are in one component you can easily and fast disable it when (not if…) things goes to south because of bug, conflicts, upgrades…

5

For tryouts perhaps and if it doesn’t matter your users will see those tries too. But what if you like to keep that change and you have another theme to choose than just default one? Then you have to do another round :wink:

1 Like
6

Indeed, this was precisely why I was wondering about a general custom CSS option that works across themes.

7

And you have: the component that holds CSS changes.

8

I’m new so I’m surely missing something.

If I write my own component, I would put it on GitHub. Then if I have any changes to make, I would make them on GitHub, then as Discourse to update the component.

Is that not the correct (or easiest) way?

2 Likes
9

Why would you do that? Unless you are planning to share it. But no big deal — then you click update button of your component.

I’m a bit lost now. How would you put your CSS changes any easier into some global CSS-file (that would be a component too)?. What if you like to change theme Air, how did you thing you would deliver those changes?

1 Like
10

Regardless of whether you share a component, hosting it on GitHub is often a good idea so you can manage its evolution and provides a good backup too.

2 Likes
11

Maybe it easier if I give a concrete example.

I want to hide the timeline (just as an experiment), I had a kind help from @merefield to do using CSS:

.topic-navigation {
  display: none
}

For this experiment, I want to do this globally. It’s an experiment, so I don’t need to do this in the most structural / replicable / technically-correct way.

A component is not a lot of trouble. But what is even less trouble, is the Edit CSS setting in the default theme. I tried it and this works perfectly.

However, I want to see what my community members think, but I use the theme zeronoise, which does not have the Edit CSS setting.

My question now is, wouldn’t it be useful if Discourse had a way to tinker a bit with CSS, the way it is possible if you set the theme Default.

To be clear, I understand there is a usecase for Edit CSS that is theme specific, so it would be in addition to the Edit CSS in Default, not instead of.

I hope that explains a bit what I’m trying to get at. Let me know if I got any technical elements wrong and I will edit accordingly.

And thanks all of sharing your thoughts. :pray:

12

In the spirit of scratch your own itch I am thinking of taking the Edit CSS/HTML code from the default theme and packaging it in a separate theme component or plugin (keep the GPL-2 of course).

I guess a component would be easiest.

13

Now I’m totally lost.

You have to use a separate selfmade component for that. And that component is your global settings in the meaning you will enable it in every themes that uses it.

14

with basic level CSS changes? Isn’t that a bit overkill, is it?

15

This is indeed the reason I started this entire thread.

How would you suggest making basic-level CSS changes?

16

Personal preference.

There is no version control in the admin menu.

It’s also a way of improving your knowledge.

2 Likes
17

Hey Bastiaan :slight_smile:

You can’t edit the HTML and CSS of an “external” theme/component directly because changes would be overwritten when the theme/component is updated. It was still possible about two or three years ago, but this feature was removed.

You can create a local new component directly into Discourse’s interface to override the CSS of your existing theme (from the component’s CSS tab), or create a new component as a GitHub project that you will update through the component page (“update” button each time the repo is modified).

Do I understand well what you want to do and does this reply to your questions?

2 Likes
18

Hi @Canapin awesome! thank you.:pray: This is precisely what I was looking for.

This probably also explains the miscommunication with @Jagster, there is a direct way of doing what I was trying to do, but I wasn’t aware of this creating a new component directly from the interface (which allows custom CSS).

Maybe it would be useful to add this to the great guides on themes and/or CSS by @Johani

3 Likes