Is there a theming 'map'? (An easy way to find plugin-outlets etc)

[AstonJ]

Thanks for the replies both

@merefield

My advice is always to start simple. Work on a simple requirement first and work out how to do it. Then move on to the next.

That’s what I thought I was doing (I don’t think you can get much simpler than editing the title tags). On other forum software I would just open the file/template for the ‘showthread’ page and edit it, it would literally take less than a minute and I would love Discourse theming to be this easy (however it is possible that my not being familiar with Discourse theming right now is why I’m feeling lost).

@merefield

As far as Theme-ing goes, I would say that most of that will be modifications to CSS. Use the usual resources . Where it’s not you will need to consider modifying templates with jQuery, or at a push overriding templates. Build your own components or widgets for novel use cases and attach them.

That’s what I think I need for all of the items in the first post because they need to modify existing content (rather than append or prepend in a specific place which the plugin-outlets seem to be geared towards).

@merefield

The source code is always your friend, look through the GitHub directory structure for discourse/discourse and you will find the different bits of the app laid out. The templates are the easier side to understand I think. If you are not familiar with the Ember directory structure, now is the time to get familiar.

I think that is quite possibly the issue here. I don’t know Ember and maybe that is what’s making this feel somewhat alien. I would love for something like Plugin outlet locations theme component but for templates and everything else that can be customised - that would be a huge help.

@awesomerobot

Yes, definitely. I’ve been building themes for almost as long as Discourse has existed, and I’m constantly referencing the source in a separate window.

How do you find what you need though Kris?

@awesomerobot

Sometimes it’s not immediately clear where a template is, because maybe it’s a component that gets nested within another template… if I can’t remember what I’ll end up doing is searching the source for a specific piece of markup…

So for example if I’m looking to add something to the about page… I can see that the body of the about page has a unique class about-page , so I’ll start searching for about and body-page (which is another class on the page).

Ah thanks, that’s really good advice!

@awesomerobot

I think this requires a plugin, which is outside of my expertise… maybe someone else can be more helpful

Are you sure Kris? I thought plugins (or plugin-outlets) only let you add something in the place of that particular outlet. Whereas to change the title tag format I would probably need to open the exiting template (or component or widget) and copy/edit that. At least that’s my understanding after having read the two guides on plugins and theming.

@awesomerobot

There are different templates for the different page layouts, but assuming you’re talking about one of the “Boxes with…” layouts

discourse/categories-boxes.hbs at master · discourse/discourse · GitHub

Thank you! That looks like the one I need

@awesomerobot

discourse/about.hbs at master · discourse/discourse · GitHub

Thanks again, haha! Both of those look relatively straightforward to find now given their naming and you pointing them out. I think being stumped on changing the title tags may have been a factor

At the moment it feels like I am missing something, and as @merefield pointed out it may be my unfamiliarity with Ember. Does anyone know of any YouTube vids that quickly walk you through it? Perhaps your or @merefield could do one?