<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom headers in Muut forum</title>
<!-- optimize for mobile versions -->
<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">
<!-- stylesheets -->
<link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">
<!-- demo specific CSS -->
<style>
body {
font-family: "myriad pro", tahoma, verdana, arial, sans-serif;
font-size: 18px; margin: 0; padding: 0;
}
/* banner styling */
.hidden { display: none; }
#banner h3 {
font-size: 180%;
font-weight: 100;
}
#banner .info {
display: inline-block;
vertical-align: top;
padding: .2em 0 0 1.2em;
width: 60%;
}
#banner img {
border-radius: 4px;
margin-bottom: 1.2em;
max-width: 13em;
}
#banner p {
margin: 0.4em 0 1em;
line-height: 1.3;
}
/* hide default channel title */
.m-pagepage .m-pagetitle {
display: none !important;
}
</style>
</head>
<body>
<div id="banner-all" class="hidden">
<img src="https://c1.staticflickr.com/9/8369/8529775981_e18941218e_n.jpg">
<div class="info">
<h3>GoMA</h3>
<p>
GoMA is a free, interactive gallery for offering drop-in programs and artist- and educator-led workshops to visitors of all ages, in conjunction with an exhibition or a topic related to modern and contemporary art.
</p>
</div>
</div>
<div id="banner-gallery" class="hidden">
<img src="https://farm4.staticflickr.com/3860/15035058236_308d8f11e5_m.jpg">
<div class="info">
<h3>GoMA Gallery</h3>
<p>
GoMA Gallery plays an important role in the city's heritage and way of life. Enjoy the Library, coffee shops, free internet access terminals and a collection of art books for loan.
</p>
<a href="#!/exhibitions:open-spaces-exhibition">More info</a>
</div>
</div>
<div id="banner-exhibitions" class="hidden">
<img src="https://c4.staticflickr.com/8/7327/16322277849_36e42322de_m.jpg">
<div class="info">
<h3>GoMA Exhibitions</h3>
<p>
GoMA aims to present a diverse range of exhibitions and Collection displays of local, national and international artists. Have a look at our travelling exhibitions too!
</p>
<a href="#!/exhibitions:video-installations-moving">More info</a>
</div>
</div>
<div id="banner-workshops" class="hidden">
<img src="https://farm6.staticflickr.com/5557/15052236072_15a1c518fd_m.jpg">
<div class="info">
<h3>GoMA Workshop</h3>
<p>
Create artwork inspired by the collection and temporary exhibitions. Learn new methods of art making with the guidance of international artists. Come along for sessions for all ages!
</p>
<a href="#!/exhibitions:video-installations-moving">More info</a>
</div>
</div>
<div id="banner-modern-art" class="hidden">
<img src="https://farm4.staticflickr.com/3836/15058043965_a85343860f_m.jpg">
<div class="info">
<h3>GoMA / Modern Art</h3>
<p>
GoMA's core mission is to gather international resources for the production and promotion of contemporary art, facilitating exchanges between artists from all over the world.
</p>
<a href="#!/exhibitions:open-spaces-exhibition">More info</a>
</div>
</div>
<div id="banner-classic-art" class="hidden">
<img src="https://farm6.staticflickr.com/5558/14867918038_0292b19c1d_m.jpg">
<div class="info">
<h3>GoMA / Classic Art</h3>
<p>
Goma also features numerous exhibitions of classic art and intends to capture the diversity, experimentation and excitement through the centuries.
</p>
<a href="#!/exhibitions:open-spaces-exhibition">More info</a>
</div>
</div>
<!-- muut client -->
<a class="muut" href="https://muut.com/i/goma/">The GoMA community (demo)</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>
<script>
// runs this function when Muut is loaded
muut(function(app) {
// wrapper element for custom banner
var wrap = $('<div/>', { id: 'banner' }).prependTo($('.m-page', app.root))
// load custom banner content when channel is switched
app.on('load', function(page) {
var channelName = page.relativePath.replace(/[^\w-]/g, '') || 'all',
banner = $('#banner-' + channelName)
console.info(channelName)
wrap.html(banner.html()).toggle(!!banner[0])
})
})
</script>
</body>
</html>