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

**URL:** https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430
**Category:** UX
**Created:** [20 maart 2018 om 18:43 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430 "2018-03-20T18:43:45Z")
**Posts on this page:** 1
**Showing post:** 9

<div class="post-metadata">

### Author: ![bts](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bts/32/184556_2.png) [@bts](https://meta.discourse.org/u/bts)
#### Post date: [2 april 2018 om 13:57 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/9 "2018-04-02T13:57:18Z")

</div>

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](https://forum.troygrady.com/):

 ![example1](https://global.discourse-cdn.com/meta/original/4X/b/1/1/b1105e29091c38eadbc825480a2bd559ce137f51.jpeg)  
 ![example2](https://global.discourse-cdn.com/meta/original/4X/f/c/b/fcb36861026d5cc57d207a76a096d96a66cb8385.jpeg)  
 ![example3](https://global.discourse-cdn.com/meta/original/4X/7/9/f/79f2e5c12d5519fc4d9ddef54b7a504dc9dbf29f.jpeg)

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

```plaintext
/* 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):

```plaintext
<!-- 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!

---

_[View the full topic](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430)._