Personalizar o botão Novo Tópico

Wiki da comunidade Desenvolvedores
1

Olá,

Gostaria apenas de compartilhar como criei nosso novo botão de tópico. Um pouco de CSS :slight_smile:

Para isso, uso variáveis de cores. (tertiary, secondary e primary-medium)

Botão Novo Tópico

new-topic

Botão Rascunho Aberto

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

Tenha um bom dia! :slight_smile:

10 curtidas
Developer Index
2021: The Year in Review
2

antes

image
image303×115 2.82 KB

depois
image
image294×106 2.54 KB

nada mudou :no_good_man:

3

@valsha Estou apenas chutando, mas talvez seja porque aquele truque de CSS está alterando o hover e você não está passando o mouse?

Em geral, e a maioria de vocês sabe disso, mas alterar o hover (e muitas outras coisas) só aparece em sistemas que usam mouse. Não em celulares — porque lá o usuário apenas toca em um botão :wink:

2 curtidas
4

Gostei do visual daquele botão. Como você fez isso?

E isso está totalmente fora do tópico… qual ferramenta você está usando ao gravar/converter esses GIFs?

(Droga… apertei o botão de resposta errado? Então: @Don )

2 curtidas
5

Olá,

Parece que este é o Tema Dracula. Verifiquei o código-fonte.

Você precisa adicionar button antes de #create-topic para sobrescrevê-lo.

Então, deve começar assim :arrow_down:

button#create-topic {

Se quiser manter a cor verde success, você deve alterar var(--tertiary) para var(--success). Assim :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2 curtidas
6

Sim, esse botão é do Tema Dracula.
@Don, como sempre, você é o salvador :+1:

2 curtidas
7

E senhores e senhoras, essa foi uma demonstração do que acontece quando alguém não pensa um pouco no que está fazendo (sempre é ele…). Desta vez, marcar alguém de forma errada e questionar no lugar errado pode ser confuso. Graças a Deus, isso é apenas um tópico sobre CSS/tema — não paz mundial, 42 ou algo importante assim :rofl:

Na verdade, eu estava pensando no botão do @Don. Mas com certeza, esse verde neon também é legal :+1:

2 curtidas
8

Como você está alterando o texto de ‘New Topic’ para ‘Criar um novo tópico’? @Don

9

Olá,

Acesse /admin/customize/site_texts, pesquise pelo texto e altere. :slightly_smiling_face:

10

É possível fazer isso diretamente do próprio tema?

11

A maneira de fazer isso via tema é adicionar um script que altera o objeto I18n.translations.

2 curtidas
13

Agora existe um Componente de Tema que permite personalizar facilmente o texto, ícone e outros comportamentos relacionados do botão:

Ele não permite alterar o estilo do botão, mas isso poderia ser adicionado futuramente, eu acho.

2 curtidas