Tiny Deathstars of Foulness

The article I did a few weeks ago on customizing the Mac OS X Server Wiki banner seems to have been a little incomplete. I discussed customizing the banner for a full web browser. However, the banner looks differently when viewed from an iPhone. I’ve had a couple of questions about how to customize the banner for iPhone so I figured I’d finish what I started.

As I mentioned in the last article, you can simply customize (or replace) the banner-bg.png file located in the /usr/share/collaboration/css/serverhome_static/img directory. This will alter the appearance when viewed from a full web browser. You can also simply edit the following files (same directory) to further alter the appearance (including those for iOS):

  • footer-bg.png – The Apple logo on the initial splash page.
  • iphone-banner-bg.png – The banner file to customize for when users are accessing the splash page from iPhone rather than the browser (what this article was originally about). As with the last article, here’s a sample ArtText document for customizing the banner.
  • iphone-footer-bg.png – The footer image from iPhone.
  • iphone-service-button.png – The background for services from iPhone (tip: make sure to leave something in place of the little blue arrows so people know to click on these).
  • iphone-service-icons.png – Smaller version of the service-icons.png, without reflection (Note: you may have seen clips of these in presentations I have done).
  • more-bg.png – The arrow beside the View All per service on the opening page.
  • service-bg.png – The background for the various services you have enabled on the initial landing page.
  • service-icons.png – collection of the service icons that indicate what an item is. These include the icon for blog, wiki, mail, change password, Podcast Producer and iCal. While these may seem generic I have to give the designers who made them credit as I have yet to make anything approaching the quality of these so I almost invariably leave them as-is.

If you want to increase from 320px width for iPhone to 640 for iPad or something like that you’ll need to track down the css files. The css file for the iPhone is in the /usr/share/collaboration/css/serverhome_static directory and called (oddly enough) iphone.css. The css file for overriding body content for standard browsers is the overrides.css in that same directory. These allow you to customize font, text size, background, etc. The iphone css even has a different section for landscape view.

If you want to get even more custom than just messing around with the splash page then go up another directory to /usr/share/collaboration/css. Here, you’ll find images and css files for each of the services exposed through the teamserver, including proxy, mobile, ical, emailrules and directory, including one of my fav 5, spinner.gif (seen below), which is a spinning symbol similar to that used at boot in Mac OS X.

If you like living on the edge (no pun intended) then you can hop up yet another directory and start messing around with live html files. Or in the /usr/share/collaboration/themes you can find the css files and images that make up the default Apple-supplied themes. Apple provides a document on managing the themes, but the gist is that you can copy the wireframe theme you find there and rename the copy. Then open the theme.plist file inside the theme and find the selectable key, making it true instead of false. Once you’ve saved that file, restart the service to see (and use) your new theme.

There are lots of other cool keys in the theme.plist, which allow you to add or remove the search fields, HotList, theme name (and displayName), change the height or width of the banner, add other sidebar items, etc. It’s not WordPress so don’t expect to download awesomeo widgets, but then it’s much more elegant than most Content Management Systems are out of the box and should just work. This isn’t to say it isn’t extensible. You can add JavaScript and XSL (ie – for FileMaker Server integration), but this can start getting somewhat complicated. One interesting note is that much of the Dashboard widget example code will run here…

Be warned, with each level of the hierarchy you traverse upwards you are more likely to find a software update blowing out your code changes (especially when you get to /usr;). Which brings up an interesting point – backup your changes. Make a good backup of the whole thing before you start hax0ring around in there and then, make sure that if you do any customizations in /usr/share/collaboration that you back up that directory (I mean, you are backing up the rest of the server, right?!?!).

The other directory that needs to be backed up is /Library/WebServer. This is where the actual HTML pages are stored. In here, you’ll find the Documents folder, and in there you’ll find the index.html page. If you’ve been monkeying around with the files I mentioned earlier then a key item that you’re going to want to change is the footer, where Apple asserts their copyright. This is down in the div class=”footer” section. You can also use this file to manually disable certain services. For example, you’ll see the podcastcapture section. Now, you would likely rather remove these from Server Admin if you can, but I can see edge cases (doh, again no pun intended) where you might rather edit it here. There are also some css files in here to control various ways that pages appear (although the appearance inside service boxes is configured using the files referenced earlier).

Anyway, I want to end this by saying that out of the box the Wiki, Blogs, Podcast Producer (if you’re using Open Directory) and other parts of the teams server works great out of the box. It’s pretty sleek as it is and other than a footer or banner here and there I’m actually not a huge proponent of heavy customization. But if you must (and many must) then hopefully this article helps get ya’ started!

August 14th, 2010

Posted In: Mac OS X Server

Tags: , , , , , , , ,

One of the best features of Mac OS X Server is the built-in blog and wiki services. While it is not the right solution for every type of environment, it is a very good medium for internally hosted user generated content. Especially if you are using Active Directory or Open Directory. One of the most common requests I get when setting up a blog and wiki server is to customize the portal so that it is branded to the organization that it’s being set up for. One of the easiest ways to do this is to just edit (or more likely replace) the banner-bg.png file located in /usr/share/collaboration/css/serverhome_static/img directory.

There are other items here that can easily be replaced with items of the same size; however, the most impactful is the huge banner sitting atop the screen when users visit the page. Your new banner-bg.png file should usually be 990 by 197 pixels and be trimmed down to be as small a file as possible. I have to admit that I’m not great at Photoshop, so I often cheat a little and use Art Text, by BeLight Software. In order to make this easier for others who might do exactly this, here is a template (forgive my utter lack of any graphic design skills whatsoever) that you can use.

Happy Customizations (and feel free to submit any images/links that you’re proud of and I’ll be happy to post/link to them)!

July 20th, 2010

Posted In: Mac OS X Server

Tags: , , , , , ,

When you’re testing connectivity to servers and you’re using SSL on those servers then your traditional ways of testing connectivity may been a little augmentation. For starters, you’re going to use the openssl to test connections. For example, if you have a web server you might traditionally attempt to telnet into port 80 and check you banners; however, if you have an SSL certificate on it then you might be better served connecting to port 443 using the openssl command. In the following example we’ll tell openssl to be a generic client (s_client)  and connect (-connect) to over port 443:

openssl s_client -connect

The output would then look similar to the following:


depth=3 /L=ValiCert Validation Network/O=ValiCert, Inc./OU=ValiCert Class 2 Policy Validation Authority/CN=

We could test smtp using the same, whether you’re using port 25 and requiring a certificate or another port. To test with port 25, assuming we can use a generic client again we’re going to change the port number and because SSL can work with smtp directly we’re going to use starttls to do so:

openssl s_client -connect -starttls smtp

A valid connection would result in similar output to the following:


depth=3 /L=ValiCert Validation Network/O=ValiCert, Inc./OU=ValiCert Class 2 Policy Validation Authority/CN=

You could also initiate a new instance of an SSL listener, using s_server or just test the connection timer using s_time. Overall, openssl is a pretty invaluable toolkit that we’ll probably look at more and more on this site.

October 5th, 2006

Posted In: Mac OS X, Mac OS X Server, Mac Security

Tags: , , , , , ,