Skip to main content Skip to footer

Rolling Out A New Theme

My name is Tim and I'm the new guy around here. My first assignment at ComponentOne was to develop a new mobile theme to be shipped out with Wijmo - a kick-ass bundle of UI widgets that includes everything from menus and calendars to charts and data grids. One of the many cool things about Wijmo is its built in compatibility with themes generated via jQuery's ThemeRoller. ThemeRoller enables you to develop a set of visual styles that help you maintain consistency across your applications. Wijmo Themes Wijmo ships with a bunch of great prebuilt themes and I was tasked with developing a new, clean and solid default theme for mobile applications. And with that assignment, came my introduction to jQuery's ThemeRoller. I headed over to the jQuery Mobile site and started up the browser-based ThemeRolling application with a click on the Themes link. I was quickly impressed with the intuitiveness of the controls and ease of defining the "swatches" that would eventually become part of my theme. ThemeRoller Swatches It works a little like this - a theme is broken into swatches, or individually grouped palates of style and color. Each swatch has editable style settings for things like fonts, colors, gradients and drop shadows. These settings can be edited at a global level or individually for each swatch. A theme is ultimately made up of the styles used in each swatch it contains. By separating the presentation styles (fonts, colors, etc...) from structural styles (margins, padding, etc...), ThemeRoller allows you to define the swatch-grouped presentation styles in your stylesheet and then mix, match, or combine them as needed. I got started by selecting the fonts & colors I wanted to use via the selection boxes at the left of the screen. As I made changes, my swatches were updated dynamically at the right. Final Theme As I mentioned, I was working towards a clean and modern mobile theme, so I spent a little time mixing and matching colors, finally choosing a group of mostly neutral tones with a couple of bolder accents. I then flattened the appearance of my theme by toning down the color gradients and squaring off the rounded corners in each swatch. Happy with the look and feel of my theme, I clicked the "Share" button at the top of the app which saved a copy of my theme online where others could preview it or I could return later and make tweaks if needed. Once everything was reviewed and finalized, I hit the "Download" button. Download Theme I was prompted to give my theme a name and a CSS file was downloaded to my computer. Then it was simply a matter of including the new ThemeRoller CSS file in my Wijmo demo and everything came to life. Within an hour I had downloaded the Wijmo kit, set up a theme, plugged in some data and now had compelling and dynamic content ready to impress the world. Want to see the new theme (and Wijmo) in action? Point your browser at the Wijmo Mobile Explorer and check it out.


comments powered by Disqus