How to customize Flarum?

jason

I'm trying to figure out how to add for example the orange thin bar at the top of the page like on these forums. Also, how would you go about adding an image logo and navbar links just like on here again?

Toby

You can enter custom CSS in the admin CP. On this forum, for the thin orange bar at the top, we have:

.App-header {
  border-top: 4px solid #E7742E;
  padding: 6px;
}

As for the logo and links, that's done using a custom template. Making that kind of customisation easier is on the roadmap.

jason

Toby Thanks, the custom CSS worked. Is there any way you could make public the custom template that this forum is using? Just as a solution for the meantime until the feature is officially released.

SirParadox

Toby By any chance could you post the code used for the logo? That would be a great help.

Kulga

At least involving the links. I'd love to mimic that till there's more easier ways.

Toby

View the source of this very page 😉

luceos

@Toby laravel by default uses the central views folder which a package can publish to in order to overrule. I'd love if flarum would support something like that to simply put your own template in a separate folder and it overrules the package one (also dropping forward compatibility - i know). Is that possible? Otherwise I'll write an extension for that (if possible).

Toby

luceos My thought is that this should be an extension. We're already using a very simple one on this forum. We'll likely make this an official bundled extension with an admin interface in the future.

luceos

That looks great Toby something anyway can play with and create an extension for.

skorotkiewicz

Toby how to add more custom style?

namespace Flarum\CustomLayout;
use Flarum\Support\Extension as BaseExtension;
use Illuminate\Events\Dispatcher;
use Flarum\Events\BuildClientView;
use Flarum\Forum\Actions\ClientAction as ForumClientAction;
class Extension extends BaseExtension
{
    public function listen(Dispatcher $events)
    {
        $events->listen(BuildClientView::class, function (BuildClientView $event) {
            if ($event->action instanceof ForumClientAction) {
                $event->view->setLayout(__DIR__.'/forum.blade.php'); // work fine
                //$event->view->setLayout(__DIR__.'/app.blade.php'); // doesn't work
            }
        });
    }
}
return Extension::class;```

BlackSheep

SirParadox

You can always try this :

h1.Header-title a {
    text-indent: -1000000px; /* We dont want you anymore, filthy text */
    overflow: hidden;
    display: block;
    width: ; /* your image width */
    height: ; /* image height */
    background: url(/*path/to/my/img.png */) no-repeat;
    margin-top: 10px; /* adjust to your liking */
}

All of this is intended to be put on your custom CSS box via your admin panel.

sizonov_stas

BlackSheep
~~how to reset this settings?~~

that settles the matter
# vi /var/www/html/flarum/assets/forum-DnRJzqTGwkKTtYMc.css

SirParadox

Thanks 🙂

testo

Hi,

I want to modify the index.php page, but I don't get how it works. I tried to modify the forum.blade.php in /www/flarum/vendor/flarum/core/views but it doesn't work. I removed all the genrated files in storage or in assets.
Is it possible to have more infos ?

Thanks.

Tai

How to customize Layout in current ver not exist class BuildClientView. @Toby ?

Tai

I find out instead class BuildClientView by ConfigureClientView.