Munki 2 client customization showcase

1326 views
Skip to first unread message

Dan Keller

unread,
Sep 25, 2014, 1:26:53 PM9/25/14
to munk...@googlegroups.com
I'm looking for some inspiration on customizing the client resources for Munki 2. Anyone want to share their setup? Screenshots, code? So far, I have only done a custom banner and a few small changes on the footer. Still deciding how best to do the sidebar.




Gregory Neagle

unread,
Sep 25, 2014, 1:29:37 PM9/25/14
to munk...@googlegroups.com
Dan - thanks for sharing! I would also like to see what others are doing.

-Greg

On Sep 25, 2014, at 10:26 AM, Dan Keller <d...@dankeller.org> wrote:

I'm looking for some inspiration on customizing the client resources for Munki 2. Anyone want to share their setup? Screenshots, code? So far, I have only done a custom banner and a few small changes on the footer. Still deciding how best to do the sidebar.






--
You received this message because you are subscribed to the Google Groups "munki-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to munki-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

David Iwanicki

unread,
Sep 25, 2014, 3:18:25 PM9/25/14
to munk...@googlegroups.com

Here are some of my banners:

Erik

unread,
Sep 25, 2014, 6:57:08 PM9/25/14
to munk...@googlegroups.com

For now, I'll post some of my general stuff. Some of my banners have URLs so users can submit tickets into our (new/terrible) system.

On the sidebar, we have links to internal locations that are campus specific as well as quick access to webmail and our sick day system. I've tried to include links that our user's have difficulty remembering.


Bart Reardon

unread,
Sep 25, 2014, 9:38:55 PM9/25/14
to munk...@googlegroups.com
I created a template in pixelmator with a background and logo. I change the text to suit whatever the banner will be linking to. Most of these links are in the sidebar as well.

I also have plans for advertising new software as it's added using a custom banner if it's special enough. We have an internal software portal that once complete with integrate with munki so our users will be able to purchase (internally) licensed software and munki picks that up and does the install.

I've also integrated a Jira feedback form so when they click the feedback link it appears within MSC. Users fill in feedback or suggestions and it creates a jira ticket for me.

Bart
branding2.png
branding-daisy.png
branding1.png
Screen Shot 2014-09-26 at 11.27.56 am.png

Gregory Neagle

unread,
Sep 26, 2014, 11:25:01 AM9/26/14
to munk...@googlegroups.com
Here's one of mine I like:



-Greg

--
You received this message because you are subscribed to the Google Groups "munki-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to munki-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
<branding2.png><branding-daisy.png><branding1.png><Screen Shot 2014-09-26 at 11.27.56 am.png>

Gregory Neagle

unread,
Sep 26, 2014, 11:26:07 AM9/26/14
to munk...@googlegroups.com
On Sep 25, 2014, at 6:38 PM, Bart Reardon <bart.r...@gmail.com> wrote:

I've also integrated a Jira feedback form so when they click the feedback link it appears within MSC. Users fill in feedback or suggestions and it creates a jira ticket for me.

Very interested in how you did this...

-Greg

Craig Lindsey

unread,
Sep 26, 2014, 11:29:50 AM9/26/14
to munk...@googlegroups.com
So am I

— Craig

Andrew Rose

unread,
Sep 26, 2014, 12:53:42 PM9/26/14
to munk...@googlegroups.com

If you use an issue collector, it is easy enough. Since no part of my org's Jira is anonymously-accessible (we are OnDemand, so it isn't behind a firewall...), I link to 


with a target="_blank" so that it is likely to pop up in an external browser that they have signed in to our Atlassian account with. The querystring stuff can be a little tricky to find the correct ID's for, but I think it is worth it, to avoid having to use the email handler.

As we can see, I am not particularly gifted with image manipulation, but it gets the point across.

Gregory Neagle

unread,
Sep 26, 2014, 1:13:10 PM9/26/14
to munk...@googlegroups.com
The part I'm interested in is not how to link to an external web page to submit issues/tickets, but rather how Bart did it so the form appeared as an overlay over the MSC interface:

This looks better and is a better UI than dumping them into their browser.

