How to override the site-header.hbs file from custom theme?

Development

AI-generated summary

A user, aslangm, is trying to override the site-header.hbs file from a custom theme in Discourse. They attempted to do this by adding a script to their theme’s head_tag.html file, but were unsuccessful.

pfaffman suggested that overriding templates can be fragile and recommended using plugin outlets instead. aslangm explained that they need to keep customizations within the theme, not in plugins.

pfaffman provided a link to a topic on plugin outlet connectors and asked aslangm to explain what they are trying to achieve. aslangm wants to remove the logo display, add a custom button, and display dynamic links above the header.

pfaffman provided links to topics on custom header links, hiding the logo with CSS, and adding a button to the topic header. aslangm asked if it’s possible to customize site-header.hbs through a custom theme.

merefield stated that customizing templates through a theme is not supported and provided a link to a topic on overriding templates from a plugin. merefield also shared a link to a topic on upcoming header changes and preparing themes and plugins.

Heliosurge suggested using a #theme-component for a header menu with dropdown submenu, which may be a more maintainable solution.

1

I’m trying to override site-header.hbs in my custom theme. The path in Discourse to that file is plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs.

I tried to add in my theme’s head_tag.html file:

<script type="text/x-handlebars" data-template-name="javascripts/components/sections/organisms/site-header">
  <StyleguideExample @title="site header - in topic - scrolled">
    <div class="d-header-wrap">
        test
    </div>
  </StyleguideExample>
</script>

I also tried multiple variations:

<script type="text/x-handlebars" data-template-name="components/sections/organisms/site-header">
<div>test</div>
</script>

<script type="text/x-handlebars" data-template-name="javascripts/components/sections/organisms/site-header">
<div>test</div>
</script>

<script type="text/x-handlebars" data-template-name="javascripts/components/site-header">
<div>test</div>
</script>

<script type="text/x-handlebars" data-template-name="javascripts/components/sections/organisms/site-header">
<div>test</div>
</script>

but nothing helps. Could you help me please?

2

You’re trying to do something else for which you think overriding the template is the solution. Overriding templates is fragile and likely to cause issues down the road. What is it that you’re trying to do to the header that you can’t do with a plugin outlet?

3

@pfaffman thanks for your answer.
The main issue is that I need to keep all customizations in the theme and not in plugins. Is there another safer way to achieve this using the custom theme?

4

Plugin outlets are updated in themes. See Using Plugin Outlet Connectors from a Theme or Plugin

Yes. What are you trying to do?

5

@pfaffman I want to remove the logo display, add a custom button. And above the header I want to display dynamic links which will come from a custom component.

6

You shouldn’t need to override the hbs to do any of that.

Maybe have a look at Custom Header Links

You can hide the logo with css.

New Topic Header Button adds a button

See also (deprecated) Plugin outlet locations theme component

7

@pfaffman thanks you. I totally understand your suggestions. However, I would like to know if there is a way to customize files, such as site-header.hbs through a custom theme. Does it make sense?

8

That is not supported. Did you read my link I shared with you after your prior (duplicate?) post?

9

@merefield Yes, I read your article. I just wanted to ensure.
Okay, thanks a lot.

10

This might help (and ensure your customisations stand the test of time)

11

This Customization > Theme component might also be a consideration if your looking for header menu with dropdown submenu

Benefit of using an existing component (especially if official or from one of the partners) is that it will likely maintained with less chances of breakage.