# ما مدى صعوبة جعل واجهة مستخدم Discourse تشبه 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 مارس 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:** 1
**Showing post:** 15

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [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")

</div>

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.

 ![35%20PM](https://global.discourse-cdn.com/meta/original/3X/e/0/e011f10c94e42c640391aa41b74867b74dfb6bae.png)

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

```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…

---

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