Quero criar um botão colorido ativo (não uma imagem) dentro de um post específico

Olá. Não sei programar. Quero criar um botão colorido ativo (não uma imagem) dentro de uma postagem específica. Que código deve ser escrito na janela do editor de postagem.
É isso que eu quero :point_down:


Minha tentativa de codificação na janela do editor de postagem :point_down: :see_no_evil:

Ajuda, alguém. Mostre o código correto, por favor :pray: :pray: :pray:

Dê uma olhada nisso:

3 curtidas

Pelo que entendi, não poderei adicionar o código do botão à janela do editor, pois de qualquer forma não funcionará.
Pelo que entendi, não poderei adicionar o código do botão à janela do editor e não poderei definir o plano de fundo de uma postagem específica, pois de qualquer forma não funcionará. E preciso adicionar algum código à lista de permissões de HTML primeiro?

Desculpe se entendi alguma coisa errada :pray:, não sou especialista em codificação e não falo bem inglês. Agora estou usando o tradutor do Google.

Talvez uma imagem valha mais que mil palavras :slight_smile:

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

Se você quiser centralizar o botão:

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

1 curtida

Ótimo, isso é incrível :exploding_head:. Muito obrigado :+1: :+1: :+1:

Parece que entendi a lógica de como criar diferentes opções de botões.
Amanhã compartilharei com você meus experimentos com o código.

Enquanto isso, quero fazer mais uma pergunta: qual comando servirá para alinhar o botão à borda direita da postagem.

Obrigado novamente :raised_hands:

É possível codificar o tamanho e a espessura do texto em CSS?

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

Sim: use os seguintes atributos:

font-size e font-weight

Com os valores desejados.

Documentação:


:information_source: Atualizei meu código CSS em minhas mensagens para torná-lo mais limpo (usando atributos flexbox em vez de margem para alinhar o botão).

2 curtidas

Muito obrigado. Sua resposta é muito importante para mim. Estou tentando estudar.

1 curtida

Apenas para constar, embora seja aceitável fazer perguntas ocasionais sobre ajustes no seu site aqui e ali, estritamente falando, perguntas básicas de CSS e HTML geralmente são melhores feitas em um fórum dedicado a isso.

3 curtidas

Quando tentei atualizar o código de acordo com seu exemplo, recebi um erro.

Mas quando removi o segundo caractere “}”, o erro desapareceu

Fiz certo?

Olá. Entendi corretamente “fórum dedicado”, que não tem nada a ver com discourse. Ou discourse tem um fórum separado para discutir problemas de CSS e HTML. (Não tenho certeza se meu navegador está traduzindo corretamente)

Peço desculpas pela minha audácia :pray: Você poderia me mostrar isso com meu exemplo de CSS? :pray:

P.S. Junto com o discurso, comecei a explorar o mundo da codificação :sweat_smile:

Sim, desculpe, cometi um erro ao copiar e colar meu código. :+1:

Ele diz que perguntar sobre coisas gerais de CSS que não estão diretamente relacionadas ao Discourse (como usar CSS para alterar o tamanho ou peso do texto) não deve ser discutido em meta.discourse.org, mas em outro lugar onde você pode aprender e fazer perguntas sobre CSS.

Se você tiver uma pergunta precisa sobre como usar CSS para fazer uma coisa específica no Discourse, então meta.discourse.org é apropriado.

Sugiro que você aprenda o básico de CSS. digite “tutorial de CSS” no seu idioma no seu motor de busca favorito e tente obter algum conhecimento daqui para começar. Isso o ajudará muito mais tarde a personalizar o estilo do seu fórum Discourse.

2 curtidas

Olá, obrigado, ficou claro agora!
Certamente usarei os links que você forneceu :+1: