Customizing the groups page

Support
1

I would like to customize the groups page, at least to add a paragraph of text above the group list.
As far as I understand, ultimately I’d have to create a theme component.
But is it possible to do something without resorting to this?

I found Custom HTML on Groups page but the paths it refers must be obsolete:

  • Customize > </head>
  • After Header section

Then I thought of using the Versatile Banner component but it’s already in use in the other pages of my forum. Is it possible to use another instance of the same plugin with a different config so that it displays only on /g and with another content? If so, how?

2 Likes
2

The discussion on that page eventually outlined a solution, but it might be a little hard to pull together, and Discourse admin navigation has probably changed a bit.

This kind of thing is done by creating a simple Theme Component:

  • Go to Admin → Appearance → Themes & components
  • Click the Install button, and in the dialog choose “+ Create New”
  • Name it something like “Groups page intro” and leave the Type selector on Component
  • Click “Create”
  • Select your theme(s) and click the Edit Code button.

On the CSS tab, paste:

.welcome-message {
    display:none;
}
.groups-page .welcome-message {
    display:block;
    margin: 20px;
}

In the After Header tab, paste:

<div class="welcome-message">Put your welcome info and instructions here</div>

Save it, and refresh your Groups page – you should see your new text above the normal page contents.

2 Likes
3

I didn’t think they were actually creating a theme component on that thread, thanks a lot, much easier than I thought.

If you have any insight about the “several instances of a same component” part, feel free :slight_smile:

4

Yeah, that topic is a few years old and there might have been a different way to get at things, but the strategy was there.

As to a second instance of a component: I imagine someone knowledgable could fork the code and modify it to use a separate set of config settings and variables, etc. But that could be a lot of work — and you’d have an oddball unsupported component that won’t get updates. :grimacing: