Custom navigation

When you set up a Muut forum, the sidebar with channels is created by default.

This default navigation can also be customized with HTML. You can set up subchannels, sticky posts/threads, ads, banners, images, polls or forms.

navi-forum

You'll use a slightly different installation syntax when setting up custom HTML. Here is a minimal example:

<!-- Muut placeholder tag -->
<div class="muut">

  <!-- Muut API -->
  <a class="muut-url" href="https://muut.com/i/your_forumname">Acme forums</a>

  <!-- Custom HTML -->
  <a href="/a/link/to/somewhere.html">
    <img src="/an/awesome/image.png">
  </a>

</div>
<script src="//cdn.muut.com/1/moot.min.js"></script>

The differences from the quick embed are

  1. The forum placeholder is a DIV tag which is a block element. Block element can be used as a container for other HTML elements such as forms, tables, images and links.
  2. The location of the forum is given inside the container in an A tag with a class name “muut-url”. This acts as the link for search engines as well as provides the forum name for the client.

All contained HTML except the “muut-url” inside is placed on the sidebar between the forum list and online users.

Sticky posts and threads

You can put links to individual posts and threads inside the container. These are the posts/threads you specifically want to bring to attention and are often referred to as “sticky” posts/threads. When such a link is clicked the corresponding content is loaded in place (without loading the whole page), and the URL is updated accordingly. As an example here we define 4 links:

<!-- Muut placeholder tag -->
<div class="muut">
  <a class="muut-url" href="https://muut.com/i/your_forumname">Acme forums</a>

  <!-- A custom title-->
  <div class="m-h3">Popular questions</div>

  <!-- 2 popular sticky posts  -->
  <a href="#!/setting-up:top-10-reasons-why-posts-sh/users-are-as-much-of-a-cust">Why are posts not editable?</a>
  <a href="#!/setting-up:single-sign-oni-noticed-sin/so-a-quick-explanation-of-h">How does Single Sign-On work?</a>

  <!-- popular sticky thread  -->
  <a href="#!/setting-up:acls-at-the-category-levelo">How will Muut ACL work?</a>

</div>
<script src="//cdn.muut.com/1/moot.min.js"></script>

You can get the link by opening the desired thread from on your forum (click the triangle icon on the right side of the expanded post title) and then copy paste the URL “hash” from the address bar. This is the part that starts with the “#!” characters.
For more flexible styling options each link is wrapped inside a <p> tag and when a link is selected a “m-selected” class name is added to the <a> tag.

Custom channels

Here we define 9 channels for an imaginary forum discussing different electronic music genres. The HTML code is on the left and the resulting sidebar is on the right.

<div class="muut">

  <a class="muut-url" href="https://muut.com/i/electronic-music">
    Electronic music forum
  </a>

  <!-- ambient forums -->
  <div class="m-h3">Ambient</div>
  <a>Ambient house</a>
  <a>Illbient</a>
  <a>Isolationism</a>

  <!-- breakbeat forums -->
  <div class="m-h3">Breakbeat</div>
  <a>Big beat</a>
  <a>Broken beat</a>
  <a>Florida breaks</a>

  <!-- disco forums -->
  <div class="m-h3">Disco</div>
  <a>Cosmic disco</a>
  <a>Disco polo</a>
  <a>Space disco</a>

</div>
<script src="//cdn.muut.com/1/moot.min.js"></script>

techno-forum

View demo » How does it work?

  • When you add, remove, reorder or edit the anchor tags the corresponding changes are automatically sent to the server when the client is reloaded. NOTE: You need to be logged in as an administrator.
  • When channels are added manually inside the container element the “normal” channel editing on the client is removed.
  • The channel path is generated from the link text. For example “Cosmic disco” becomes /cosmic-disco. So when you change the link text it becomes a different channel. If you want to rename channels freely you can provide the path on the href attribute. For example: <a href="#!/cosmic-disco">Cosmic sound</a>
  • You can use hierarchical paths. All posts under the channel “/ambient/ambient-house” are also found under “/ambient”. Use a path hierarchy that fits your site. Here is a demo with hierarchical paths.
  • Muut link’s href attribute begins with “#!” or is empty. When clicked, the content is loaded inside the forum and the link is selected. Other links behave normally by loading the link on the browser window. You are free to use normal links and style them as you please; perhaps combine with a nested image to make “banners” or ads.
  • Muut links are automatically wrapped inside a <p> tag and when a link is selected a “m-selected” class name is added to the <a> tag. This provides good styling options.
  • You can freely use any HTML together with the channels. Perhaps use multiple levels of nesting, add icons beside channel titles, open / collapse channels with javascript or even open an overlay menu for each channel. Here is a demo with expandable channels.

You can still view and manage your channels in your settings menu

Changes to channels in the settings menu will automatically reset each time Muut is loaded with custom channels.

UNLISTED CHANNELS

An unlisted channel is not listed under “All posts” view. One good use case is “Issues”: you want to show the “Issues” channel on the sidebar, but don't want these to be shown under all posts to keep things less cluttered and perhaps more positive. An unlisted channel is marked with “unlisted” CSS class name. For example:

<a href="#!/issues" class="unlisted">Issues</a>

Any threaded commenting area, perhaps elsewhere on your site, is also an unlisted channel, so you can include any of your commenting threads on the sidebar as well; or, you can group all flat commenting areas, like blog comments, under “blog comments” channel and include that in the custom navigation.

Showing comment channels

To show your comment channels we just create a channel for your comments. Typically when you embed comments a hidden channel is created. So when you embed a comments like so: <a href="https://muut.com/i/[community-name]/comments" class="muut" type="dynamic">Comments</a> you've create a hidden channel called "comments". To make this community accessible through the sidebar and visible in your "All Posts" feed add a channel named "comments" on your settings page.

Custom footer

You can place custom HTML at the bottom of the sidebar (below the online users list) with a “moot-footer” element as follows

<div class="muut">

  <a class="muut-url" href="https://muut.com/i/your_forumname">Acme forums</a>

  <!-- custom footer -->
  <div class="moot-footer">
    <a href="/a/link/to/somewhere.html">
      <img src="/an/awesome/image.png">
    </a>
  </div>

</div>
<script src="//cdn.muut.com/1/moot.min.js"></script>

On smaller screens the footer element is shown below the forum. It is not part of the channel dropdown. This is a typical place to add advertising, polls, or forms, to name a few possibilities.

Responsive layout

On smaller screens the sidebar becomes a dropdown menu. Please check that your styling works by resizing your browser.

navi-dropdown