# Le composant de thème d'en-tête de marque casse la mise en page sur les pages statiques et no\_ember

**URL:** https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544
**Category:** Development
**Created:** [Janvier 15, 2019, 12:56 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:** 1
**Showing post:** 4

<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: [Janvier 15, 2019, 6:40 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.

---

_[View the full topic](https://meta.discourse.org/t/brand-header-theme-component-breaks-page-layout-on-static-and-no-ember-pages/106544)._