New Check out Muut IO for developers
Muut Blog

Muut spring cleaning

Janne Lehtinen • 2017-04-18

Muut is known for its simplicity and minimalism. We are proud to include only the necessary features while removing clutter. And we're not afraid to take that further.

When you add a comment section on your webpage, you typically want people to be able to post comments on it.

It’s not really a comment section if that tiny feature is missing, is it?

There are situations, however, when you’d want to disable posting new comments or maybe to hide the “like” feature, and with Muut, you could easily do this with a bit of CSS and/or Javascript.

Finding the elements to hide

Muut is not an iframe. An iframe is a container that displays a separate website on your own site. You can think an iframe as a tv screen inside your page that broadcasts a view of a distant landscape; to make changes in that place, you’d have to travel there and move things around.

Muut is a true embed. Muut becomes a part of your page. Instead of a distant landscape, Muut is in the room with you; to change things there, you walk over and make your changes. Additionally, everything else you change in the room will be reflected.

In more technical terms, Muut’s elements render in place, and as such, they inherit your webpage’s CSS styling — like colors and typography. You can also manipulate them with Javascript just as easily as anything else on the page.

The easiest way to find Muut’s element classes needed for you to hide content is to fire up your browser’s web inspector and see the class names of each item. In many browsers, you can do this by right-clicking the element you want to hide and choosing “Inspect”, “Inspect element”, or similar. Your browser will then highlight the portions of the page that your mouse pointer moves over in the page’s source.

Admins go incognito

Okay, time to get down to business! Let’s say that, for whatever reason, you want to hide the “Admin” badge that shows up on the info row for administrators' posts or replies. Right-click the badge, and you should see a span element with an element class m-mod-badge. Take note of this class name.

Next, we’ll choose the method we want to use to hide the badge.

Hiding elements with CSS

To make an element invisible with CSS, you need to add display: none to the class you found earlier. So to hide the Admin badge, you need to add this code to your page’s <head> or an external stylesheet:

<style> m-mod-badge { display: none; } </style>

Refresh the page, and the badge is gone!

Hiding elements with Javascript

While page styles are a very simple method of hiding unwanted features, assuming you know what you’re looking for, they are also easy to re-enable using the developer tools that we used to find the class name earlier. With Javascript, we can make unhiding a lot more difficult (or impossible, if Muut’s signed embedding option is enabled.)

To be able to modify the Muut instance with Javascript, though, we also need to use it to embed Muut. [Here is the documentation and a demo on Javascript embedding]. To try it out, copy and paste that demo code on your page, replacing the community name with your own. Then, let’s make some modifications.

We are interested in The JavaScript setup portion inside the <script> tags of the demo code. For the code to work on both a Muut forum and a commenting section, we need to look for load events (when the Muut instance is loaded), topic events (when a thread is loaded), and expand events (when a thread gets expanded). Then perform jquery .remove on the desired elements when those events are fired.

Here’s our modified javascript setup:

<script>
  function cleanup() {
    $('.m-mod-badge').remove()              // admin badge
  }
  $('#muut-forum').muut('goma', function(app) {
    app.on('load', cleanup)
    app.on('topic', function(topic) {
      topic.on('expand', cleanup)
      cleanup()
    })
  })
</script>

Just replace the original <script> portion with that, insert your community name, refresh your browser and — badges be gone.

Available classes for removal

A demo page complete with a source code showing — err, or not showing — every possible element removed wouldn’t be that much fun, but here is a list of a few class names you can begin your Muut spring cleaning with:

.m-create                 // new thread post box
.m-replyform              // replybox
.m-like, .m-heart         // like button & likes
.m-menu                   // share menu
.m-users,.m-nav-online    // online menu
.m-forums-wrap            // channels menu
.m-sidebar,.m-nav-forums  // the entire sidebar
.m-meta                   // post meta
.m-facelink               // avatar
.m-time                   // post time
.m-cat                    // origin channel
.m-follow                 // watch button
.m-mod-badge              // admin badge
.m-reply_count            // thread reply count
.m-search input           // search field — note that you also need to hide the pseudo element .m-search:before with CSS

You might want to start a forum with only one channel, and hiding the sidebar might make sense in those situations. Or maybe you’re using Muut with some CMS, and you’d like to remove the ability to comment on blog posts with a publish date older than a year, perhaps? You could setup a logic for that.

Fixing the styles

When removing certain elements, the styling may end up looking a bit funny. Here are some useful styles for cleaner removals:

<style>
  /* Make Muut content full width after removing sidebar */
  .m-page {
    width: 100%;
  }

  /* Decrease indent from replies when removing avatar */
  .m-expanded .m-seed .m-body-wrap, .m-expanded .m-reply {
    padding-left: .5em;
  }
</style>

Wrapping up

So, that wraps up our small Muut spring cleaning session! In the next episode we’ll be taking things up a notch and removing all our posts and banning all our users!

Just kidding.

Have fun decluttering!

The complete discussion system for your site

Try all features 14 days without credit card. After the trial the community is converted to a free, but fully functional service. See plans and pricing.