How to reopen header-contents widget?

[Deomid_Fedorov]

Hello! I am a beginer, so I hope for your help. I want to change the content in …. When I open the source files, I see that the “header-content” widget says:

createWidget("header-contents", {
   tagName: "div.contents.clearfix",
   template:hbs`
     {{home-logo attrs=attrs}}
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}
     {{/if}}
     <div class="panel clearfix" role="navigation">{{yield}}</div>
   `,
});

I write in common/head_tag.html

<script type="text/discourse-plugin" version="0.8.13">
     api.reopenWidget("header-contents", {
tagName: "div.contents.clearfix",
template:hbs`
<h1>Hello! Help Me Please!!!</h1>
<div class="panel clearfix" role="navigation">{{yield}}</div>
`,
});
</script>

This does not work. Help me please.

[Johani (Joe)]

Hey, @Deomid_Fedorov, welcome to Meta

If you check the browser console, you’ll see something like this

ReferenceError: hbs is not defined

but even if you fix that, you would still have problems getting this to work because templates are supposed to be precompiled on the server, not the client-side.

We many ways to customize the header. If you let me know what you’re trying to do, I can probably share a way for you to achieve the result you want.

[Deomid_Fedorov]

Greetings, Joe! Thank you very much for your responsiveness. I want to say that I’m starting to like Discourse very much, but there are some difficulties that I haven’t managed to cope with yet. In general, I have one big wish: I want to be able to embed my html code wherever I want, in any tag, and I want to be able to remove some elements that I consider superfluous.

I read the post Developer’s guide to Discourse Themes
However, these instructions were not enough for me to solve my problems.

Let’s move on to specific examples:

1. How do I embed my code in the <header> tag between the <div class="title"> and <div class="navigation"> blocks?
2. How do I prevent the generation of the <ul id="navigation-bar"> element?

I want to warn you that my knowledge of English is not perfect, so there may be errors in the text. I hope for understanding.

[Johani (Joe)]

No worries, we can figure this out.

I know what you’re referring to here.

@Deomid_Fedorov

<div class="title">

but I’m not sure which element you mean here

@Deomid_Fedorov

<div class="navigation">

Can you add a screenshot of where you want to add new elements?

@Deomid_Fedorov

How do I prevent the generation of the <ul id="navigation-bar"> element?

If your site doesn’t need that element, you can hide it with CSS. So, something like this.

#navigation-bar {
  display: none;
}

That said, that element gives users an easy way to navigate between the different filters for topic lists, and I don’t recommend removing it - especially on mobile.

However, you know your community more than anyone. So, if it works for you, then… great

[Deomid_Fedorov]

That’s what I mean. I need to place my custom block where I pointed with the arrow in the screenshot.
I’m uploading another screenshot so you can better understand what result I want to get:

[Deomid_Fedorov]

Thank you again for your responsiveness. I have quite good css skills. I know that by writing display: none I can hide the element. But I would like to have a stronger experience. I would like to be able to manage templates and widgets like a true professional. I guess there is a way to do it more correctly. For example, rewrite the template or something else.