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 ao Meta :slight_smile:

Se você ainda não trabalhou com temas e desenvolvimento no Discourse, recomendo começar com os recursos aqui:

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

.category-<category-slug> .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-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

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

Se você simplesmente criar um novo tema, poderá adicionar o código e fazer o upload dos logotipos como ativos. <category-slug> é o nome da categoria em letras minúsculas que aparece no campo de URL do navegador (separe categorias pai e subcategorias com traços “-”, como em parentcategory-subcategory.

Também existem vários componentes de tema de personalização como este que você pode pesquisar:

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!