How to change the .d-header template


Hi, the default Discourse header contains a title and the panel with login/user links etc. We’ve been injecting some extra, external links inside using an inline script in our theme. It’s dirty and has been working very well, until 1.6.0 beta 2.

<header class="d-header">title and panel are here</header>

Now, when we inject the same links, we see the following. Is there a way to overwrite this Ember template or a third approach, we can take?

To clarify, injecting the links isn’t the issue, the issue is that it somehow breaks the Discourse header, none of the panels open any more.

(cpradio) #2

It looks like you upgraded to the experimental new header. It was advised to not do that unless you were willing to experiment…

You will probably have to wait to find out what the new way is to add items to the header.

Header layout with broke with last discourse (9fdea6c)
(Robin Ward) #3

Can you show me an example of how you were inserting stuff into the header? It’s hard to help with a fix otherwise :slight_smile:


Thanks for clarifying :slight_smile:

Of course.

var $nav = $('.OurCustomNavigation');
var $discourseHeaderTitle = $('.d-header .title');

So, when we append of .d-header everything is good. But the idea was to have it inside as it makes styling easier (also because d.-header already has some javascript behaviour with the docking etc.)

(Robin Ward) #5

So your custom navigation is in another hidden HTML element somewhere on the page? And you copy it in? Where were you doing this to make sure it ended up in there when the header was rerendered?


Exactly. That, and the fact that I don’t know how (if) it’s possible to overwrite the header template without getting into trouble with new Discourse updates.

We wanted to put it inside to make sure it follows the default header instead of replicating it’s behaviour in another element.

(Robin Ward) #7

Where does that code get executed though? That’s what I’m curious about. Because the header is frequently rerendered and your code would need to execute when that happens.