Add HTML above

Product Support

AI-generated summary

The discussion is about adding HTML above the categories/posts area on the home page. good_guy is looking for a way to do this and th21 suggests using a plugin outlet. NateDhaliwal provides an example of how to use the before-topic-list outlet with a script tag and Handlebars template.

However, good_guy has trouble getting it to work and NateDhaliwal clarifies that the text/x-handlebars type is required and the component name should be included. good_guy is looking to add the HTML above everything but not above the navbar on all pages and NateDhaliwal suggests using the above-main-container outlet.

After some back and forth, NateDhaliwal reiterates the importance of using the correct text/x-handlebars type and including the component name. Meanwhile, merefield introduces the Discourse Developer Toolbar as a potentially useful tool.

1

1111Ă—160 10.1 KB

Is there any way I can add HTML above this area (home page above categories/posts)?

2

I think yes

we have plugin outlet available here

3

You could do something like this:

<script type="text/x-handlebars" data-template-name="/connectors/before-topic-list/NameOfThing">
  <div class="className">
    <p>Hi there!</p>
  </div>
</script>

This renders the text in the before-topic-list outlet.
You can change the outlet and component names in data-template-name.

Be sure to put this in Customize > CSS > New component > Edit CSS/HTML > Head.

4

Hey, that didn’t work, nothing appeared, could you double check the code? Is NameOfThing supposed to be there?

5

Sorry, it’s supposed to be text/x-handlebars instead. I have edited my post.

Yes, that is the name of the component. You can change it to anything you want.

Also, you may want to use the above-main-containter outlet.

6

What’s the directory for above-main-containter, does it go in type or data-template-name?

I’m specifically looking to make it above everything but not above the navbar (for all pages)

A webpage displaying categories like News & Announcements and General for social media updates. (Captioned by AI)
A webpage displaying categories like News & Announcements and General for social media updates. (Captioned by AI)485Ă—422 24.4 KB

7

Just replace before-topic-list with above-main-container. It would be below the header.
The above-main-container outlet will display on all pages.
Also, I made a typo: container not containter.

8 
<script type="x-handlebars" data-template-name="/connectors/above-main-container">
    <p>Hi there!</p>
</script>

With and without NameOfThing it doesn’t show still, I am placing it in Head

9

It seems that you are using x-handlebars, but

It also must have the component name after the outlet, or it will not work.

10

You can use this now:

(Just to add, thank you to @RGJ for creating and supporting that component for so long, it has been very useful :folded_hands:)