Como alterar a cor do botão de cadastro

[hequaye (Henry Herbert)]

Olá a todos! Quero saber como posso personalizar meu botão de inscrição. Quero mudar a cor apenas do meu botão de inscrição para verde e não de todos os botões do cabeçalho.

Estou em um fórum hospedado no Discourse, desculpe se esta é uma pergunta de iniciante, sou muito iniciante e passei a noite inteira tentando descobrir isso.

Estou usando o tema AIR.

[Steven]

Olá!

Não tenho certeza sobre a gama de opções que você tem em fóruns hospedados, mas presumo que você tenha a seção Personalizar no painel de administração.

Em seu tema, edite CSS/html e em Comum adicione isto:

.d-header .sign-up-button {
    background: #48bb6a;
}

Se não funcionar, talvez você precise adicionar !important para garantir que essa cor tenha prioridade, assim:

.d-header .sign-up-button {
    background: #48bb6a !important;
}

[hequaye (Henry Herbert)]

Olá @Steven, obrigado, funcionou! A questão é que eu não vi nenhuma variável de inscrição. Preciso me familiarizar com as variáveis para CSS e como encontrá-las no HTML. Obrigado!

[Steven]

Encontrar variáveis pode ser complicado. O que me ajudou muito a progredir foi o recurso Inspect nos navegadores, você pode explorar o código e o CSS e tentar algumas alterações ao vivo.

Neste caso, os desenvolvedores do Discourse adicionaram uma classe específica para os botões de inscrição e login, o que é útil.

Mas não hesite em perguntar aqui, a comunidade sempre tentará ajudar.

[hequaye (Henry Herbert)]

@Steven Cara, isso é ótimo!!! Muito obrigado! meu botão de inscrição ficou verde!

Então, usei a ferramenta de inspeção e estava me perguntando se havia uma maneira de alterar o nome do botão do menu “Todas as Tags” para algo como “Ferramentas LFX” para o meu caso de uso. Entende-se que talvez eu tenha que encontrar isso no HTML por causa de como o fórum é baseado em tags, quão complicado você acha que seria mudar o nome da funcionalidade de tag para ferramentas?

[Steven]

Este texto específico pode ser editado no painel de administração: Personalizar > Textos

Digite isto na barra de pesquisa: js.tagging.selector_all_tags
E valide o texto

Mas para responder à sua pergunta em um contexto geral, editar um texto é factível, mas complicado com CSS. Eu geralmente uso o seletor de conteúdo em uma classe ::before ou ::after.

https://www.w3schools.com/cssref/sel_before.asp

Se não tivéssemos a possibilidade de editar o texto, não sou um especialista, mas faria algo assim.

Primeiro, oculto o texto todas as tags:

summary.tag-drop-header .name {
    font-size: 0;
}

Em seguida, crio uma nova classe CSS, com conteúdo para adicionar o texto que quero, e preciso especificar o tamanho da fonte para substituir a configuração anterior:

summary.tag-drop-header .name::after {
    content: "LFX Tools";
    font-size: 15px;
}