Esquema de cores único para uma categoria

Dev
1

Saudações.

Estou migrando um fórum antigo para o Discourse e o site original tinha um tema exclusivo (incluindo um logotipo de cabeçalho exclusivo) para uma de suas categorias.

Minha solução atual é um componente de tema que se parece com isto:

CSS:

body.category-target-category{
/// substitua os #hexcodes pelos valores de cor de sua escolha
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
/// continue para quaisquer/todos os valores de cor necessários
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

Atualmente, preciso iterar por todos os valores de cor possíveis mencionados em color_definitions.scss para substituí-los. Acredito que os valores para este arquivo são produzidos em foundation/color_transformations.scss, que os gera a partir dos valores encontrados em foundation/colors.scss. Sei que você pode substituir os valores do tema de cores raiz através do menu de administração ou no about.json do componente de tema, mas acredito que essas alterações ocorrem em todo o site.

Existe uma maneira mais eficiente de personalizar uma categoria específica, além de listar todas as mais de 100 variáveis em color_definitions.scss? Por exemplo, o arquivo foundation/colors.scss pode ser modificado por um componente de tema?

Obrigado pela ajuda!

2

Olá @Rhababo :wave: bem-vindo(a) à Meta :slight_smile:

Se você ainda não trabalhou com temas e desenvolvimento do Discourse, eu começaria com os recursos aqui:

Além disso, por exemplo, você pode alterar o logotipo e a cor do cabeçalho e até mesmo as cores dos ícones para uma categoria específica com código CSS algo como isto:

.category-<slug-da-categoria> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<slug-da-categoria> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<slug-da-categoria> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

Se você simplesmente criar um novo tema, poderá adicionar código e fazer upload dos logotipos como ativos. <slug-da-categoria> é o nome da categoria em minúsculas que aparece no campo URL do navegador (separe categorias pai e subcategorias com hifens, como em categoria-pai-subcategoria).

Existem também vários #componente-de-tema como este que você pode procurar

3

Obrigado Lilly pela sua ajuda e recursos!

Eu realmente aprecio as instruções de CSS para o logotipo. Muito mais elegante do que meu script desajeitado.

Sua solução funcionará absolutamente para o meu caso de uso. Embora selecionar cada elemento e codificar diretamente a cor para ele parecesse tedioso. Estou me perguntando se há uma maneira de aproveitar o mecanismo que o Discourse usa para gerar sua paleta de cores a partir das apenas 12 ou mais cores base encontradas em colors.scss. Acho que fazer isso pode exigir um plugin em vez de um componente de tema, e isso é um desafio para outro dia.

Obrigado!