I want to create an active colored button (not an image) inside a specific post

Hello. I can’t code. I want to create an active colored button (not an image) inside a specific post. What code should be written inside the post editor window.
This is what I want :point_down:


My attempt at coding in the post editor window :point_down: :see_no_evil:

Help somebody. Show correct code please :pray: :pray: :pray:

Have a look at this:

3 Likes

As I understand it, I will not be able to add the button code to the editor window, since it will not work anyway.
As I understand it, I won’t be able to add the button code to the editor window and I won’t be able to set the background of a particular post, as it won’t work anyway. And do I need to add some code to the HTML whitelist first?

Sorry if I misunderstood something :pray:, I’m not a coding specialist and I don’t speak English well. Now I’m using google translator.

Maybe an image is worth a thousand words :slight_smile:

[data-theme-button] a {
        display: inline-block;
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
}

If you want to center the button:

[data-theme-button] {
    display: flex;
    justify-content: center;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

1 Like

Great, this is amazing :exploding_head:. Thank you very much :+1: :+1: :+1:

It seems I understood the logic of how to make different button options.
Tomorrow I will share with you my experiments with the code

In the meantime, I want to ask one more question: what command will be for aligning the button to the right edge of the post.

Thank you again :raised_hands:

Is it possible to encode text size and thickness in css?

[data-theme-button] {
    display: flex;
    justify-content: end;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

Yes: use the following attributes:

font-size and font-weight

With the desired values.

Documentation:


:information_source: I updated my CSS code in my messages to make it cleaner (using flexbox attributes instead of margin to align the button).

2 Likes

Big thanks. Your answer is very important to me. I’m trying to study.

1 Like

Just to note, that while it’s okay to ask the odd question about tweaking your site here and there, strictly speaking basic CSS and HTML questions are generally better asked on a dedicated forum to that.

2 Likes

When I tried to update the code according to your sample, I got an error.

But when I removed the second character “}”, the error disappeared

image

Did I do it right?

Hello. I understood correctly “dedicated forum”, which has nothing to do with discourse. Or discourse has a separate forum for discussing CSS and HTML issues. (I’m not sure if my browser translates correctly)

I apologize for my impudence :pray: Could you show me this with my CSS example? :pray:

P.S. Along with the discourse, I began to explore the world of coding :sweat_smile:

Yes, sorry, I made a mistake while copy-pasting my code. :+1:

He says that asking about general CSS stuff not directly related to Discourse (like how to use CSS to change text size or weight) shouldn’t be discussed on meta.discourse.org, but somewhere else where you can learn and ask questions about CSS.

If you have a precise question on how to use CSS to do a specific thing in Discourse, then meta.discourse.org is appropriate.

I suggest you learn the basics of CSS. type “CSS tutorial” in your own language on your favorite search engine, and try to get some knowledge from here from which you can start. It will greatly help you later to customize your Discourse forum’s style.

2 Likes

Hello, thanks, it’s clear now!
I’ll be sure to use the links you provided :+1: