Esquema de color único para una categoría

Desarrollador
1

Saludos.

Estoy migrando un foro antiguo a Discourse y el sitio original tenía un tema único (incluido un logotipo de encabezado único) para una de sus categorías.

Mi solución actual es un componente de tema que se ve algo así:

CSS:

body.category-target-category{
///reemplaza los #hexcodes con los valores de color de tu elección
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///continúa para todos los valores de color requeridos
}

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>

Actualmente, tengo que iterar a través de cada valor de color posible mencionado en color_definitions.scss para anularlos. Creo que los valores para este archivo se producen en foundation/color_transformations.scss, que los genera a partir de los valores que se encuentran en foundation/colors.scss. Sé que puedes anular los valores del tema de color raíz a través del menú de administración o en el about.json del componente de tema, pero creo que estos cambios se aplican en todo el sitio.

¿Hay una forma más eficiente de personalizar una categoría específica además de enumerar todas las más de 100 variables en color_definitions.scss? Por ejemplo, ¿se puede modificar el archivo foundation/colors.scss a través de un componente de tema?

¡Gracias por tu ayuda!

2

Hola @Rhababo :wave: bienvenido a Meta :slight_smile:

Si aún no has trabajado con temas y desarrollo en Discourse, te recomiendo empezar con los recursos que encontrarás aquí:

Por ejemplo, puedes cambiar el logotipo y el color del encabezado, e incluso los colores de los iconos para una categoría específica, usando código CSS similar a este:

.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);
}

Si simplemente creas un nuevo tema, puedes añadir código y cargar los logotipos como activos. <category-slug> es el nombre de la categoría en minúsculas que aparece en la barra de direcciones del navegador (separando categorías padre e hijas con guiones “-”, como en categoriapadre-subcategoria).

También existen varios componentes de tema de Customization > Theme component como este que podrías buscar:

3

¡Gracias Lilly por tu ayuda y recursos!

Realmente aprecio las instrucciones de CSS para el logo. Mucho más elegante que mi torpe script.

Tu solución funcionará absolutamente para mi caso de uso. Aunque seleccionar cada elemento y codificar directamente el color para él parecía tedioso. Me pregunto si hay una manera de aprovechar el mecanismo que Discourse utiliza para generar su paleta de colores a partir de los apenas 12 colores base que se encuentran en colors.scss. Creo que hacerlo puede requerir un plugin en lugar de un componente de tema, y eso es un desafío para otro día.

¡Gracias!