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!
