# Custom complex HTML code in the Discourse Header

**URL:** https://meta.discourse.org/t/custom-complex-html-code-in-the-discourse-header/113344
**Category:** Support
**Created:** [April 3, 2019, 1:25pm UTC](https://meta.discourse.org/t/custom-complex-html-code-in-the-discourse-header/113344 "2019-04-03T13:25:36Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [April 3, 2019, 1:25pm UTC](https://meta.discourse.org/t/custom-complex-html-code-in-the-discourse-header/113344/1 "2019-04-03T13:25:37Z")

</div>

Hey Discourse Community!

Finally I have more time and working on a big revamp of my [Dark Theme](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175) in combination with a Dark/Light Switcher, which become a bit popular.

This time I wanted to utilize the Discourse Header and found couple of great examples how to add links in there.

However, my question is, how well can I utilize this “helper.h” function with other HTML code than an `<a>` tag?

I want this for example in the Discourse Header:

https://codepen.io/anon/embed/preview/KYdbNE?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=KYdbNE

```plaintext
<div class="toggle_switch">
  <input type="checkbox" class="switch_3">
   <svg class="checkbox" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 168 80">
      <path class="outer-ring" d="M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z" fill="none" stroke="#233043" stroke-width="3" stroke-linecap="square" stroke-miterlimit="3"/>
      <path class="is_checked" d="M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z"/>
      <path class="is_unchecked" d="M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z"/>
   </svg>
</div>

```

So I tried something like this

```plaintext
api.decorateWidget('header-buttons:before', helper => {
    const showExtraInfo = helper.attrs.topic;
    
    if(!showExtraInfo) {

        return helper.h('div.toggle_switch', [
            helper.h('input.switch_3', [
                type:'checkbox'
            ]),
            helper.h('svg.checkbox', [
                xmlns:'http://www.w3.org/2000/svg',
                style:'isolation:isolate',
                viewBox:'0 0 168 80',
                helper.h('path.outer-ring', {
                    d:'M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z', 
                    fill:'none',
                    stroke:'#233043',
                    stroke-width:'3',
                    stroke-linecap:'square',
                    stroke-miterlimit:'3'
                }),
                helper.h('path.is_checked', {
                    d:'M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z'
                }),
                helper.h('path.is_unchecked', {
                    d:'M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z' 
                })
            ])
        ]);

    }
});

```

But I get an error on the “d:‘xxx’” part I think.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/6/16a791243f73f9c0452900b97e9cb6e6b0584f54.png)

**TL;DR** : Is the helper.h function only accepting stuff like inputs and `<a>` tags or how can I cascade more complex HTML tags?

Any help is appreciated! 🙂

---

<div class="post-metadata">

### Author: ![B-iggy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/b-iggy/32/201234_2.png) [@B-iggy](https://meta.discourse.org/u/B-iggy)
#### Post date: [April 4, 2019, 1:22pm UTC](https://meta.discourse.org/t/custom-complex-html-code-in-the-discourse-header/113344/2 "2019-04-04T13:22:07Z")

</div>

After a lot of search crawling I found the solution. Thanks to @vinothkannans 🙂  
That post helped me!

> [@Widget Helper stripping attributes?](https://meta.discourse.org/t/widget-helper-stripping-attributes/68014/2):
>
> [https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L93-L104](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L93-L104) As per above code, I guess it should be like below decorateWidget('header-icons:before', helper =\> { return h('li.header-dropdown-toggle', [ h('a.icon.btn-flat', { 'id': 'my id', 'href': 'http://example.com', 'title': 'my title', 'attributes': { 'aria-label': 'my label', …

Somehow the svg didn’t work overall, but I just used a less hipster variant of a checkbox switch 😉

Check out the totally revamped Alien Theme here:

> [@Alien Night Theme - A free Dark Theme for Discourse](https://meta.discourse.org/t/alien-night-theme-a-free-dark-theme-for-discourse/54175):
>
> discourse2Summary Discourse Alien Night is a dark focused clean theme with the Dark/Light toggle component in mind to enhance your forum!eyeglassesPreview [Preview on theme-creator.discourse.org](https://theme-creator.discourse.org/theme/B-iggy/alien-night-theme)hammer_and_wrenchRepository Link [GitHub - B-iggy/alien-night-discourse-dark-theme: A night friendly dark Discourse theme - dark/light switcher inclusive · GitHub](https://github.com/B-iggy/alien-night-discourse-dark-theme)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Note: with the release 4.0.0 …

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [May 4, 2019, 1:22pm UTC](https://meta.discourse.org/t/custom-complex-html-code-in-the-discourse-header/113344/3 "2019-05-04T13:22:12Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.