(I suspect there's a bunch of JavaScript added to the sidebar_template.html, since this looks very AJAX-y...)

-Greg

Mike Solin

unread,
Sep 26, 2014, 1:25:25 PM9/26/14
to munk...@googlegroups.com
I like the Fix-It Felix icon for submitting a bug report!  I might borrow that.

Here's what we're going to be rolling out soon.
Screen Shot 2014-08-25 at 6.36.15 PM.png

Andrew Rose

unread,
Sep 26, 2014, 1:27:24 PM9/26/14
to munk...@googlegroups.com
Unless I'm very much mistaken: https://confluence.atlassian.com/display/JIRA/Advanced+Use+of+the+JIRA+Issue+Collector#AdvancedUseoftheJIRAIssueCollector-Settingupacustomtrigger

And yes, it is definitely cleaner and cooler for getting direct MSC feedback

Jeremiah Baker

unread,
Sep 26, 2014, 2:55:38 PM9/26/14
to munk...@googlegroups.com
These are 2 that we might use. (Credit goes to David Iwanicki for that second one with the apps layout, I liked that look and made that one today.)
Screen Shot 2014-09-26 at 2.52.51 PM.png
Screen Shot 2014-09-26 at 2.52.33 PM.png

Bart Reardon

unread,
Sep 26, 2014, 9:35:17 PM9/26/14
to munk...@googlegroups.com
I'll post up my code.

It's bog standard jira so if you have that, it's not that hard. Th only thing that bugs me is if you aren't authenticated to jira the login box is below the display div and it's not immediately obvious there is a spot to put your name. That's an issue with the jira issue collector anyway.

Bart Reardon

unread,
Sep 26, 2014, 9:40:44 PM9/26/14
to munk...@googlegroups.com
correct.

It's all done in the sidebar_template.html


<script type="text/javascript">window.ATL_JQ_PAGE_PROPS =  {
"triggerFunction": function(showCollectorDialog) {
//Requries that jQuery is available! 
jQuery("#issueCollector").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}};</script>


<div class="sidebar">
    <div class="chart titled-box quick-links">
        <h2>Quick Links</h2>
        <div class="content">
            <ol class="list">
                <li class="popup">
                    <div class="select links">
                        <label>
                            <span></span>
                            <select id="category-selector" onchange="category_select()">
                                ${category_items}
                            </select>
                        </label>
                    </div>
                </li>
                <li class="link"><a target="_blank" id="issueCollector">Feedback<a></li>
            </ol>
        </div>
    </div>
</div>


That should open the jira issue collector inside MSC. I just have the one for feedback.

Bart Reardon

unread,
Sep 26, 2014, 9:53:56 PM9/26/14
to munk...@googlegroups.com
Ha, forgot to mention. You need to create the collector first (should be obvious). Create is as a custom trigger and use the "embed in HTML" code it generates for you. Then just create a link with target="_blank" and id of whatever suits your fancy, as long as you use the same id in the trigger function.

personally I've found using "_blank" really useful. All my help pages and other informational stuff is viewable right in MSC which ties the whole experience together and my test users are loving it. My banners open in a separate browser but that's just a design rule I've decided will be a thing for me. 

Dan Keller

unread,
Sep 27, 2014, 12:23:32 AM9/27/14
to munk...@googlegroups.com
This is so cool. I really like the popup (overlay?) in MSC for feedback. Thanks for sharing Bart! And I love the Felix icon, too. Just too cool...

WALL·E would be great for some sort of disk cleanup script.

zack.m...@bsd7.org

unread,
Oct 2, 2014, 12:21:51 PM10/2/14
to munk...@googlegroups.com
A little late to the party, but our first basic setup. Just don't have the time currently to dump into customizing more. Planning to add a Google Form for feedback in a popup, possibly for our tech ticket site as well, later.


Gregory Neagle

unread,
Oct 2, 2014, 12:26:45 PM10/2/14
to munk...@googlegroups.com
I like the logo in the sidebar!

-Greg

On Oct 2, 2014, at 9:21 AM, zack.m...@bsd7.org wrote:

A little late to the party, but our first basic setup. Just don't have the time currently to dump into customizing more. Planning to add a Google Form for feedback in a popup, possibly for our tech ticket site as well, later.



zack.m...@bsd7.org

unread,
Oct 2, 2014, 12:55:38 PM10/2/14
to munk...@googlegroups.com
Thanks Greg. I wrapped it in a div to help with alignment, and if needed later to add other information or changes. Normally our logo is too tiny to see the blue, and it comes out black. Thanks for the wonderful documentation on the Github Wiki! Once again, thanks for the greatest thing for OS X since OS X! 

Graham Pugh

unread,
Oct 5, 2014, 6:11:11 PM10/5/14
to munk...@googlegroups.com
Rough-and-ready banners with some British spelling :)

The customisations available on the banners, sidebar and footer are extremely helpful - thanks Greg (and anyone else involved) for this and all the other excellent features of Munki.

Cheers,
Graham
Screen Shot 2014-10-05 at 23.02.29.png
Screen Shot 2014-10-05 at 23.02.39.png

MiqViq

unread,
Oct 6, 2014, 12:46:23 AM10/6/14
to munk...@googlegroups.com
Looks good.

Just a couple of small details to consider:

On the first banner, I recommend that you make the partial gray (grey?) logo a little lighter so it will not disturb the red logo and "University of BRISTOL".

