Custom HTML on Groups page

feature
#3

How can I limit this to the /g page only?

#4

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?

#5

Correct, I want to add HTML in the main group listing page only.

#6

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
#7

Thanks @Steven, does the script part go in the html section of a component? Or do I need to edit the html directly ?

#8

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
#9

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.

#10

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
#11

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?

#12

If all you want is something like this it’s easy

image
image1127×494 22.4 KB 

.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
#13

Yeah, that’s easily the best solution

I’m complicating stuff sometimes :man_facepalming:

2 Likes
#14

Great, this works!
What if I want to do the same but only showing only on homepage. What should I replace .groups-page with?

#15

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
#16

Or if you want something fancier try

#17

Interesing, in my homepage I have this

image

#18

What page is your homepage?

#19

image
Is this what you are asking?

#20

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.

#21

you are absolutely right!

image
image774×98 18.2 KB

#22

Then you can use .navigation-categories .welcome-message I guess.

1 Like