# Brand header theme component breaks page layout on static and no\_ember pages

**URL:** https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544
**Category:** Development
**Created:** [15.Январь.2019 00:56:25 UTC](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544 "2019-01-15T00:56:25Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![amotl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/amotl/32/109873_2.png) [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [15.Январь.2019 00:56:26 UTC](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544/1 "2019-01-15T00:56:26Z")

</div>

Hi there,

### Introduction

We rediscovered an issue with the [Brand Header](https://meta.discourse.org/t/brand-header-theme-component/77977) which breaks the rendering on 404 pages and other pages without ember, already collected some background information about it and thought it would be a good idea to bring this up as a dedicated topic.

The issue was first brought up by @davisonio at [brand header component breaks rendering on confirmation pages](https://meta.discourse.org/t/brand-header-theme-component/77977/61) and [JavaScript not loading on certain pages](https://meta.discourse.org/t/javascript-not-loading-on-certain-pages/92297).

### Discussion

@sam and @vinothkannans already started a discussion about how to improve the plugin:

> [@Brand Header](https://meta.discourse.org/t/brand-header/77977/64):
>
> I think we should probably spend some time and rewrite this so it no longer leans on the plugin interface and works on 404 pages and other pages without ember.

> [@Brand Header](https://meta.discourse.org/t/brand-header/77977/65):
>
> Sure, I will try to improve it to support no\_ember pages too. But in that case somehow we should have access to the theme\_settings.

but sure there are many many things going on so this got lost. That’s why I’m picking this up again, maybe it could attract others working on it. If I will find some time, I would also like to have a look at the details.

Thanks for listening!

Cheers,  
Andreas.

---

<div class="post-metadata">

### Author: ![amotl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/amotl/32/109873_2.png) [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [15.Январь.2019 00:56:54 UTC](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544/2 "2019-01-15T00:56:54Z")

</div>

## Screenshots

In the wild, this issue looks like…

### Example 1: After someone deletes their account.

 ![](https://global.discourse-cdn.com/meta/original/3X/1/8/18ba5152f97f0a81735e8ba67b29522bbe940cc1.png)

– `https://meta.discourse.org/t/brand-header-theme-component/77977/61`

### Example 2: When someone activates their account.

 ![](https://global.discourse-cdn.com/meta/original/3X/4/5/4596d52f8bbf41b6ceb4859f9191408aeb3b62a1.png)

– `https://meta.discourse.org/t/daemonite-material-theme/64521/60`

---

<div class="post-metadata">

### Author: ![amotl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/amotl/32/109873_2.png) [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [15.Январь.2019 01:04:56 UTC](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544/3 "2019-01-15T01:04:56Z")

</div>

Hi there,

@vinothkannans, the main author of the brand header theme component is already aware of the problem:

> [@TypeError: Discourse.\_registerPluginCode is not a function](https://meta.discourse.org/t/typeerror-discourse-registerplugincode-is-not-a-function/88572/4):
>
> > I think we should probably spend some time and rewrite this so it no longer leans on the plugin interface and works on 404 pages and other pages without ember.
> 
> I think this is very related to the above. It’s already in my list for long time. I will improve it soon. Thanks for the report.

Coming from there, we discovered these guys, perfectly complementing what we are up to here:

> [@JavaScript not loading on certain pages](https://meta.discourse.org/t/javascript-not-loading-on-certain-pages/92297):
>
> An example is when I visit a 404 page and the custom brand header child theme is installed. The theme component works on most pages but on this page it fails with references errors After closer inspection it seems that no discourse JavaScript code is being generated on some pages e.g. 404 pages. The page in question is [https://eurodiscover.eu/404](https://eurodiscover.eu/404) if anyone has time for a browse.

[https://github.com/discourse/discourse/pull/6098](https://github.com/discourse/discourse/pull/6098)

With kind regards,  
Andreas.

---

<div class="post-metadata">

### Author: ![amotl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/amotl/32/109873_2.png) [@amotl](https://meta.discourse.org/u/amotl)
#### Post date: [15.Январь.2019 06:40:14 UTC](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544/4 "2019-01-15T06:40:14Z")

</div>

# Workaround

While digging for the root cause, we have been able to spot something we filed at [Almost void Discourse object instance will sneak through some safeguards](https://meta.discourse.org/t/almost-void-discourse-object-instance-will-sneak-through-some-safeguards/106553) and finally have been able to produce a workaround which works for us.

## Mitigate the runtime error

One of the symptoms of this issue was the error message

```
TypeError: Discourse._registerPluginCode is not a function

```

revealing something along the way did not get initialized properly.

By following a [specific hint found on GitHub](https://github.com/discourse/discourse/pull/6098#issuecomment-405487611) from @sam (thanks again!), we have been able to work around the core problem which made Discourse plugin components croak on `static` and `no_ember` pages in general:

> [@TypeError: Discourse.\_registerPluginCode is not a function](https://meta.discourse.org/t/typeerror-discourse-registerplugincode-is-not-a-function/88572/7):
>
> By pulling together some [educated guessing](https://www.destroyallsoftware.com/talks/wat), improved [duck typing](https://en.wikipedia.org/wiki/Duck_typing) and a bit of [monkey patching](https://en.wikipedia.org/wiki/Monkey_patching) as @sam already might have suggested by his comment referenced above (thanks for the valuable hint!), we have been able to find the root cause and to provide a drop-in workaround. Root cause The root cause must be elsewhere, we just added an appropriate topic outlining our observations. Workaround When running this snippet in the Header phase (\</head\> will be too early!) of a theme component, it make…

## Learn about the brand header theme component

Before going to the next step, let’s investigate how the [Brand Header](https://meta.discourse.org/t/brand-header-theme-component/77977) manifests itself into the DOM. While most of its CSS (see [common.scss](https://github.com/discourse/discourse-brand-header/blob/47ed15ae/common/common.scss)) roams around with the `.b-header` class, there are two single CSS rules which just move the regular Discourse header a few pixels down, which we identified as a kind of an entrypoint regarding the CSS domain:

> <https://github.com/discourse/discourse-brand-header/blob/47ed15ae/common/common.scss#L90-L96>

## Thoughts

The problem looked like it was easy to tackle now.

By piggybacking on the workaround unlocked before, we would just visually toggle off the brand theme header by resetting the css property `margin-top` of the regular Discourse header through its `.d-header` class to its initial value, right? Challenge accepted ;].

## That’s it

```plaintext
<!--
Work around `TypeError: Discourse._registerPluginCode is not a function`, see also:
- https://meta.discourse.org/t/typeerror-discourse-registerplugincode-is-not-a-function/88572
- https://meta.discourse.org/t/javascript-not-loading-on-certain-pages/92297

This resets the css property "margin-top" on the "d-header" class
to work around an obstacle with the banner header theme component.
-->
<script language="javascript">
    if (!('Discourse' in window)) {
        window.Discourse = {};
    }
    if ('Discourse' in window && !('_registerPluginCode' in window.Discourse)) {
        window.Discourse._registerPluginCode = function() {
            $(document).ready(function() {
                $('.d-header').css('margin-top', 'initial');
            });
        };
    }
</script>

```

### Important note

Amending the `margin-top` css property will **only work in the `Header` phase** (or maybe later) of a theme component and **after `document.ready()` has been signaled**.

So, please run this from inside the **`Header` phase** or later (`</head>` will be too early!) of a theme component. Otherwise, it will not work.

Repeat ;].

* * *

Hope this helps.

---

<div class="post-metadata">

### Author: ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [19.Январь.2019 12:30:00 UTC](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544/5 "2019-01-19T12:30:00Z")

</div>

This topic was automatically closed after 3 days. New replies are no longer allowed.