Overriding built-in templates (and stylesheets)


(Ionuț Staicu) #1

Continuing the discussion from How can I customize the registration form?:

Hey guys.

I was thinking about this: it is possible to override a built in template completely?

E.g. Let’s say we have app\assets\javascripts\discourse\templates\modal\login.hbs, which is builtin and I want to have myplugin\templates\modal\login.hbs, that will override the first one on build process.

Same question is also for stylesheets.

Thanks!


Why can't I modify the topic list template?
(Evgeny) #2

I think it can be done in the plugin to duplicate it.


(Rafael dos Santos Silva) #3

Yes, and we have dedicated #howto topics on this: How to customize Discourse templates

This is very easy, and pretty powerful when you want to do something that isn’t possible with just CSS. But, as with any customization, this will bring some maintenance burden. On every update you need to check if the original template had a change and adjust accordingly. So I don’t recommend for this for every user, like the OP from the linked discussion.

CSS is cascading so no need for this, just write your custom CSS and it will override original styles.


(Evgeny) #4

I’m sorry. I have a question about speed. Is there a difference in the performance of these two methods.

1. Option (css/html)

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
  modified contents of list/topic-list-item.raw.hbs file goes here
</script>

2. Option

Replacing the file itself (say in the plugin)

topic-list-item.raw.hbs

Which option works faster, is there any data?


(Rafael dos Santos Silva) #5

Well the HBS override on the header will make first page load 156 bytes heavier :smile:

This is certainly negligible. There are a few WAY more important points in place here.

Like using a customization being a faster workflow, and being available on any hosted service. While the plugin will allow you to apply the same customization to many different instances easily, give you source control, etc.


(Ionuț Staicu) #6

Oh, i totally missed that! Thanks!

Yeah, but sometimes there is a lot to reset to default which I’d rather avoid :smile:


(Sivert) #7

This link isn’t working now. Anyway I tried to duplicate to customize a template and seems not working.
Is it still working or there any another way to customize template?


(Daniela) #8

Take a look here


(Sivert) #9

Thanks for your fast reply.
I have read that thread in details, but still not clear what do I have to do. In that thread, he mentioned about the plugin-outlet, but what I need is to customize entire existing template file such as
/discourse/templates/list/topic-list-item.raw.hbs
Also the template duplication seems not work any more.
Would you explain me about the solution of my problem in details with examples?
Regards


(Evgeny) #10

Do you have a plugin on github that you connect? If we could see what you’re doing, we could tell you in more detail.


(Sivert) #11

Well, I haven’t uploaded my plugin on github yet.
However the following image is what I’m going to customize the topics looks like in my plugin

... image removed

As you can see some of the components in topic item are located in different position than original (the avatar moved from right to left side, and the bookmark icon moved from bottom left to top right and so on)
And I think it’s so difficult to customized them with only css, and should customize the topic-list-item.raw.hbs template. That’s why I tried to duplicate that but it wasn’t work any more.
Please help me if you have some experiences in customizing template with the latest Discourse version (2.2 now)
Regards


(Evgeny) #12

Hmm I put this code:

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

   {{topic-link topic}} 
<br>
   In this place I will add html code and tags to form the appearance.

</script>

In this section: admin/customize/themes

And it works. Try it. If this works for you, you can continue to change the code.

P.S. if I understand correctly that you want to change.


(Sivert) #13

Thanks Evgeny
But is it possible with plugins, not theme? Because my client don’t want to setting on admin panel, he wants to add a plugin simply.
Also please explain me the duplication template is working or not now. I’m waiting an answer of that for long days but nobody give me answer of that. If it’s still working, please explain me in detail how it will work with examples.
Regards


(Evgeny) #14

You have been answered with an example:

Place the plugin on github. Perhaps you do not have a plugin.rb file, I need to see it. Give more details.

In the example above, try to make the entire structure of the plug-in, and not just 1 file. Everything should work. Miracles do not happen here. Maybe you did something wrong.


(Jay Pfaffman) #15

It’s almost always better to use a theme than a plugin. Themes are much easier to install and maintain than plugins and are much less likely to disable your site in an upgrade. If you create a plugin you should airways include a setting on the admin control panel to disable it.