Tiny Deathstars of Foulness

I’ve done a few articles over the years on customizing the team server in OS X Server. This is one of those places where Lion really changes things. Once upon a time you could just swap out the graphics and have a fairly custom-looking wiki or implementation. In Lion, Apple has really simplified and stripped down the Lion elements in the interface for the server. There is less Apple branding and more functionality than ever. Gone is the time Apple spent building templates, but in the place of all those templates is a much more integrated and functional collaboration server. Added are features dedicated to navigation (e.g. the ribbon was borrowed from MobileMe) document management and writing personal wiki articles. Added is a more seamless integration with podcasts and better ways to find content that is pertinent to you. Also added is a sidebar that allows you to insert blocks, similar to widgets in WordPress, but far less useable (for now). You can still customize the graphics. They are now stored in /usr/share/collabd/coreclient/public/stylesheets/cc/img. You can also add your own banner or edit the look and feel in the css files stored in the /usr/share/collabd/coreclient/public/stylesheets/cc. For example, editing the core.css file to change the color (not background-color) setting in the body section will change the color of the text (use my color chart to pick a new color if you’d like). Also in the core.css file is the background color for the unused space, located in the background-color setting of the main section. The blue title bar for wikis can also be customized to include a background image or just change the color. For example, use the banner.css file to add the background-color field into the banner section with #FFFFFF to set that to white. As usual, be careful when customizing Apple’s services. Personally, I find that whenever I customize their settings, I end up making them look worse. Apple is known for design. If you’re looking at my web site, you’ve likely noticed that I am not. If you decide to walk down this path though, I have a good tip. Use a browser plugin for Firefox to help you. You can make changes on the fly, see what works and what doesn’t and gradually change settings until you find a look and feel you can live with. I like Edit CSS, but as with many of these kinds of things, it’s just preference – search for CSS in the Firefox add-ons for one that you find that you like better.

September 27th, 2011

Posted In: Mac OS X Server

Tags: , , , , , , , , ,

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: , , , , , , , ,