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

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

example1
example12438×1272 258 KB

example2
example22426×1268 245 KB

example3
example32440×1276 265 KB

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!

16 Likes