On both banners you could also smooth the jagged edges of those partial logos as all other elements are nicely smoothed.

(I seem to have a keen eye for small details in graphic design...)

Attached is a sketch for our own banner #1.
I put some shadows under all elements and used a light grey colored font, it seems to be more soothing with less contrast.
Not sure if I can use our company logo embedded in text, we have quite strict policies when using it in "publications".

- MiqViq



-- 
You received this message because you are subscribed to the Google Groups "munki-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to munki-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
<Screen Shot 2014-10-05 at 23.02.29.png><Screen Shot 2014-10-05 at 23.02.39.png>

Graham

unread,
Oct 6, 2014, 6:15:52 AM10/6/14
to munk...@googlegroups.com
Thanks MiqVig, good advice.
I've now figured out how to do edge smoothing using GIMP, which has made things look better!
(I'm sure everyone here knows how to do that, but if not, this 10 second video explained all I needed to know: https://www.youtube.com/watch?v=2c6M5c9kuB4)

Cheers,
Graham

--
You received this message because you are subscribed to a topic in the Google Groups "munki-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/munki-dev/PwvrYaqKxGc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to munki-dev+...@googlegroups.com.

zack.m...@bsd7.org

unread,
Oct 6, 2014, 2:30:07 PM10/6/14
to munk...@googlegroups.com
You could also vectorize it with Inkscape, scale to whatever size you need (maybe in the future) and thus never have this issue again.

Bart Reardon

unread,
Nov 4, 2014, 12:03:00 AM11/4/14
to munk...@googlegroups.com
I've been doing some CSS modification with an aim of keeping it all within what is officially supported (i.e. no custom builds and no changing templates outside the three officially supported ones)

Most changes in footer_template.html as this is included on all views.

Here's my footer_template.html

<div class="bottom-links">
    <ul class="list" role="presentation">
        <li><a href="category-all.html">${SoftwareLabel}</a></li>
        <li><a href="categories.html">${CategoriesLabel}</a></li>
        <li><a href="updates.html">${UpdatesLabel}</a></li>
    </ul>
</div>

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

div.msc-button-inner.not-installed:not(.large) {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53a82f), color-stop(100%,#7ad85d));
}

div.msc-button-inner.not-installed:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#438e1d), color-stop(100%,#53a82f));
}

#imgSlider {
    display: block;
    max-height:515px; 
    max-width:750px; 
    white-space: nowrap; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    padding:20px; 
    padding-bottom: 20px;
}

#productImageSmall {
    padding: 5px;
    vertical-align:middle;
    height:300px;
}

#productImageLarge {
    padding: 5px;
    vertical-align:middle;
    height:700px;
}

#dimmer {
    background:#000;
    opacity:0.5;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:99; 
}

#imgDisplay {
    width:100%;
    height:100%; 
    position: fixed;
    top:100px;
    bottom:0;
    left: 0;
    right: 0;
    display:none;
    text-align: center;
    z-index:100;
}

</style>
<div id="dimmer"></div>
<div id="imgDisplay" onclick="dim(false);"></div>
<script>
function dim(bool,img)
{
    if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
    document.getElementById('dimmer').style.display=(bool?'block':'none');
    document.getElementById('imgDisplay').style.display=(bool?'block':'none');
    document.getElementById('imgDisplay').innerHTML = '<img id="productImageLarge" src="'+img.src+'">';
</script>

The first adds a slight gradient to the background. The next two override the settings in base.css to make the install buttons a shade of green (normal and hover - personal preference). 

#imgSlider, #productImageSmall etc, the folowing two div's and small bit of JS are designed to work in item detail views. In my product description I might want to display more than one screenshot but this gets a bit ugly. For a simple image slider though I can use the following in the pkg description:

<span id="imgSlider">
<img src="http://foo.org/munki_repo/images/bar1.png" id="productImageSmall" onclick="dim(true,this);">
<img src="http://foo.org/munki_repo/images/bar2.png" id="productImageSmall" onclick="dim(true,this);">
<img src="http://foo.org/munki_repo/images/bar3.png" id="productImageSmall" onclick="dim(true,this);">
<img src="http://foo.org/munki_repo/images/bar4.png" id="productImageSmall" onclick="dim(true,this);">
</span>

And all the images appear in a single scrollable line instead of all together on the page and clicking them dims the page and displays a larger image (clicking the larger image makes it go away)

This is pretty simple as far as image sliders go. Since it's CSS and JS I'm sure there are more elaborate ones that could be made.

Bart

Bart Reardon

unread,
Nov 4, 2014, 7:37:03 AM11/4/14
to munk...@googlegroups.com
replying to myself, but I cleaned up the CSS a bit.

Reply all
Reply to author
Forward
0 new messages