# 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:** [3월 20, 2018, 6: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:** 20
**Page:** 1
### Author:  [@subtenko](https://meta.discourse.org/u/subtenko)
#### Post date: [3월 20, 2018, 6:43오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/1 "2018-03-20T18:43:45Z")
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 😃
---
### Author:  [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [3월 20, 2018, 7:06오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/2 "2018-03-20T19:06:07Z")
> [@subtenko](#):
>
> Search bar is all in the same sticky header and not a ‘nook’
> [@Pavilion Header Search Theme Component](https://meta.discourse.org/t/header-search-theme/67959):
>
> warning This theme component is no longer maintained. See [below](https://meta.discourse.org/t/pavilion-header-search-theme-component/67959/70) for more information Alternatives include [Advanced Header Search](https://meta.discourse.org/t/header-search/194093) and [Advanced Search Banner](https://meta.discourse.org/t/search-banner/122939) Repository: [GitHub - paviliondev/discourse-header-search-theme](https://github.com/angusmcleod/discourse-header-search-theme)[Preview on Theme Creator](https://theme-creator.discourse.org/theme/awesomerobot/header-search) This is a re-packaging of the [Header Search Plugin](https://meta.discourse.org/t/header-search-plugin/36435) so it can be used as a theme. The functionality is the same as the plugin. See further: [https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/1504…](https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/15043/16)
---
### Author:  [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3월 21, 2018, 8:49오전 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/3 "2018-03-21T08:49:09Z")
The answer is that it would be easy.
Discourse has a Theming system (see [themes](https://meta.discourse.org/tags/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](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950), 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](https://meta.discourse.org/t/header-search-theme/67959) for the header search part of your list.
---
### Author:  [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [3월 21, 2018, 10:10오전 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/4 "2018-03-21T10:10:21Z")
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).
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [3월 22, 2018, 12:28오전 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/5 "2018-03-22T00:28:10Z")
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?
---
### Author:  [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [3월 22, 2018, 12:54오전 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/6 "2018-03-22T00:54:01Z")
> [@alehandrof](#):
>
> 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.
It could be done with a theme component, though it would require some javascript.
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [4월 2, 2018, 3:17오전 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/8 "2018-04-02T03:17:26Z")
I just remembered there’s some prior art on this by @bts here:
> [@Do you have original customisations?](https://meta.discourse.org/t/do-you-have-original-customisations/75905/6):
>
> Here’s our forum!: We’re using a pretty vanilla install, i.e. not really any plugins beyond the [WP Discourse](https://github.com/discourse/wp-discourse) plugin for SSO with our Wordpress site. But we’ve done some fairly extensive frontend / design tweaks. Aside from color scheme and some UI adjustments and simplifications I think the most noticeable thing we did is add a visual header banner for each category. We liked how this looked on some other sites we came across e.g. [Flarum](https://discuss.flarum.org/t/meta) and found it nice to have extra visual distinction for…
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.
---
### Author:  [@bts](https://meta.discourse.org/u/bts)
#### Post date: [4월 2, 2018, 1: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")
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/):
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
```
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!
---
### Author:  [@subtenko](https://meta.discourse.org/u/subtenko)
#### Post date: [4월 2, 2018, 5:39오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/10 "2018-04-02T17:39:50Z")
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:
```
```
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](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:**
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
---
### Author:  [@McBlu](https://meta.discourse.org/u/McBlu)
#### Post date: [4월 2, 2018, 6:09오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/11 "2018-04-02T18:09:15Z")
I am definitely interested in implementing this once it gets sorted. Thumbs up, guys.
---
### Author:  [@subtenko](https://meta.discourse.org/u/subtenko)
#### Post date: [4월 2, 2018, 7:56오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/12 "2018-04-02T19:56:34Z")
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
---
### Author:  [@subtenko](https://meta.discourse.org/u/subtenko)
#### Post date: [4월 3, 2018, 4:09오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/14 "2018-04-03T16:09:41Z")
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 😮
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [4월 3, 2018, 5:31오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/15 "2018-04-03T17:31:14Z")
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
```JS
```
This is common/CSS
```SCSS
.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:
```SCSS
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
> [@Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241):
>
> discourse2Summary Category Banners uses existing category details to create banners for your category pages (for tags check out [Discourse Tag Banners](https://meta.discourse.org/t/discourse-tag-banners/124240)).eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-banners)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-category-banners](https://github.com/discourse/discourse-category-banners)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Category Banners uses existing category details to cr…
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [4월 3, 2018, 6:18오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/16 "2018-04-03T18:18:39Z")
This already works great @awesomerobot!
Could you please add an “All Categories” banner as well?
---
### Author:  [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [4월 8, 2018, 11:27오전 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/17 "2018-04-08T11:27:10Z")
Nice work! Anyone having this live on their Discourse? I would like to check it out how looks like…
---
### Author:  [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [4월 20, 2018, 6:34오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/18 "2018-04-20T18:34:30Z")
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)
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [7월 16, 2021, 8:28오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/19 "2021-07-16T20:28:49Z")
여기서 Flarum의 다른 몇 가지 잠재적으로 좋은 측면에 대해 더 많은 논의가 이루어졌으면 좋겠습니다. Flarum이 마침내 1.0으로 정식 출시되었습니다. 대부분의 측면에서 Discourse가 더 우수하다고 여전히 느끼면서도, 저는 Flarum의 디자인/UI에 대해서도 일부 매력을 느낍니다. 따라서 다른 분들도 Flarum 특유의 미학이 그리운 마음이 있다면, 여기에 의견을 남겨 주셨으면 합니다. 그러면 마침내 해당 테마가 개발될 수 있지 않을까요? (저는 아쉽게도 관련 기술이 부족하지만, 관심사가 있다면 그룹 프로젝트에 금전적으로 기여할 수는 있을 것입니다.)
현재 헤더 외의 문제를 해결하기 위해 시작점으로, 사이드바는 대부분 아래 링크를 통해 재현할 수 있다고 생각합니다:
> [@Sidebar with categories](https://meta.discourse.org/t/sidebar-with-categories/104165):
>
> This plugin shows categories on the page sidebar on all discovery list pages (latest, new, unread but not on the single topic page, and categories). Screenshot: Blocks can be ordered in the plugin settings. Speaking of which, there are these settings under Admin \> Settings \> Plugins: sidebar enable enables the display of the sidebar sidebar custom content where you can enter arbitrary HTML content to show on the sidebar Repository: [GitHub - Toxuru/discourse-s…](https://github.com/Toxuru/discourse-sidebar-categories)
다만 태그는 지원하지 않습니다. 또는 이 링크:
> [@Discourse Sidebar Blocks](https://meta.discourse.org/t/discourse-sidebar-blocks/51457):
>
> warning This plugin is now deprecated. Please use the [Right Sidebar Blocks](https://meta.discourse.org/t/right-sidebar-blocks/231067) theme component instead. This plugin shows a list of blocks as a sidebar on all discovery list pages (latest, new, unread, categories but not on the single topic page). The available blocks at this point (Oct. 12 2016) are the following: multiple category posts (6 items max per category) latest replies (5 items) a custom html block Blocks can be ordered in the plugin settings. Speaking of which, there are these se…
문제는 두 가지 모두 업데이트/유지보수 또는 리팩토링이 필요한 것으로 보인다는 점입니다.
제 지식 범위 내에서(AFAIK) Discourse에서 완전히 누락된 것으로 보이는 기능/디자인 접근법은 더 명확한 텍스트 박스 형태의 “답글” 영역입니다. 저는 이것이 “답글” 버튼의 좋은 대안이 된다고 생각합니다:
이것이 단순히 더 “쉬워 보이는” 또는 “저마찰” 답글 접근법 그 이상이라는 점에 주목해 보세요. 이미 _그 자리에 있는_ 아바타 이미지의 추가는 실제로 흥미로운 세부 사항으로, 저는 이것이 사용자가 이미 대화에 참여하고 있다는 느낌을 은연중에 주어 상호작용을 촉진한다고 개인적으로 생각합니다.
사실, 이것은 독립적인 기능 요청을 받을 만큼 충분히 좋은 아이디어라고 생각합니다…
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [7월 16, 2021, 9:24오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/20 "2021-07-16T21:24:49Z")
다음도 참고하세요: [Layouts Plugin](https://meta.discourse.org/t/custom-layouts-plugin/55208?u=merefield)
---
### Author:  [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [7월 16, 2021, 10:14오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/21 "2021-07-16T22:14:40Z")
아, 맞아요, 좋은 지적이네요! 최대한 빨리 시도해볼게요.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 19, 2021, 10:18오후 UTC](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430/22 "2021-07-19T22:18:11Z")
맞습니다. 답글을 입력란에 미리 채워두는 것이 아니라, 사용자가 직접 트리거해야 하는 별도의 동작으로 설계한 것은 디스코스의 초기부터 매우 의도적으로 채택한 설계 요소입니다. 우리는 즉각적인 답글보다는 ["인터넷에서 누군가가 틀렸을 때"라는 심리](https://xkcd.com/386/)를 방지하기 위해 읽기를 장려하고자 합니다. 현재 인터넷에서 발생하는 많은 문제들은 충분한 생각 없이 너무 많은 사람들이 너무 빨리 반응하기 때문에 비롯된다고 생각합니다.
채팅 기능의 도입은 또한 "생각난 대로 즉각적인 감정으로 반응해야 한다"는 충동에서 오는 부담을 덜어주고, 이를 더 적절하게 유도하는 데에도 도움이 될 것입니다.
사이드바가 필요하시다면, 그것은 팀즈(Teams)의 기능입니다.
[Next page](https://meta.discourse.org/t/how-difficult-would-it-be-to-make-the-discourse-ui-more-like-flarum/83430.md?page=2)
