index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom styled Muut forum</title>
<!-- optimize for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- force latest IE rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- muut styling -->
<link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">
<!-- demo specific CSS -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,700'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="custom-style.css">
</head>
<body>
<div id="content">
<!-- imaginary page header -->
<header>
<nav>
<a href="#">Guides</a>
<a href="#">Features</a>
<a href="#">Deals</a>
<a href="#" class="is-active">Forum</a>
</nav>
</header>
<!-- Muut client -->
<a class="muut md-dark-sidebar md-dark-header m-app-loading"
href="https://muut.com/i/goma">GoMA forums</a>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.muut.com/1/moot.min.js"></script>
</div>
</body>
</html>
custom-style.css
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
font-size: 18px;
font-family: ubuntu;
margin: 0;
padding: 0
}
header {
background-color: #0082d7;
padding: 10px 20px
}
header nav {
text-align: right;
max-width: 952px;
margin: 0 auto
}
header a {
font-size: 15px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
margin: 0 15px
}
header .is-active {
color: #00a9ff
}
.m-navi a.m-selected {
background-color: #002741
}
.m-header {
background-color: #005b97
}
@media (min-width: 980px) {
.m-sidebar {
background-color: #002741
}
}