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 Me gusta
2

Pensé que, dado que han pasado 4 años, volvería a preguntar para ver si hay más interés esta vez.

Sería muy útil poder estilizar la página de un grupo individual, pero hacerlo sin una clase dedicada en la etiqueta <body> —como la que tenemos para groups-page en el listado principal de grupos en /g— sería realmente agradable, en mi opinión.

¿Alguien más ha deseado esto o, alternativamente, ha encontrado una manera de aplicar un estilo CSS más detallado en la página de listado de un grupo individual?

3

¿Qué tipo de modificaciones estás buscando?

Si entiendo bien, quieres apuntar a una página de grupo; puedes usar el prefijo:

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

Gracias, eso podría acercarme bastante. Por lo general, parece que estos selectores se han colocado en <body>, así que era allí donde estaba buscando.

Estoy intentando crear algo más complementario con el componente de tema (hermoso) Discourse Category Banners creado por @awesomerobot, así que no estoy seguro de si puedo hacerlo basándome en el HTML generado, pero lo intentaré a ver qué puedo hacer.

2 Me gusta
5

Podrías usar JS para establecer clases en los elementos HTML superiores comenzando desde .group.

1 me gusta
6

Sí, eso parece ser lo que se hizo en Discourse Category Banners para colocar el contenido correcto encima de #main-outlet. El JavaScript adicional probablemente seguirá en mi lista de deseos/tareas durante bastante tiempo, y por ahora haré lo que pueda con CSS.

7

Aquí hay una forma poco elegante de hacerlo. Añadir la clase es sencillo. Esto agregará un groupname a tu id main, donde groupname es el nombre del grupo, por ejemplo: <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>

El problema es que la clase permanece ahí una vez que navegas a otra página. Necesitamos una forma de eliminar esa clase al salir de la página. Probablemente haya una manera sencilla de hacerlo, pero como no sé mucho de JavaScript, no tengo la suficiente astucia para resolverlo. Espero que puedas encontrar una mejor forma de hacerlo, pero la forma poco elegante sería cambiar el final del script así:

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

Esto eliminará cualquier clase de nombre de grupo que hayas añadido. Pero parece una forma realmente poco elegante de hacerlo, y tendrás que modificar el código cada vez que añadas un nuevo grupo.

1 me gusta
8

El problema era que no podía averiguar cómo pasar una variable desde getGroupInfo() a api.onPageChange(() => {

El código a continuación logra esto mediante una cookie y debería agregar y eliminar automáticamente la clase "nombre-del-grupo-actual" de/del div ID main para cualquier grupo que tengas.

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