Yosemite Style Banners for Munki 2

MSC Hero

Customizing munki can be quite rewarding when done right. By utilizing the client_resources.zip file you can make a great looking GUI for your users.

Trick 1: Add CSS into footer_template.html

Bart Reardon first documented this trick. You can modify (for better or worse) the css Munki utilizes by adding your desired changes directly into the footer_template.html. The following is what I am currently using to make Munki look more like the App Store in Yosemite.

<style>
html, body {
    -webkit-background-size: auto;
    background-repeat: repeat-x;
    background-color: #ffffff;
    background: -webkit-linear-gradient(top, #ffffff 0%, #f5f5f5 75%, #e1e1e1 100%);
    background-attachment: fixed;
}

This simply changes the background color to white and adds a subtle gradient to the bottom of the window. You can add CSS to any template file, but the footer_template is on every page view.

Adding an icon to the sidebar is quite simple - simply add your .png file to your resources folder and use a relative link. Make sure you center it (and don’t go over 128x128 px) or it will look terrible!

<div class="sidebar">
    <div class="chart titled-box quick-links">
        <h2>Quick Links</h2>
        <div class="content">
           		<div class="artwork">
                	<center><img target="_blank" href="https://github.com/munki/munki" width="128" height="128" alt="Munki Github" class="artwork" src="custom/resources/MSC.png" />
                </div>
            </ol>
        </div>
    </div>
</div>

Trick 3: Linking banners to Optional Installs (showcase_template.html)

This isn’t really a trick, but more of a feature that isn’t completely documented. You can link individual banners to specific items in your repository.

Below you will find three examples: All Categories, Music and iMovie. Make sure you add .html to each item or it will not work.

<div class="showcase">
    <div class="stage" onClick='stageClicked();'>
        <img href="categories.html" alt="Categories" src="custom/resources/App_Store_1.png" />
        <img href="category-Music.html" alt="Music Category" src="custom/resources/Making_Music.png" />
        <img href="detail-iMovie.html" alt="iMovie" src="custom/resources/iMovie.png" />
    </div>
</div>

MSC Screenshot

Erik’s Sweet Giveaway (Oprah Style)

Attached below are several banners that I have modified from the Mac App Store. These banners are the correct dimension (1158x200) and configured in a way so no matter how small MSC is, items will not be cut off. Enjoy!

MSC Banner