Styling for flarum/embed when used as commenting system on website

justin

First of all, a massive thank you to developers/contributors of Flarum! This is such a fantastic piece of software!

My Issue

I've successfully installed flarum/embed and it works when embedded as an iFrame. Unfortunately, the native styling isn't exactly to my liking (see below) and I'd like to change it to improve UX.

My issue is that it basically looks like I've just embedded a tiny version of my whole forum rather than just a comment area.

Specifically, I'd like to get rid of the back button and move the buttons up all to the same level to achieve something that looks more like the fine example from the Wheeler Center blog.

I've spent quite a bit of time hacking away under the Custom CSS section of Flarum, but haven't been able to achieve anything close. Also, I'm wonder if this is even the right area to be modifying or if I should be modifying CSS/LESS files from the actual flarum/embed extension.

Any help on what classes/ids I should be looking at or even the best way to go about this would be amazing.

Thank you!

clarkwinkelmann

justin Flarum works with a concept of "frontends", where each frontend can have its own set of CSS. By default there's forum and admin, and I think the custom CSS is applied to all frontends.

The embed extension actually registers a new frontend named embed which can have its own CSS. That's how the extension can include some CSS that only applies to it.

What you could do to alter that styling. From a second extension or the local extend.php, you should be able to register additional CSS for the embed frontend using our Frontend extender. Something like this added to the array in extend.php:

    (new Extend\Frontend('embed'))
        ->css(__DIR__.'/path/to/custom.less')

The content of that file will be added to the compiled CSS file that the embed extension loads on its page.

I believe that technically, the embed extension actually loads both the forum frontend CSS and the embed frontend CSS. When you look at the content of the compiled embed CSS file, it only contains what has been registered by the extension itself.

justin

And ... that worked! Thanks so much.

For those that are trying to get slightly nicer styling, I followed clarkwinkelmann's suggestion and added:

(new Extend\Frontend('embed')) ->css(__DIR__.'/path/to/custom.less')

to extend.php.

My custom.less file had something like this, which hides the back button and gets everything inline when embedded on my site (I'm sure it's hack-is, but it does work):

@media (max-width: 767px) {
    .DiscussionPage-nav>ul>li.item-controls,
    .DiscussionPage-nav>ul>li.item-scrubber {
        margin: 0;
        display: inline;
    }

    .DiscussionPage-nav>ul .item-replies {
        display: inline;
        margin-bottom: 10px;
	margin-left: 25px;
    }

    div#app-navigation {
        visibility: hidden;
        display: none;
    }

    h3{
      display:inline;
    }

    ul{
      padding-left:25px;
    }
}

I used the media@ because the Flarum forum width isn't fullscreen when embedded in my site and it was only having problems at the reduced size. When I viewed the post directly in full screen width, the reply box looked quite nice.

The end result looks something like:

Thanks again!