What's the best way to display an arbitrary button in a post?

support
1

For the occasional post in our forum, I’d like to create a button that would, for instance, make it obvious what to click to register for a race, sign up to volunteer, or donate for a fundraising campaign. Just something that looks roughly like one of these:

Arc 2023-07-16 at 13.53.38@2x
Arc 2023-07-16 at 13.53.38@2x750×124 8.9 KB

If Discourse would take it (which it doesn’t seem to), I’d use something like this code.

<span style="display: inline-block; background-color: #7b38d8; padding: 20px; width: 200px; color: #ffffff; text-align: center;">
  Button
</span>

Is there a way to do something like this on an ad hoc, individual post basis?

Thank you!

1 Like
2

Would this work for you?

Button!

[<kbd>Button!</kbd>](google.com)

3 Likes
3

Thanks! It’s certainly on the right track, though I was hoping for something I could tweak with CSS so the styles would be familiar to our users from other stuff we do.

1 Like
4

In that case, I believe this is what you need:

8 Likes
5

That’s exactly what I wanted, thank you! I can take it from here…

2 Likes
6

There’s a whole tutorial about how to customize posts with custom content like buttons:

1 Like
7

I saw that—thank you for writing it!

One question that’s come up—what happens with custom elements in email notifications?

8

Great question :slight_smile:

image

Displays as

image

I guess that the HTML generated with wraps won’t bring their style with them via email.

9

Good to know, thanks. It degrades well, but the text will have to be careful not to refer to it as a button, say.

1 Like
10

Can CSS be edited on a site hosted by Discourse?

1 Like
11

On the Standard plan and up. :+1: You would create a theme component and make changes in there, and then attach that to your theme(s).

2 Likes
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.