Unique CSS class for Group pages?

Contribute UX

AI-generated summary

A discussion is underway about adding a unique CSS class for group pages in Discourse. downey initially asked if it’s possible to add a group-specific class on group pages, allowing for custom styling. downey mentions that without a dedicated class on the <body> tag, styling an individual group’s page is challenging.

Arkshine suggests using a CSS selector to target the group page, but downey notes that this might not be sufficient for their needs. Canapin proposes using JavaScript to set classes on upper HTML elements starting from .group.

srmtey provides an initial JavaScript solution that adds a groupname class to the main id, but notes that the class persists even after navigating away from the page. srmtey refines the solution using a cookie to store the current group name, allowing for automatic addition and removal of the class.

1

Any chance of a group-specific class on the group-specific pages for members, topics, posts, etc.?

e.g. /groups/FOO/topics

This would allow us to do custom styling for each group.

3 « J'aime »
2

Je pensais que, puisque quatre ans se sont écoulés, je demanderais à nouveau pour voir s’il y a plus d’intérêt cette fois.

Ce serait vraiment agréable de styliser la page d’un groupe individuel, mais le faire sans une classe dédiée sur la balise <body> — comme nous en avons une pour groups-page sur la liste principale des groupes à /g — serait vraiment bien, à mon avis.

Est-ce que quelqu’un d’autre a souhaité cela, ou peut-être a-t-il trouvé un moyen de faire un style CSS plus détaillé sur la page de liste d’un groupe individuel ?

3

Quel type de modifications recherchez-vous ?

Si j’ai bien compris, vous souhaitez cibler une page de groupe — vous pouvez ajouter le préfixe suivant :

#main-outlet .container.group.FOO {
    //
}
6 « J'aime »
4

Merci, cela devrait me rapprocher pas mal. En général, il semble que ces sélecteurs soient placés sur <body>, c’est donc là que je regardais.

J’essaie de créer quelque chose de plus complémentaire avec le composant de thème (magnifique) Bannières de catégorie Discourse créé par @awesomerobot, donc je ne suis pas sûr de pouvoir le faire à partir du HTML généré, mais je vais essayer de contourner le problème.

2 « J'aime »
5

Vous pouvez utiliser JavaScript pour définir des classes sur les éléments HTML supérieurs en commençant par .group.

1 « J'aime »
6

Oui, cela semble être ce qui a été fait dans Discourse Category Banners pour afficher le bon contenu au-dessus de #main-outlet. Du JavaScript supplémentaire restera probablement sur ma liste de souhaits/à faire pendant un bon moment, et je ferai au mieux avec du CSS pour l’instant.

7

Voici une méthode peu élégante pour le faire. Ajouter la classe est simple. Cela ajoutera un groupname à votre identifiant main, où groupname correspond au nom du groupe, par exemple : <section id="main" class="ember-application groupname">

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                if (myObj.group.name) {
                    document.getElementById("main").classList.add(myObj.group.name);
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();            
    }
    api.onPageChange(() =>{
        getGroupInfo();
    });
</script>

Le problème est que la classe reste présente une fois que vous naviguez ailleurs. Nous devons trouver un moyen de supprimer cette classe en quittant la page. Il existe probablement une solution simple, mais comme je ne connais pas vraiment JavaScript, je ne suis pas assez ingénieux pour la trouver. J’espère que vous pourrez trouver une meilleure méthode, mais la façon peu élégante de procéder consiste à modifier la fin du script comme suit :

    api.onPageChange(() =>{
        document.getElementById("main").classList.remove("group1");
        document.getElementById("main").classList.remove("group2");
        document.getElementById("main").classList.remove("group3");
        getGroupInfo();
    });

Cela supprimera toutes les classes de nom de groupe éventuelles que vous avez ajoutées. Mais cela semble vraiment être une méthode peu élégante, et vous devrez modifier le code à chaque fois que vous ajouterez un nouveau groupe.

1 « J'aime »
8

Le problème était que je ne parvenais pas à comprendre comment passer une variable de getGroupInfo() vers api.onPageChange(() => {

Le code ci-dessous y parvient à l’aide d’un cookie et devrait automatiquement ajouter et retirer la classe "nom-du-groupe-actuel" à/de div ID main pour tout groupe dont vous êtes membre.

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                var groupName = myObj.group.name;
                if (groupName) {
                    document.getElementById("main").classList.add(groupName);
                    $.cookie('groupCookie', groupName, { expires: 7, path: '/' });
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();            
    }
    api.onPageChange(() =>{
        var group = $.cookie('groupCookie');
        document.getElementById("main").classList.remove(group);
        $.cookie('groupCookie', 'false', { expires: -1, path: '/' })
        getGroupInfo();
    });
</script>