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.
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
DIVtag which is a block element. Block element can be used as a container for other HTML elements such as forms, tables, images and links.
Atag 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.
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
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>
View demo » How does it work?
/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
hrefattribute. For example:
<a href="#!/cosmic-disco">Cosmic sound</a>
hrefattribute 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.
<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 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.
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.
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.
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.
On smaller screens the sidebar becomes a dropdown menu. Please check that your styling works by resizing your browser.