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 Mi Piace
2

Pensavo che, dato che sono passati 4 anni, potrei chiedere di nuovo per vedere se c’è più interesse questa volta.

Sarebbe davvero bello poter stilizzare la pagina di un singolo gruppo, ma farlo senza una classe dedicata sul tag <body> – come quella che abbiamo per groups-page nella pagina principale dell’elenco dei gruppi a /g – sarebbe senz’altro ottimo, a mio parere.

C’è qualcun altro che ha desiderato questo, o magari ha trovato un modo per applicare uno styling CSS più dettagliato alla pagina di elenco di un singolo gruppo?

3

Che tipo di modifiche stai cercando?

Se ho capito bene, vuoi indirizzare una pagina di gruppo: puoi aggiungere il prefisso:

#main-outlet .container.group.FOO {
    //
}
6 Mi Piace
4

Grazie, potrebbe portarmi molto vicino. In genere sembra che questi selettori siano stati applicati su , quindi è lì che stavo cercando.

Sto cercando di creare qualcosa di più complementare al componente del tema (bellissimo) Discourse Category Banners creato da @awesomerobot, quindi non sono sicuro di poterlo fare in base all’HTML generato, ma ci proverò lo stesso.

2 Mi Piace
5

Potresti usare JavaScript per impostare le classi sugli elementi HTML superiori a partire da .group.

1 Mi Piace
6

Sì, sembra che sia stato fatto così su Discourse Category Banners per posizionare il contenuto corretto sopra #main-outlet. Probabilmente JavaScript aggiuntivo rimarrà nella mia lista dei desideri o da fare per molto tempo, e per ora farò quello che posso con il CSS.

7

Ecco un modo poco elegante per farlo. Aggiungere la classe è semplice. Questo aggiungerà un groupname al tuo id main, dove groupname è il nome del gruppo, ad esempio <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>

Il problema è che la classe rimane lì una volta che ti sposti altrove. Dobbiamo trovare un modo per rimuovere quella classe quando lasciamo la pagina. Probabilmente esiste un modo semplice per farlo, ma non conosco bene JavaScript, quindi non sono abbastanza abile da risolverlo da solo. Spero tu possa trovare un modo migliore per farlo, ma il metodo poco elegante consiste nel modificare la fine dello script come segue:

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

Questo rimuoverĂ  qualsiasi classe di groupname che hai aggiunto. Ma sembra un modo davvero poco elegante per farlo, e devi modificare il codice ogni volta che aggiungi un nuovo gruppo.

1 Mi Piace
8

Il problema era che non riuscivo a capire come passare una variabile da getGroupInfo() a api.onPageChange(() => {

Il codice qui sotto risolve il problema utilizzando un cookie e dovrebbe aggiungere e rimuovere automaticamente la classe "nome-del-gruppo-corrente" dall’ID div principale per qualsiasi gruppo di cui fai parte.

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