How difficult would it be to make the Discourse UI more like Flarum?


#1

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:

  1. Topic list is centered with no lines in between, yet its still easy to read.
  2. Search bar is all in the same sticky header and not a ‘nook’
  3. 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 :smiley:


How to expand the category logo and remove description
(Michael Howell) #2

(Angus McLeod) #3

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.


(Alex Armstrong) #4

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


#5

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?


(Michael Howell) #6

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


(Joe) #7

Here’s a start on the topic banner (mind you, this is not 100% polished and is hard-coded)

CSS

#topic-title {
	background: #b4b4b4; // change the banner color value for uncategorized topics here
	height: 125px; // change the overall height here
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
}

.container.posts {
	margin-top: 145px;
	display: flex;
	justify-content: center;
}

#topic-title .title-wrapper {
	width: 100vw;
	flex-direction: column-reverse;
	text-align: center;
}

.topic-category {
	align-self: center;
}

#main-outlet {
	padding-top: 64px;
}

#post_1 {
	.topic-avatar,
	.topic-body {
		border-top: none;
	}
}

.timeline-container {
	margin-top: 25px;
}

And this goes in the </head> section:

<script type="text/discourse-plugin" version="0.8.18">
api.addPostTransformCallback(t => {
	$(function() {
		var $bgco = $("#topic-title .badge-category-bg[style]").css('background-color').replace(')', ', 0.85)').replace('rgb', 'rgba');
		$("#topic-title").css("background-color", $bgco);
	});
});
</script>

And what that will do is set the banner background color based on the parent category color for the topic. I don’t know what the colors in Flarum are based on. I stole this method for firing script on topic pages from @tshenry :grin: so thanks a whole bunch for this!

I set it to .85 alpha to take the edge off the color, but it’s your choice.

The end result is something like this:

Or this:

The only thing I can promise at this point is bugs! :sweat_smile: but I’ve ironed out the worst offenders and I’m willing to fix any other bugs if needed.

I will say this one more time. This is not polished yet :grinning:


(Erlend Sogge Heggen) #8

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.


(Brendan Schlagel) #9

Thanks @erlend_sh good catch! Didn’t see this topic yet. Yes we spent some time last year on exactly this, trying to get something close to the Flarum-style headers. This is what it looks like on our site:

And here’s the gist of the HTML / CSS we came up with for this—

CSS:
(This is all in “common” — besides this there are also a few minor margin / padding tweaks for desktop vs. mobile I didn’t include below.)

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

/* ALL CATEGORIES */
.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;}

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

/* repeat for all other categories! */

HTML (in “After Header” section):

<!-- ALL CATEGORIES -->
<div class="custom-cat-header custom-cat-header-all-categories">
    <a href="https://forum.troygrady.com/"><h1>All Categories</h1></a>
    <p>Welcome to the Cracking the Code Forum!</p>
</div>

<!-- PLAYING TECHNIQUE -->
<div class="custom-cat-header custom-cat-header-playing-technique">
    <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>
</div>

<!-- repeat for all other categories! -->

This is pretty visually polished…but also very custom / hacky with lots of repetitive manual edits. Easy enough for our ~dozen categories, but for greater flexibility I could see this being cool as a simple plugin that would:

  • automatically grab and insert the category descriptions
  • automatically handle color calculations (ours are similar to category colors but we manually made the header bg color a bit darker and the h1 “pill” text color a bit lighter for better contrast / readability).

I have no experience making plugins. But for now a theme component combining what @lll and I have come up with sounds like a good next step!


Do you have original customisations?
Discourse Button Styles
#10

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://meta-s3-cdn.freetls.fastly.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: GitHub - Sceko/bbFlarum: Theme for bbPress like Flarum

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

The result:

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

  1. javascript to pull in icon banner (if people like that) from category image or wherever
  2. javascript pulling in background img sources vs manually entering
  3. 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


(Blu McCormick) #11

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


#12

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


(Joe) #13

Sure that sounds perfect, count me in :grinning:

It’s ok if we start with something very basic and build on it as we go.

I took a quick look and there are three separate “types” of banners

  1. On the homepage:

    • background color
    • Welcome header
    • short blurb about the site
  2. On category pages:

    • background color based on category color
    • category name
    • category description
  3. On topic pages

    • background color based on topic category
    • topic meta information
    • topic title

I really like @bts’s method of adding a separate div and adding all that stuff there. I also like @subtenko’s idea of maybe including the category image in there. We can use theme settings to toggle things on and off.

I will get started on creating a basic banner that inherits the category color with cleaner code and post the results here.


fyi @bts your theme looks fantastic :grin::ok_hand:


#14

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


(Kris) #15

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


#16

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


#17

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


(François Douville) #18

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)