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

Pensei que, já que se passaram 4 anos, eu perguntaria novamente para ver se há mais interesse dessa vez.

Seria muito bom poder estilizar a página de um grupo individual, mas fazê-lo sem uma classe dedicada na tag <body> — como temos para groups-page na lista principal de grupos em /g — seria ótimo, na minha opinião.

Mais alguém tem esse desejo ou, alternativamente, conseguiu descobrir uma maneira de aplicar um CSS mais detalhado na página de listagem de um grupo individual?

3

Que tipo de modificações você está procurando?

Se entendi corretamente, você quer direcionar uma página de grupo – você pode adicionar o prefixo:

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

Obrigado, isso pode me deixar bem próximo. Geralmente, parece que esses seletores foram aplicados ao <body>, então foi aí que eu estava procurando.

Estou tentando criar algo mais complementar ao componente de tema Discourse Category Banners (bonito!) criado por @awesomerobot, então não tenho certeza se consigo fazer isso com base no HTML gerado, mas vou tentar contornar o problema.

2 curtidas
5

Você pode usar JavaScript para definir classes em elementos HTML superiores, começando a partir de .group.

1 curtida
6

Sim, parece que foi isso que foi feito nos Discourse Category Banners para colocar o conteúdo correto acima de #main-outlet. Javascript extra provavelmente permanecerá na minha lista de desejos/tarefas por um bom tempo, e por enquanto farei o que puder apenas com CSS.

7

Aqui está uma maneira feia de fazer isso. Adicionar a classe é fácil. Isso adicionará um groupname ao seu id main, onde groupname = qualquer que seja o nome do grupo, ou seja, <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>

O problema é que a classe permanece lá mesmo depois que você navega para outro lugar. Precisamos de uma maneira de remover essa classe ao sair da página. Provavelmente existe uma maneira fácil de fazer isso, mas como não sei muito de JS, não sou inteligente o suficiente para descobrir. Espero que você consiga encontrar uma maneira melhor de fazer isso, mas a maneira feia de fazer é alterar o final do script para:

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

Isso removerá qualquer classe de groupname que você tenha adicionado. Mas parece uma maneira realmente feia de fazer isso, e você terá que alterar o código sempre que adicionar um novo grupo.

1 curtida
8

O problema era que eu não conseguia descobrir como passar uma variável de getGroupInfo() para api.onPageChange(() => {

O código abaixo realiza isso usando um cookie e deve adicionar e remover automaticamente a classe "name-of-current-group" de/para o div ID main para qualquer grupo que você tenha.

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