Speed up and customize OnTheCity.org

What is The City?

Our church recently purchased an instance of The City from ACS Technologies, a networking and management tool that makes doing things as the body of Christ easier, more organized, and more fun. It’s a great app, under constant development, with generally very good features and speed.

Slow Internet kills

We, however, are chained to an Internet connection completely unsuitable for such dependence on the cloud. The best Internet connection available to our building flies over long-distance wireless, which makes for a fairly narrow and leaky pipe. Comcast will talk to us, but it may be a while before we’re in 20mbit business-class goodness.

Consequently, Sunday mornings are a nightmare. Our children’s check-in system is run via The City, and combined with the usual spike in Sunday traffic, things can get very slow. Like, unresponsive, completely broken, pull-my-hair-out slow. I employ some reasonable QoS settings in our gateway’s firmware, but something told me I could do better.

Speeding it Up

I love The City, the idea and people behind it, but it’s clear they coded the app with speed as a non-issue. A reasonable assumption, given most of the civilized world would have no problem with it.

Disable Analytics with AdBlock Plus

As of this writing, The City employs two kinds of analytics: Google Analytics, and New Relic. Both run via JavaScript, neither of which are strictly necessary for proper functionality. (If anyone from The City is reading, I hope you understand) I installed AdBlock Plus on all kiosk machines, then set up these three filters:

  • ||google-analytics.com^
  • ||newrelic.com^
  • /eum/rum.js|

The easiest way to create these rules is by loading The City, then clicking Open Blockable Items within the AdBlock Plus menu. Where this menu is depends on your version of Firefox, and whether you’re on a PC or Mac. Scroll through the list until you find the GA and New Relic assets. Right-click the asset, and click Block This Item… Click the radio button next to the filter rule that blocks the entire domain for google-analytics.com and newrelic.com.

The rum.js file is loaded from cloudfront.net, which we don’t want to block at the domain level, so I created a custom rule that will simply block any URL ending in /eum/rum.js. This way, if they host it from a different location, it’ll still get blocked.


The results were astonishing. Overall response time for the check-in module skyrocketed, from a painful crawl to nearly instantaneous—probably a few orders of magnitude faster. Setting up add-on sync for Firefox makes deploying such changes to all check-in kiosks a breeze.

Tweaking the Name Tag Labels

No, you can’t.

I called The City helpdesk with a simple request: can we make the child’s first name larger on the name tags? The font size they print at by default isn’t easily legible from a distance, so volunteers calling childrens’ names becomes more difficult. We migrated to The City from Lambs List, which prints first names very large for just this purpose, to great effect.

Seemed like a reasonable request, but the helpdesk personnel informed me that, while they get requests for this feature very often, it’s currently not possible to make any changes to the labels that print out. She also stated that there is no roadmap for future availability. Dang.

Yes, I can.

Well, the thing is…the labels are printed client-side, which means anything is possible. The truth is that we can make any changes we want via client-side stylesheets. This is best achieved in Firefox with Stylish, a user style manager that makes this very easy.

How labels work

The City’s check-in module uses the JS Print Setup plugin, combined with a dynamically loaded iframe, to create and print labels. Basically the name tags are just hidden pages that are subject to, and ultimately behave like, normal web pages.

This means that anyone who knows a little CSS can do whatever they want to the labels before they’re printed. Yes, really.

First names larger, please.

Here’s how to do it:

  1. Install Stylish on the kiosk.
  2. Load your instance on The City (yourchurch.onthecity.org). Any page will do, it doesn’t have to be the check-in module.
  3. From the Stylish menu, click Write new style > For yourchurch.onthecity.org… Don’t pick This URL; be sure to click the yourchurch.onthecity.org. This opens an editor window.
  4. Give the style a name, like City Label Changes.
  5. Make the editor window look like this:
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("yourchurch.onthecity.org") {
        .child_fname.normalsize { font-size: 36pt !important }

The text in bold is what we’ve added. Be sure that yourchurch.onthecity.org is actually your City instance, or it won’t work.

Break it down, please.

I can’t give a whole redux on CSS, but the style above basically just looks for any element with the child_fname and normalsize classes (only within yourchurch.onthecity.org), and overrides its font size to 36pt. As I recall, I believe the default size is 26pt—a sizeable improvement, pun intended 😉

To the astute observer, it becomes immediately clear that we can do a lot more than resize the child’s first name, if we felt so inclined. Someone proficient in CSS can effectively re-design the entire label, limited only by time and imagination.

Combine this with Firefox add-ons sync as above, and now all our kiosks are printing larger first names!

The catch

There’s always a catch, right?

This hack could break if The City developers decided to rename their element classes, which they have the freedom to do at any time. However, in practice, this isn’t all that common. Chances are, this is safe for a while, but be aware that any client-side CSS could break at any time. For now, I’ll call it a win-win.

Leave a Reply

Your email address will not be published. Required fields are marked *