OpenVBX Material Design Theme

OpenVBX is a great open source web application that provides an easy to use interface to manage multiple user's phone numbers, voice mail, and phone trees. While the app is easy to use and set up, its design is very dated.  The app itself works fine out of the box and, if it ain't broke don't fix it, but the UI needs an overhaul.  Luckily OpenVBX is extendable and it is easy to write your own overriding style sheets to re-theme it as needed.

I couldn't find many good themes, though, so I made my own (Download it here!)  I started with Google's Material Design principals and borrowed from some of their great color schemes.  The result is the same app, with the same functionality, but with a modern Gmail inspired hybrid-flat design.

The new theme swaps out almost all of the image file icons for FontAwesome ones adds subtle CSS transitions on button hovers.  Using just style overrides, I was able to add a few new features as well, such as a "new" icon for unread messages, better labeling for message status flags, and deemphasized buttons. 

There were a few challenges, though. For one, while the app allows for easy theming by simply adding a new folder with your theme style sheet in it, not all of the app reads from the theme.  Specifically, the in-app phone dialer code lives outside of the site's framed content and does not include the override styles. As much as I would have like to keep the theme from needing to change any of the apps core code, I found the only solution was to update the dialer's code manually.

Additionally, iOS and the new Edge browser like to style phone numbers with their own look, despite the applied styles. The solution there was to update the apps core template to include an extra meta tag that the effect browsers respect.

All in all, it took the better part of two weekends and over 1600 lines of nested SCSS but I'm happy with the results.  If you'd like help implementing OpenVBX please contact me to find out how I can help you and your business.  Already using OpenVBX? Download the Material design theme.