Adding custom html under header (d-header-wrap) instead of main-outlet

Hey everyone! I’m trying to add custom HTML under the header outside of the main-outlet with the wrap class, as I want to avoid centering it to the middle.

Figma has something similar (Example)

2 Likes

Hi @AmericanGuy! :wave:

There’s an excellent theme component that let you see all the available outlets in which you can add custom HTML code:

After you have enabled the theme component in your theme, you can display or hide the outlets’ locations on your website by clicking the outlet icon next to the search icon: outlet icon

You can see that there’s an outlet named “below-site-header” just below the header.

Now, you can put your custom HTML in this outlet by using this code in the Head tab of your theme or component:

<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/my-custom-element">
    test
</script>

(replace my-custom-element with a unique and more descriptive one)

Here’s how it will look (look at the top left of the image):

You can read more about outlets here: Beginner's guide to developing Discourse Themes :magic_wand:

3 Likes

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