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

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:

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

Would this work for you?

Button!

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

3 Likes

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

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

8 Likes

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

2 Likes

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

1 Like

I saw that—thank you for writing it!

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

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.

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

Can CSS be edited on a site hosted by Discourse?

1 Like

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

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