Schéma de couleurs unique pour une catégorie

Dev
1

Salutations.

Je suis en train de migrer un ancien forum vers Discourse, et le site d’origine avait un thème unique (y compris un logo d’en-tête unique) pour l’une de ses catégories.

Ma solution actuelle est un composant de thème qui ressemble à ceci :

CSS :

body.category-target-category{
///remplacez les #hexcodes par les valeurs de couleur de votre choix
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///continuez pour toutes les valeurs de couleur requises
}

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>

Actuellement, je dois itérer sur toutes les valeurs de couleur possibles mentionnées dans color_definitions.scss afin de les remplacer. Je pense que les valeurs de ce fichier sont produites par foundation/color_transformations.scss, qui les génère à partir des valeurs trouvées dans foundation/colors.scss. Je sais que vous pouvez remplacer les valeurs du thème de couleur racine soit via le menu administrateur, soit dans le fichier about.json du composant de thème, mais je crois que ces modifications s’appliquent à l’ensemble du site.

Existe-t-il un moyen plus efficace de personnaliser une catégorie spécifique sans avoir à lister toutes les plus de 100 variables de color_definitions.scss ? Par exemple, le fichier foundation/colors.scss peut-il être modifié via un composant de thème ?

Merci de votre aide !

2

Salut @Rhababo :wave: bienvenue sur Meta :slight_smile:

Si vous n’avez pas travaillé avec les thèmes et le développement de Discourse, je commencerais par les ressources ici :

De plus, par exemple, vous pouvez changer le logo et la couleur de l’en-tête et même les couleurs des icônes pour une catégorie spécifique avec du code CSS comme ceci :

.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 vous créez simplement un nouveau thème, vous pouvez ajouter du code et télécharger les logos en tant qu’assets. <category-slug> est le nom de la catégorie en minuscules qui apparaît dans le champ URL du navigateur (séparez les catégories parentes et les sous-catégories avec des tirets, comme dans categorie-parente-sous-categorie).

Il existe également divers Theme component’s comme celui-ci que vous pourriez rechercher

3

Merci Lilly pour votre aide et vos ressources !

J’apprécie vraiment les instructions CSS pour le logo. Bien plus élégant que mon script maladroit.

Votre solution fonctionnera absolument pour mon cas d’utilisation. Bien que sélectionner chaque élément et coder directement la couleur pour celui-ci semblait fastidieux. Je me demande s’il existe un moyen de tirer parti du mécanisme que Discourse utilise pour générer sa palette de couleurs à partir des quelque 12 couleurs de base trouvées dans colors.scss. Je pense que cela pourrait nécessiter un plugin plutôt qu’un composant de thème, et c’est un défi pour un autre jour.

Merci !