Custom style

View Demo

Source

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
  }
}

View Demo