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 ( Horbiter Cafè )
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.