A Guide to Wijmo Theming

One of the major features of Wijmo is that it’s built on top of the jQuery plugin model. The benefit of this is that the Wijmo team took great care into making sure that you got the benefits of working with jQueryUI widgets. The major benefit being ThemeRoller support. image I always find it amazing when I talk to people and people haven’t heard about ThemeRoller. It’s just the greatest thing since sliced bread.

ThemeRoller

When jQueryUI was released, it provided a great array of user interface widgets for you to use in your applications. However, if you’ve used other component packs you know that theming can be really really hard or really really easy. Developers don’t really do theming or design well, so that’s where the ThemeRoller tool was born. ThemeRoller lets you or another person design themes for your sites. It’s developer friendly, and awesome if you have a designer on your team. Build your own custom themes or tweak one of the many existing ones. image When I used to do consulting, I used ’s toolset. But it was so frustrating to do a lot of stuff that should be similar in terms of theming. Instead, I rewrote the majority of the site with jQueryUI widgets. I provided the ThemeRoller tool to my designer and within the day, she provided me the CSS file I needed to add to my project. It’s just that easy!

How Wijmo Uses ThemeRoller

Out of the box, Wijmo uses ThemeRoller themes. You don’t have to do ANYTHING. Imagine you have a grid: image It’s a nice grid, but you like the “Redmond” style better. That’s cool, just replace the CSS file. image BOOM! You’re done.

Editing Themes

I’m bringing this note up since someone asked a question in the forums. How do you edit a theme after you’ve downloaded it? That’s easy! First, open up the CSS file. Scroll down a couple lines until you find this comment: image Note: if CSS is minified, you won’t see this. See that link at the bottom, paste it into your browser and go. ThemeRoller will automatically load all the settings for that theme. Make your changes and download the new style. This is handy on jQueryUI updates. If they add new widgets, you can just load the file into ThemeRoller and it’ll create an updated style sheet for the theme. So go have fun! Let me know if you have questions or comments! Go have fun with ThemeRoller, and make Wijmo your own! Kevin Griffin keving@componentone.com Follow me on Twitter @1kevgriff

MESCIUS inc.

comments powered by Disqus