Custom HTML on Groups page

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>
1 Like

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

1 Like

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

1 Like

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 :man_facepalming:
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

2 Likes

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>

3 Likes

Yeah, that’s easily the best solution

I’m complicating stuff sometimes :man_facepalming:

2 Likes

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.

1 Like

Or if you want something fancier try

Interesing, in my homepage I have this

image

What page is your homepage?

image
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.