Wie schwierig wäre es, die Discourse-Benutzeroberfläche flarum-ähnlicher zu gestalten?

[subtenko]

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

[notriddle (Michael Howell)]

@subtenko

Search bar is all in the same sticky header and not a ‘nook’

Pavilion Header Search Theme Component

This theme component is no longer maintained. See below for more information Alternatives include Header Search and Search Banner [55%20AM] Repository: GitHub - paviliondev/discourse-header-search-theme Preview on Theme Creator This is a re-packaging of the Header Search Plugin 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/15043/16?u=angus

[angus (Angus McLeod)]

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.

[alehandrof (Alex Armstrong)]

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

[BlackKnob]

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?

[notriddle (Michael Howell)]

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

[erlend_sh (Erlend Sogge Heggen)]

I just remembered there’s some prior art on this by @bts here:

Do you have original customisations?

Here’s our forum!: We’re using a pretty vanilla install, i.e. not really any plugins beyond the 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 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.

[bts (Brendan Schlagel)]

Danke @erlend_sh, guter Fang! Ich habe dieses Thema noch nicht gesehen. Ja, wir haben letztes Jahr genau das gleiche Thema bearbeitet, um etwas zu erreichen, das den Flarum-ähnlichen Kopfzeilen nahekommt. So sieht es auf unserer Seite aus:

Und hier ist der Kern des HTML/CSS, das wir dafür entwickelt haben:

CSS:
(Alles befindet sich in „common" – abgesehen davon gibt es noch einige kleinere Anpassungen für Margins und Padding zwischen Desktop und Mobile, die ich unten nicht aufgeführt habe.)

/* ALLGEMEIN */

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

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

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

/* Für alle anderen Kategorien wiederholen! */

HTML (im Abschnitt „Nach Kopfzeile"):

<!-- ALLE KATEGORIEN -->
<div class="custom-cat-header custom-cat-header-all-categories">
    <a href="https://forum.troygrady.com/"><h1>Alle Kategorien</h1></a>
    <p>Willkommen im Cracking the Code Forum!</p>
</div>

<!-- SPIELTECHNIK -->
<div class="custom-cat-header custom-cat-header-playing-technique">
    <a href="https://forum.troygrady.com/c/playing-technique"><h1>Spieltechnik</h1></a>
    <p>Pickslanting, Chunking, Greifen, Bewegungsmechanik – stellen Sie hier Ihre technischen Fragen.</p>
</div>

<!-- Für alle anderen Kategorien wiederholen! -->

Das sieht optisch ziemlich poliert aus, ist aber auch sehr maßgeschneidert / „hacky" mit vielen repetitiven manuellen Änderungen. Für unsere rund ein Dutzend Kategorien ist das leicht zu handhaben, aber für mehr Flexibilität könnte ich mir vorstellen, dass dies als einfaches Plugin cool wäre, das:

• automatisch die Kategoriebeschreibungen abruft und einfügt
• automatisch Farbberechnungen übernimmt (unsere sind den Kategorielfarben ähnlich, aber wir haben die Hintergrundfarbe der Kopfzeile manuell etwas dunkler und die Textfarbe der h1 „Pille" etwas heller gemacht, um einen besseren Kontrast / eine bessere Lesbarkeit zu erzielen).

Ich habe keine Erfahrung mit der Erstellung von Plugins. Aber für den Moment klingt ein Theme-Komponente, die das kombiniert, was @lll und ich entwickelt haben, wie ein guter nächster Schritt!

[subtenko]

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://d11a6trkgmumsb.cloudfront.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: 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

[McBlu (Blu McCormick)]

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

[subtenko]

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

[subtenko]

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

[awesomerobot (Kris)]

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

Category Banners

Summary Category Banners uses existing category details to create banners for your category pages. It uses the category name, description, and color to generate a banner at the top of the relevant category pages (for tags check out Discourse Tag Banners). Preview Preview on theme-creator.discourse.org Repository Link https://github.com/discourse/discourse-category-banners New to Discourse Themes? Beginner’s guide to using…

[BlackKnob]

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

[robotnjik]

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

[Francois_Douville (François Douville)]

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)

[oshyan (Oshyan Greene)]

Ich wünschte, es gäbe hier mehr Diskussionen über einige der anderen potenziell schönen Aspekte von Flarum. Flarum ist endlich zur Version 1.0 gereift. Obwohl ich nach wie vor der Meinung bin, dass Discourse in den meisten Punkten überlegen ist, gefallen mir auch einige Aspekte des Designs und der Benutzeroberfläche von Flarum. Ich hoffe daher, dass sich andere, die ähnlich nach einer Flarum-ähnlichen Ästhetik vermissen, hier ebenfalls melden. Vielleicht können wir dann endlich ein Theme entwickeln (ich verfüge leider nicht über die nötigen Fähigkeiten, könnte aber bei Interesse finanziell zu einem gemeinsamen Projekt beitragen).

Um zunächst einmal Dinge abseits der Kopfzeile anzugehen, lässt sich die Seitenleiste meiner Einschätzung nach größtenteils mit folgendem Ansatz nachbilden:

Sidebar with categories

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: [screenshot1] 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 [screenshot2] Repository: GitHub - evgip/discourse-si…

Allerdings werden damit keine Tags unterstützt. Alternativ könnte man dies versuchen:

Discourse Sidebar Blocks

This plugin is now deprecated. Please use the Right Sidebar Blocks 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…

Das Problem ist, dass beide Ansätze scheinbar aktualisiert, gewartet oder refaktoriert werden müssen.

Eine Funktion bzw. ein Designansatz, der Discourse meines Wissens nach vollständig fehlt, ist ein offensichtlicher, textfeldartiger Bereich für „Antworten“, den ich als eine schöne Alternative zum „Antworten“-Button betrachte:

Beachten Sie, dass dies mehr ist als nur ein möglicherweise „einfacherer“ oder „reibungsloserer“ Ansatz für Antworten. Die Tatsache, dass das Avatar-Bild bereits vorhanden ist, ist ein interessanter Detailaspekt, der meiner persönlichen Meinung nach die Interaktion fördert, da er Sie subtil das Gefühl haben lässt, bereits involviert zu sein.

Tatsächlich halte ich diese Idee für gut genug, um eine eigene Feature-Anfrage zu rechtfertigen…

[merefield (Robert)]

Bedenken Sie auch: Layouts Plugin

[oshyan (Oshyan Greene)]

Oh ja, guter Punkt! Ich werde es so schnell wie möglich ausprobieren.

[codinghorror (Jeff Atwood)]

Richtig; dass eine Antwort eine eigenständige Aktion ist, die du auslösen musst, statt ein vorausgefülltes Eingabefeld zu sein, ist ein bewusstes Designelement aus den allerersten Tagen von Discourse. Wir möchten das Lesen fördern, nicht das sofortige Antworten weil „jemand im Internet falsch liegt“. Ich denke, viele aktuelle Probleme im Internet lassen sich darauf zurückführen, dass zu viele Menschen zu schnell und ohne ausreichende Überlegung reagieren.

Die Einführung der Chat-Funktion sollte auch den Druck nehmen, aus dem Impuls heraus sofort mit der ersten Emotion zu antworten, die einem in den Sinn kommt, und diese Energie besser kanalisieren.

Wenn du eine Seitenleiste möchtest, ist das eine Funktion von Teams.