Muut CSS

Muut CSS has changed considerably since launch and will continue to change. To preserve your custom styling against future Muut changes, it is recommended that you first load the default muut.css, and then override with your own; this way, you can easily check which parts of the custom CSS are causing possible conflicts by removing and reintroducing styles one by one.

Once you have embedded Muut on your page it is like any other DOM element; completely styleable with standard CSS. The styling can be placed inside the <style> tag on the <head> section of your page, or you can use an external CSS file.

In the below example we’re linking to a Google Web Font family “Arvo” and an external .css file called mystyle.css (in the same directory as the .html file into which Muut is embedded).

<link href='http://fonts.googleapis.com/css?family=Arvo'
  rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="mystyle.css"/>

Here’s a sample of what the contents of a simple mystyle.css file might look like:

body {
  font-family: "Arvo", serif;
  margin: 0; padding: 0;
  background-color: #fafafa;
}

.muut .m-seed .m-facelink, .muut .m-header .m-selected {
  background-color: #fafafa;
}

The above css changes the default font family to “Arvo” (which we pre-loaded earlier) and the background color to a light gray.

We recommend you start from a minimal forum, commenting, or threaded commenting setup and iteratively add your own CSS rules, one by one. This is easier and safer than to place Muut on a page with a lot of existing CSS rules.

Typography

Muut inherits your page’s font, and plays well with a range of typefaces. Both serif (e.g. Times, Georgia) and sans-serif (e.g. Arial, Verdana) style fonts work nicely for the body text, whereas display style fonts (e.g. Impact, Arial Black, if not Comic Sans) can work for headings. Fixed-width fonts (such as Courier) are well-suited for the syntax highlighted code sections.

You shouldn’t feel restricted by the traditional web fonts, however: with the advent of character antialiasing techniques in modern browsers and high-resolution screens in many mobile as well as desktop devices, the requirement for specially adjusted-for-web (“hinted”) typefaces is rapidly vanishing, and companies and sites like Adobe, Google, Linotype, Open Font Library, Emigre, and many others are offering vast libraries of interesting alternatives to the plain vanilla selection of typefaces that we’ve all grown accustomed to (and bored ourselves with) in the last 15 years of internet.

Be creative — but also remember to keep things readable!

Muut respects the global font-size setting. If you change the base font size as follows:

body { font-size: 18px }

…Muut will change its overall sizing accordingly. Font size, margins, paddings, and even graphics are automatically resized. Try it! If you only need to resize the Muut element and not the surrounding page you can simply do:

.muut { font-size: 18px }

Dark background

For pages with a dark background there are extra CSS classes that you can add to the root element:

md-dark-header for a dark header
md-dark-topic for dark topics
md-dark-sidebar for a dark sidebar
md-dark-page for a dark page, which is the area beside the sidebar

These classes will invert the foreground color scheme so that it’s better suited for dark background colors.

Custom colors

You can easily change the default Muut theme by modifying the background color of the header or the sidebar. Here is a quick peek:

Here is the commented CSS file for the above demo. The most relevant parts:

/*  Muut header with dark background color  */
.m-header {
  background-color: #005b97
}

/*  Light main links on dark background  */
.m-navi a, .m-nav-account span {
  color: #ddd
}
.m-navi a:hover, .m-nav-account span:hover {
  color: #fff
}
.m-navi a.m-selected, .m-nav-account span.m-selected {
  color: #333 !important
}

/*  Dark sidebar. Absolutely positioned on top right  */
@media (min-width: 980px) {

  .m-sidebar {
    background: #002741;
    margin-top: -1.2em;
    padding-top: 2em;
  }

}

CUSTOM BACKGROUND COLOR

If you have a custom background color under the Muut application then following CSS will make change applicable parts in Muut accordingly:

.muut .m-header .m-selected {
  /* your custom color goes here */
  background-color: #eee;
}

“Reserved" colors

Muut is mostly grayscale and uses colors sparingly as follows:

BLUE for actions: links and buttons
PINK for personal stuff: likes and replies
RED for unread messages
GREEN for online status

As Muut is being used across numerous websites, users may already be familiar with these colors; changing these is not recommended, especially unread (3) or online status (4) colors, which also work well on both dark and light backgrounds.

Troubleshooting

Muut uses only class selectors and never ID selectors; this is important to remember. If Muut is installed inside an element with id “content” and you have following CSS setting:

#content h2 { line-height: 2 }

…then all H2 tags inside Muut have the line-height settings no matter what. Settings on ID selectors always override settings in class selectors. This can break Muut styling. You should try to reduce external CSS declarations to a minimum and use only Muut’s own CSS settings.

Most CSS frameworks, such as Twitter Bootstrap, use class selectors only, so you won’t run into trouble.

Muut & Twitter Bootstrap