The discussion revolves around adding custom HTML to the Groups page in Discourse. Fausto_Dassenno wants to add a welcome/explanation HTML to the groups’ page, but only on the main group listing page.
Steven suggests using a plugin outlet, but later realizes it doesn’t work for the group main page. He provides an alternative solution using CSS to add a text banner, but it’s not ideal.
smrtey offers a better solution, which involves adding a div to the After Header section and using CSS to display it only on the groups page. This solution works for Fausto_Dassenno.
The discussion also touches on how to achieve the same result but only on the homepage. Canapin suggests checking the class used in the body element of the homepage and using that class to target the welcome message. Fausto_Dassenno shares a screenshot of his homepage, and Canapin advises him to use the developer tools to inspect the HTML code and find the correct classes.
In the end, Canapin suggests using .navigation-categories .welcome-message to target the welcome message on the homepage.
Hi all,
I am designing a community where every user needs to ask permission to enter a group and every group is controlling the access to a category.
I would like to add a welcome / explanation HTML to the groups’ page ( https://community.horbitercafe.com/g )
What’s the easiest way to achieve this?
Thx
F.
Not sure if this is the right plugin outlet but you can try this
In Customize > </head>
Add this
<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">
your html here
</script>
How can I limit this to the /g page only?
Yes, that does indeed allow HTML to be “injected” above the Group Name and other information on pages at, e.g., https://discourse.example.org/g/foo. Thanks for sharing.
@Fausto_Dassenno are you looking at something for the main group listing page, but not the individual group detail page?
Correct, I want to add HTML in the main group listing page only.
Add a class to your html code, like gr-horbiter
<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">
<div class="gr-horbiter">
your html code
</div>
</script>
And add this css in common
.gr-horbiter {
display: none;
}
body.groups-page .gr-horbiter {
display: block;
}
I didn’t test the code, but it should work
Thanks @Steven, does the script part go in the html section of a component? Or do I need to edit the html directly ?
Sorry I’m not sure I understand the question, english is not my first language, I can misunderstand a few things
You copy the script and html in the </head> section and add your welcome message, with some div or span if you want to customize it, and it should be good
Thanks @Steven I had it working.
Only issue is that I need this added in the group index page and not in the group detail page.
At least now I got the logic behind this. I’ll research more.
I cannot find any connector in the group index page.
I should have tested, I now see what’s the issue 
The plugin outlet doesn’t work for the group main page
I still have a way to add a banner but it’s probably not the cleanest way possible, Discourse staff might have a better way to do it.
This css code will allow you to add some text and stylind, but you’ll only have this class and I don’t think there’s a way to add a link in the text banner
body.groups-page .groups-header::before {
content: "Your text";
width: 100%;
margin: 0 0 15px 0;
}
You can add background, border, etc to customize the banner in this class to create the banner
Thanks,
I cannot achieve my goal with this. What I was trying to do was to create a landing page for groups so that new users could have requested access to the groups they wanted. In order to do this I wanted to give some explanations with some html.
How hard is to request a new outlet name in the groups index page?
If all you want is something like this it’s easy
.welcome-message {
display:none;
}
.groups-page .welcome-message {
display:block;
margin: 20px;
}
Then add this to the After Header section
<div class="welcome-message">Put your welcome info and instructions here</div>
Yeah, that’s easily the best solution
I’m complicating stuff sometimes
Great, this works!
What if I want to do the same but only showing only on homepage. What should I replace .groups-page with?
Look at the class used in body in your html homepage.
For example here on meta.discourse.org:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">
The class used is navigation-topics.
Or if you want something fancier try
Interesing, in my homepage I have this
What page is your homepage?
Is this what you are asking?
I see what’s the issue is for your empty body class.
Instead of looking at the page source, press F12 to show up the chrome/firefox/edge development tools and go to the “element” tab.
Look at the HTML code from here and your <body> will show the right classes.