nopCommerce Tips: Matching Your Mobile Theme with Your Site Theme
Written by Carole Bennett Monday, 24 September 2012
nopCommerce introduced native mobile support with the advent of version 2.4; with an ever-increasing percentage of mobile users, it’s a great way to optimize your customer base. nopCommerce ships with one mobile skin; however, if you’ve customized the theme for your site, you may wish to update the mobile theme to maintain consistent branding. Today, we’ll cover how to do so.
The nopCommerce mobile theme leverages the jQueryUI theme, making it a flexible and extensible UI, supported by the majority of modern mobile devices. The folks at jQueryUI have created 24 “standard” UI themes, and also offer the awesome ThemeRoller online application that will allow you to create a custom theme using your own color selections.
You may feel the need to work with your designer on this, but it’s really very easy. If you’ve already got a list of your theme colors in hex (#xxxxxx format), go ahead and open up ThemeRoller and get started.
Here, you see the desktop-site theme for this client. Now, we’re going to create a jQueryUI theme to match. After some adjustments, we’ve now got this on the ThemeRoller site.
Once you’ve got the theme looking the way you want, it’s now time to download it, and integrate it into your mobile skin.
Once you download the .zip file, open it up, and compare the files inside to those in your nopCommerce Mobile skin. You can start by swapping out the file ‘jquery.mobile.theme-1.1.0.min.css’. To test the results, you can do one of two things; use an emulator (like the one that’s available for free in the Andoid SDK), or use extensions such as Modify Header and User Agent Switcher. The benefit of using the extensions is that you can leverage Firebug to track down the rest of your CSS that needs to be modified in the style.css file inside your mobile theme.
After you’ve completed all your theme updates, your mobile theme will match your web skin theme, and maintain consistent branding.