Quelle serait la difficulté de rendre l'interface utilisateur de Discourse plus similaire à Flarum ?

subtenko · Mars 20, 2018, 6: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 · Mars 20, 2018, 7:06

angus · Mars 21, 2018, 8: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 · Mars 21, 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 · Mars 22, 2018, 12: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 · Mars 22, 2018, 12:54

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

erlend_sh · Avril 2, 2018, 3: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 · Avril 2, 2018, 1:57

Merci @erlend_sh, excellente remarque ! Je n’avais pas encore vu ce sujet. Oui, nous avons consacré du temps l’année dernière exactement à cela, en essayant d’obtenir quelque chose de proche des en-têtes de style Flarum. Voici à quoi cela ressemble sur notre site :

Voici l’essentiel du HTML / CSS que nous avons élaboré pour cela —

CSS :
(Ceci est tout dans « common » — outre cela, il y a aussi quelques ajustements mineurs de marge / padding pour le bureau par rapport au mobile que je n’ai pas inclus ci-dessous.)

/* GÉNÉRAL */

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

/* TOUTES LES CATÉGORIES */
.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;}

/* TECHNIQUE DE JEU */
.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;}

/* répétez pour toutes les autres catégories ! */

HTML (dans la section « Après l’en-tête ») :

<!-- TOUTES LES CATÉGORIES -->
<div class="custom-cat-header custom-cat-header-all-categories">
    <a href="https://forum.troygrady.com/"><h1>Toutes les catégories</h1></a>
    <p>Bienvenue sur le forum Cracking the Code !</p>
</div>

<!-- TECHNIQUE DE JEU -->
<div class="custom-cat-header custom-cat-header-playing-technique">
    <a href="https://forum.troygrady.com/c/playing-technique"><h1>Technique de jeu</h1></a>
    <p>Pickslanting, groupement, fretting, mécanique du mouvement — posez vos questions techniques ici.</p>
</div>

<!-- répétez pour toutes les autres catégories ! -->

C’est visuellement assez abouti… mais aussi très personnalisé / bricolé avec beaucoup d’éditions manuelles répétitives. Assez facile pour nos ~douzaines de catégories, mais pour une plus grande flexibilité, je pourrais voir cela comme un plugin simple qui :

récupérerait et insérerait automatiquement les descriptions des catégories
gérerait automatiquement les calculs de couleur (les nôtres sont similaires aux couleurs des catégories, mais nous avons manuellement rendu la couleur d’arrière-plan de l’en-tête un peu plus foncée et la couleur du texte « pilule » h1 un peu plus claire pour un meilleur contraste / lisibilité).

Je n’ai aucune expérience dans la création de plugins. Mais pour l’instant, un composant de thème combinant ce que @lll et moi avons élaboré semble être une bonne prochaine étape !

subtenko · Avril 2, 2018, 5: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 · Avril 2, 2018, 6:09

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

subtenko · Avril 2, 2018, 7: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 · Avril 3, 2018, 4: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 · Avril 3, 2018, 5: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 · Avril 3, 2018, 6:18

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

robotnjik · Avril 8, 2018, 11:27

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

Francois_Douville · Avril 20, 2018, 6: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 · Juillet 16, 2021, 8:28

J’aimerais qu’on discute davantage ici de certains autres aspects potentiellement intéressants de Flarum. Flarum vient enfin de passer à la version 1.0. Bien que je continue à considérer Discourse comme supérieur à bien des égards, j’aime aussi certains éléments du design et de l’interface utilisateur de Flarum. J’espère donc que, si d’autres regrettent également une esthétique similaire à celle de Flarum, ils viendront aussi donner leur avis ici, et que nous pourrons enfin faire construire un thème (je manque malheureusement des compétences nécessaires, mais je serais peut-être en mesure de contribuer financièrement à un effort collectif si cela intéresse du monde).

Pour l’instant, pour commencer à traiter des éléments autres que l’en-tête, je pense que la barre latérale peut être en grande partie reproduite avec :

Bien que cela ne prenne pas en charge les étiquettes. Sinon, voici une autre option :

Le problème est que les deux semblent avoir besoin d’une mise à jour, d’une maintenance ou d’une refonte.

À ma connaissance, une fonctionnalité ou une approche de conception qui semble totalement absente de Discourse est une zone de « réponse » plus explicite, ressemblant à une zone de texte, ce qui constitue, selon moi, une belle alternative au bouton « Répondre » :

Remarquez que cela va au-delà d’une simple approche de réponse potentiellement « plus facile » ou paraissant « plus fluide ». L’ajout de l’image d’avatar déjà présente est en fait un détail intéressant qui, personnellement, encourage l’interaction car elle vous donne subtilement l’impression d’être déjà impliqué.

En fait, je pense que c’est probablement une idée suffisamment bonne pour mériter sa propre demande de fonctionnalité…

merefield · Juillet 16, 2021, 9:24

Envisagez également : Layouts Plugin

oshyan · Juillet 16, 2021, 10:14

Ah oui, bonne remarque ! Je vais l’essayer dès que possible.

codinghorror · Juillet 19, 2021, 10:18

Exactement ; le fait que la réponse soit une action distincte que vous devez déclencher, plutôt qu’une zone de saisie préremplie, est un élément de conception très intentionnel depuis les tout débuts de Discourse. Nous souhaitons encourager la lecture, et non la réponse immédiate parce que « quelqu’un a tort sur internet ». Je pense que beaucoup de problèmes actuels sur internet peuvent être attribués au fait que trop de gens réagissent trop vite, sans assez réfléchir.

L’introduction de la fonctionnalité de chat devrait également soulager la pression de l’impulsion « je dois répondre immédiatement avec la première émotion qui me vient à l’esprit », et la rediriger de manière plus appropriée.

Si vous voulez une barre latérale, c’est une fonctionnalité de Teams.

Sujet		Réponses	Vues
Which is Better? Discourse or Flarum? Community Building	31	37189	Août 16, 2021
Possible to emulate old-style PHPBB like design? UX	29	2945	Novembre 13, 2018
Theme like meta.discourse.org (was PAID) Support unsupported-install	16	828	Décembre 8, 2022
A reddit-ish theme for Discourse Theme	113	14842	Avril 10, 2026
Discourse theme to look like Skool Marketplace	16	488	Novembre 7, 2024

Quelle serait la difficulté de rendre l'interface utilisateur de Discourse plus similaire à Flarum ?

Sujets connexes