¿Qué tan difícil sería hacer que la interfaz de Discourse se parezca más a Flarum?

subtenko · 20 Marzo, 2018 18:43

Scale of 1-10 how difficult would it be? Hopefully this question doesn’t peeve anyone but Im torn between the two. Flarum has a really clean interface:

Topic list is centered with no lines in between, yet its still easy to read.
Search bar is all in the same sticky header and not a ‘nook’
Category markers look better, not just a 4x4 square.

Hmm… thats about it I think… Does this make sense? Sorry if this is posted to the wrong section.

Sidenote info: Im currently testing out both software even though having a hard time putting discourse on the same server vs my other 1 click install server. At least I have this working because for some reason I get a blank page when finalizing the flarum install. Really if Discourse had the same Flarum UI and features discourse currently has it be a much easier pick

notriddle · 20 Marzo, 2018 19:06

angus · 21 Marzo, 2018 08:49

The answer is that it would be easy.

Discourse has a Theming system (see themes tag) that makes the kind of changes you’re talking about just a matter of adding the right CSS rules.

You can add CSS either directly in the “Site Customisations” Admin Panel UI, or on your local machine in your editor of choice via the CLI, with the ability to preview changes instantly on your site.

If you’re not a coder, you can hire one in the marketplace.

As has already been mentioned, you can use my header search theme component for the header search part of your list.

alehandrof · 21 Marzo, 2018 10:10

I like the Flarum homepage as shown in the second screenshot! Not sure how doable that would be with CSS given that the categories in Discourse are a dropdown. But I like the idea of having the categories as permanent sidebar on the left hand side (while browsing topics).

BlackKnob · 22 Marzo, 2018 00:28

It’s a nice looking design, but only when you are at the top of the page. Then the color banner disappears and you are left with just the white main header.
If you want to have a color header, then the topic banner won’t look as sexy. (would look like having two headers).
Also, the categories bullet list in Flarum doesn’t show descriptions. Did you try Material Design Stock Theme for Discourse?

notriddle · 22 Marzo, 2018 00:54

It could be done with a theme component, though it would require some javascript.

erlend_sh · 2 Abril, 2018 03:17

I just remembered there’s some prior art on this by @bts here:

Once there’s a published theme available for this it’d be great if the two of you could compare notes and ideally end up with a single codebase.

bts · 2 Abril, 2018 13:57

Gracias @erlend_sh, ¡buena captura! No había visto este tema todavía. Sí, el año pasado dedicamos algo de tiempo exactamente a esto, intentando lograr algo cercano a los encabezados al estilo de Flarum. Así es como se ve en nuestro sitio:

Y aquí está la esencia del HTML / CSS que desarrollamos para esto:

CSS:
(Todo esto está en “común”: además de esto, también hay algunos ajustes menores de margen / relleno para escritorio vs. móvil que no incluí a continuación.)

/* GENERAL */

body {
    overflow-x: hidden;
}

.custom-cat-header {
	display: block;
	margin-left: -9999px!important;
	padding-left: 9999px!important;
	margin-right: -9999px!important;
	padding-right: 9999px!important;
	text-align: center;
	margin-top: -18px;
}

.custom-cat-header p {
    color: #dddddd;
}

.custom-cat-header h1 {
    display: inline-block;
    margin-top: 20px;
    color: #dddddd;
    background-color: #222222;
    border-radius: 5px;
    width: inherit;
}

