토픽 게시글에 버튼을 삽입하는 방법

개발
1

Introducing the amazing embedded button - the ultimate solution for spicing up your topic posts! With just a click, you can add a whole new dimension to your content and leave your readers in awe. Plus, our embedded button comes with a 100% satisfaction guarantee - if you’re not completely satisfied with its awesomeness, we’ll give you your money back (just kidding, it’s totally free)! So why wait? Get your hands on our embedded button today and join the cool kids’ club!

I have created some call-to-action topics to increase sign-ups on my Discourse forum. Each topic is for a different marketing campaign. But they all share one thing in common…I want them to sign up after reading it. So instead of breaking the flow of the readers eye, I have added a button directly into the post for their convenience, and increased conversion rates. But you can use the button for whatever you want! :slight_smile:

Preview

image
image964×520 36.4 KB


How to Enable

  1. Add the custom CSS to your current theme.
[data-wrap="button"] a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #FFF !important;
    background-color: #007bff;
    border-color: #007bff;
}

// Part #1 Allows text to be displayed to the right of a button.
[data-wrap="button"] {
    display: inline-block;
}

// Part #2 Allows text to be displayed to the right of a button.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. In your posts, copy
[wrap="button"][Get Started](https://example.com)[/wrap]

Or if you want text next to your button, try this…

[wrap="button"][Sign Up](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- Click Here to get sign up to my discourse![/wrap]
2

very nice, thank you.

4

Hey @UnitedFreedom!

Your topic inspired me to create a proper topic about such modifications :+1:

You can read it here guys: Customize posts' contents with your own styles

5

I’m glad I was able to inspire you. You made a very easy to follow topic with pictures. Love it :slight_smile:

6

Quick CSS improvement from our side:

Since the HTML output is slightly different inside a cooked post for “wrap-buttons”, we adjusted the CSS markup since the a tag inside the div > p hierarchy contains the link and therefore clicking the button slightly above or below the link doesn’t trigger the link.

We managed to work around that to add more padding around the a tag and override the margin-block markup of the <p> tag.

Also, the link color had to be adjusted.

[data-wrap="btn-primary"] {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: normal;
    color: var(--d-button-primary-text-color);
    background-color: var(--d-button-primary-bg-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-radius: var(--d-button-border-radius);
    transition: var(--d-button-transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: var(--font-0);
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
    border: var(--d-button-border);
    padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
    color: var(--d-button-primary-text-color);
        padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}
7

OP의 이 CSS 해킹에서 영감을 받아, 커스텀 버튼을 제공하는 이 테마 컴포넌트를 만들었습니다. 직접 CSS를 작성하는 것만큼 유연하지는 않지만, 훨씬 쉽습니다.

훌륭한 아이디어를 주신 OP에게 감사드립니다.