Mudar o botão "+ Novo Tópico" para combinar com o estilo do botão "Responder"

Suporte
1

Gosto do estilo do botão “Responder”, que usa a cor “Terciária” conforme definido em /admin/customize/colors (Paletas de cores/seleção)

image
image694×920 133 KB

Gostaria que nosso botão “Novo Tópico” seguisse o mesmo estilo do botão “Responder”, conforme ilustrado neste vídeo:

2

Você pode tentar pegar o CSS do botão de resposta e transferir essas propriedades para o botão de adicionar post:

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Tente adicionar isso:

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

Em seguida, você precisa adicionar CSS para :hover (passar o mouse):


  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

Selecione as cores necessárias com mais precisão. Substitua *** pela cor desejada.

Como adicionar CSS ao Discourse:

Você pode fazer isso com qualquer parte do CSS.

3

Resposta fantástica!!! Muito obrigado!

Poderia me dar mais uma dica de CSS… como eu poderia melhor minificar esses dois trechos de código?:

Alterar a cor do botão [+ Novo Tópico] no cabeçalho

Esse botão do cabeçalho existe por causa do Tema botão (+ Novo tópico) em todas as páginas

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

Alterar a cor do botão [+ Novo Tópico] nas páginas de categoria e tag

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
4

Minimizar? Não tenho certeza sobre a tradução, peço desculpas. Tente combinar isso:

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

Ou

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

Vejo que há um id (new-create-topic), não sei o quão único ele é. Tente usar isso (não verifiquei).

Na verdade, há muitas opções.

Use:

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

Qualquer combinação deles…

5

Obrigado por tentar ajudar a deixar o código mais curto. Quando tentei várias combinações como as que você sugeriu, foi isso que obtive… (note o sinal de mais)

hoverstate

Por enquanto, decidi apenas manter os dois trechos de código e tudo está perfeito!! Obrigado novamente, @Stranik

6

Não definimos o CSS para o ícone ao passar o mouse:

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

Talvez seja assim. Às vezes, é mais fácil fazer localmente e verificar. :slightly_smiling_face:

Você pode testar com segurança diferentes opções e combiná-las. Há um grande campo para criatividade. Boa sorte!