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 „Gefällt mir“
2

Ich dachte, da es jetzt vier Jahre her ist, würde ich es noch einmal fragen, um zu sehen, ob diesmal mehr Interesse besteht.

Es wäre wirklich schön, die Seite einer einzelnen Gruppe zu gestalten, aber dies ohne eine dedizierte Klasse am <body>-Tag zu tun – so wie wir es für groups-page auf der Hauptgruppenliste unter /g haben – wäre meiner Meinung nach sehr wünschenswert.

Hat sich noch jemand anderes danach gesehnt oder vielleicht alternativ einen Weg gefunden, das CSS auf der Auflistungsseite einer einzelnen Gruppe detaillierter zu gestalten?

3

Welche Art von Änderungen suchst du?

Wenn ich das richtig verstehe, möchtest du eine Gruppen-Seite ansprechen – du kannst dies mit folgendem Präfix tun:

#main-outlet .container.group.FOO {
    //
}
6 „Gefällt mir“
4

Danke, das bringt mich wahrscheinlich schon sehr weit. Normalerweise scheinen diese Selektoren auf dem <body>-Tag zu liegen, weshalb ich dort auch gesucht habe.

Ich versuche, etwas zu entwickeln, das sich gut mit der (wunderschönen) Theme-Komponente Discourse Category Banners von @awesomerobot ergänzt. Ich bin mir also nicht sicher, ob das basierend auf dem ausgegebenen HTML möglich ist, aber ich werde es einfach ausprobieren.

2 „Gefällt mir“
5

Du kannst JavaScript verwenden, um Klassen auf übergeordneten HTML-Elementen ab .group zu setzen.

1 „Gefällt mir“
6

Ja, das scheint das zu sein, was bei Discourse Category Banners getan wurde, um den richtigen Inhalt oberhalb von #main-outlet anzuzeigen. Zusätzliche JS-Funktionen werden wahrscheinlich noch eine Weile auf meiner Wunsch- bzw. To-Do-Liste bleiben, und ich werde vorerst das Beste mit CSS machen.

7

Hier ist eine hässliche Möglichkeit, dies zu tun. Das Hinzufügen der Klasse ist einfach. Dies fügt deinem main-ID einen groupname hinzu, wobei groupname der Name der Gruppe ist, also <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>

Das Problem ist, dass die Klasse bleibt, sobald du die Seite verlässt. Wir benötigen eine Möglichkeit, diese Klasse beim Verlassen der Seite zu entfernen. Es gibt wahrscheinlich einen einfachen Weg, dies zu tun, aber ich kenne JavaScript nicht wirklich gut genug, um darauf zu kommen. Hoffentlich kannst du einen besseren Weg finden, dies zu tun, aber die hässliche Methode besteht darin, das Ende des Skripts wie folgt zu ändern:

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

Dies entfernt alle möglichen groupname-Klassen, die du hinzugefügt hast. Aber es scheint wirklich eine hässliche Methode zu sein, und du musst den Code jedes Mal ändern, wenn du eine neue Gruppe hinzufügst.

1 „Gefällt mir“
8

Das Problem war, dass ich nicht herausfand, wie man eine Variable von getGroupInfo() an api.onPageChange(() => { weitergibt.

Der folgende Code löst dies mithilfe eines Cookies und fügt bzw. entfernt automatisch die Klasse "name-of-current-group" für jede Gruppe, der Sie angehören, vom div mit der ID main hinzu.

<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>