/* TODAS LAS CATEGORÍAS */
.custom-cat-header-all-categories {display: none;}
body.navigation-categories .custom-cat-header-all-categories, body.navigation-topics .custom-cat-header-all-categories {
    display: block; 
    background-color: #b1880b;
}
.custom-cat-header-all-categories h1 {color: #d4a411;}

/* TÉCNICA DE EJECUCIÓN */
.custom-cat-header-playing-technique {display: none;}
body.category-playing-technique .custom-cat-header-playing-technique {
    display: block; 
    background-color: #9c2116;
}
.custom-cat-header-playing-technique h1 {color: #d62e1f;}
body.category-playing-technique .custom-cat-header-all-categories {display: none;}

/* ¡Repetir para todas las demás categorías! */

HTML (en la sección “Después del encabezado”):

<!-- TODAS LAS CATEGORÍAS -->
<div class="custom-cat-header custom-cat-header-all-categories">
    <a href="https://forum.troygrady.com/"><h1>Todas las categorías</h1></a>
    <p>¡Bienvenido al foro de Cracking the Code!</p>
</div>

<!-- TÉCNICA DE EJECUCIÓN -->
<div class="custom-cat-header custom-cat-header-playing-technique">
    <a href="https://forum.troygrady.com/c/playing-technique"><h1>Técnica de ejecución</h1></a>
    <p>Pickslanting, agrupación, digitación, mecánica del movimiento: haz aquí tus preguntas técnicas.</p>
</div>

<!-- ¡Repetir para todas las demás categorías! -->

Esto es bastante pulido visualmente… pero también muy personalizado / hacky con muchas ediciones manuales repetitivas. Suficientemente fácil para nuestras ~docena de categorías, pero para mayor flexibilidad, podría ver esto como un complemento simple que:

capture e inserte automáticamente las descripciones de las categorías
maneje automáticamente los cálculos de color (los nuestros son similares a los colores de las categorías, pero hicimos manualmente el color de fondo del encabezado un poco más oscuro y el color del texto del “pastilla” h1 un poco más claro para un mejor contraste / legibilidad).

No tengo experiencia creando complementos. Pero por ahora, un componente de tema que combine lo que @lll y yo hemos desarrollado suena como un buen siguiente paso.

subtenko · 2 Abril, 2018 17:39

Hey @lll I didnt see your reply before, and I didn’t test yours out before seeing bts’s version but I like that you did Javascript, leads to more connection when editing/change styles. It would be awesome if this was a theme component, idk how to do that yet but here’s what I did with bts’ code:

<!-- After Header section -->

<!-- PLAYING TECHNIQUE -->
<div class="custom-cat-header custom-cat-header-nites-cinema">
    <a href="https://forum.troygrady.com/c/playing-technique"><h1>Playing Technique</h1></a>
    <p>Pickslanting, chunking, fretting, motion mechanics — ask your technical questions here.</p>
    <img src="https://d11a6trkgmumsb.cloudfront.net/original/3X/c/b/cb4bec8901221d4a646e45e1fa03db3a65e17f59.png">
</div>

I added that img src things as a random idea I had after I was done with doing the below edit. Obviously you gotta make another style rule to make sure the img/icon fits in the header (I did it via inspect elements), the main thing I was going for:

/* In common CSS */

/* PLAYING TECHNIQUE */
.custom-cat-header-nites-cinema {display: none;}
body.category-nites-cinema  .custom-cat-header-nites-cinema {
    display: block; 
    background: url('http://wallpaperscraft.com/image/starry_sky_tree_milky_way_radiance_120245_602x339.jpg') 0px -300px fixed no-repeat;}
.custom-cat-header-playing-technique h1 {color: #d62e1f;}
body.category-playing-technique .custom-cat-header-all-categories {display: none;}

/* repeat for all other categories! */

This is what I did on my old forum version of bbpress which was a edit of a clone to make it look like flarum, Reference: https://github.com/Sceko/bbFlarum

but I added in background image and fixed position to make it look cool

The result:

What can be done with a theme component if you add in my idea:

javascript to pull in icon banner (if people like that) from category image or wherever
javascript pulling in background img sources vs manually entering
A commentedout CSS section for people who wanna do my edit, explaining what it does.

Thoughts? Again, thanks for the input both of you, and everyone in this topic

McBlu · 2 Abril, 2018 18:09

I am definitely interested in implementing this once it gets sorted. Thumbs up, guys.

subtenko · 2 Abril, 2018 19:56

So theres gonna be a bit of redundancy if you choose to have category image and description turned on, unless you wanna have different stuff in the header or just a background. Just gonna have to decide and finagle with the theme because I dont think category image and description is a themeable thing, its a build it setting for discourse.

Still awesome to have these options. All im gonna have is 2 main themes for my forums. Sometimes i get in an indecisive/perfectionist loop

subtenko · 3 Abril, 2018 16:09

Yea the example you posted and the one I edited, it shows up on 2 of those locations (for category banner)

Off the top of your head is there a way to just show it on one of those pages (ie. Only on topic pages?[ The actual posts inside the category] ) vss CSS? If not do you think JavaScript could do it?

Well my edit I was gonna post is this: (For disabling the category description and logo only in the category page and nowhere else)

.category-heading {
clear: both;
display: none;
}

Then @awesomerobot comes along and totally 1ups me,lol. Yea dude that looks way better than the manual edits I was gonna do

awesomerobot · 3 Abril, 2018 17:31

I put together a rough theme component for this so you don’t have to create a bunch of redundant markup to show/hide… This will pull the appropriate category name, description, and background/text colors when you’re on a category list page.

My JS is hacked up from a few different posts on Meta, so definitely please improve it if you can.

Put this in common/header

<script type="text/discourse-plugin" version="0.8">
    const container = Discourse.__container__;    
    const { h } = require('virtual-dom');
   
    api.createWidget('category-header-widget', {
        tagName: 'span', 
        html(attrs, state) {
        
        const path = window.location.pathname;
        let category;
          
        const controller = container.lookup('controller:navigation/category');
        category = controller.get("category");
        
        if(/^\/c\//.test(path)) {
            $("body").addClass("category-header");            
            return h('div.category-title-header', {
                "attributes" : {
                    "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
                }

            }, h('div.category-title-contents', [
                    h('h1', category.name),   
                    h('p', category.description_text)          
                ])
            );
            } else {
                $("body").removeClass("category-header");
            }   
        }      
    }),

    api.decorateWidget('category-header-widget:after', helper => {
        helper.widget.appEvents.on('page:changed', () => {
            helper.widget.scheduleRerender();
        });
    });

</script> 
  
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
    {{mount-widget widget="category-header-widget"}}
</script>

This is common/CSS

.category-title-header {
  padding-top: 60px;
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
  .category-title-contents {
    max-width: 500px;
    padding: 40px 0;
  }
}
.category-header {
 #main-outlet {
     padding-top: 20px;
 }
}

You can also target specific category headers with additional custom CSS by using this structure:

body.category-example {
    .category-title-header {
        background: url(example.jpg);
    }
}

With some time this could definitely be improved to support tags & topic titles!

Update: Made some refinements and put this in a repo as a theme component

BlackKnob · 3 Abril, 2018 18:18

This already works great @awesomerobot!
Could you please add an “All Categories” banner as well?

robotnjik · 8 Abril, 2018 11:27

Nice work! Anyone having this live on their Discourse? I would like to check it out how looks like…

Francois_Douville · 20 Abril, 2018 18:34

I add this in my forum and it’s perfect! A little thing is that it takes only the first lines of the description of the categories and don’t show links.

This is my text with links :

We only see the first two lines (and without links)

oshyan · 16 Julio, 2021 20:28

Me gustaría que hubiera más discusión aquí sobre algunos de los otros aspectos potencialmente agradables de Flarum. Flarum finalmente ha alcanzado la versión 1.0. Aunque sigo considerando que Discourse es superior en la mayoría de los aspectos, también me gustan algunas cosas del diseño y la interfaz de usuario de Flarum. Por eso, espero que si otros también echan de menos cierta estética similar a la de Flarum, se unan a esta conversación. Tal vez así podamos finalmente crear un tema (yo, lamentablemente, carezco de las habilidades necesarias, pero podría contribuir económicamente a un esfuerzo colectivo si hay interés).

Por ahora, para empezar a abordar aspectos distintos al encabezado, creo que la barra lateral puede replicarse en gran medida con:

Aunque no admite etiquetas. Alternativamente, esta otra opción:

El problema es que ambas parecen necesitar una actualización, mantenimiento o refactorización.

Una característica o enfoque de diseño que, hasta donde sé, está completamente ausente en Discourse es un área de respuesta más evidente, con apariencia de cuadro de texto, que considero una alternativa agradable al botón “Responder”:

Fíjense cómo esto va más allá de ser simplemente un enfoque de respuesta posiblemente “más fácil” o que parece “sin fricción”. La inclusión de la imagen del avatar ya presente es un detalle interesante que, personalmente, creo que fomenta la interacción, ya que sutilmente te hace sentir que ya estás involucrado.

De hecho, creo que esta es probablemente una idea lo suficientemente buena como para merecer su propia solicitud de característica.

merefield · 16 Julio, 2021 21:24

También considera: Layouts Plugin

oshyan · 16 Julio, 2021 22:14

¡Oh, sí, buen punto! Lo probaré lo antes posible.

codinghorror · 19 Julio, 2021 22:18

Correcto; que la respuesta sea una acción distinta que debas activar, en lugar de un cuadro de entrada prellenado, es un elemento de diseño muy intencional desde los primeros días de Discourse. Queremos fomentar la lectura, no responder de inmediato porque “alguien tiene la razón en internet”. Creo que muchos de los problemas actuales en internet se deben a que demasiadas personas responden demasiado rápido, sin pensar lo suficiente.

La introducción de la función de chat también debería aliviar la presión del impulso de “debo responder inmediatamente con la primera emoción que me viene a la mente” y dirigirlo de manera más adecuada.

Si quieres una barra lateral, esa es una función de Teams.

Tema		Respuestas	Vistas
Which is Better? Discourse or Flarum? Community Building	31	37179	16 Agosto 2021
Possible to emulate old-style PHPBB like design? UX	29	2945	13 Noviembre 2018
Theme like meta.discourse.org (was PAID) Support unsupported-install	16	828	8 Diciembre 2022
A reddit-ish theme for Discourse Theme	113	14792	10 Abril 2026
Discourse theme to look like Skool Marketplace	16	488	7 Noviembre 2024

¿Qué tan difícil sería hacer que la interfaz de Discourse se parezca más a Flarum?

Temas relacionados