nopCommerce Tips: Creating a Custom Layout, Part 4 – Adapting Skins
Written by Carole Bennett
Tuesday, 14 August 2012
Read Part 3 here!
It’s safe to say that for every target demographic, there’s a unique approach that will best achieve your goal of reaching them. Whether it’s using a color scheme or graphics, or a layout that shows your product line off to its best advantage, there is no one storefront that will appeal to all demographics. It’s a given that you’ll want to customize your nopCommerce store’s appearance to appeal to your customers – let’s touch on ways to modify an existing skin for that purpose.
nopCommerce ships with two web themes: DarkOrange, and nopClassic, under Nop.Web/Themes.
nopCommerce Themes Location
You may choose to start from one of these themes, one of the free themes available from the nopCommerce community, or a commercial theme, such as one of the themes from third-party commercial providers such as Nop-Templates. For the project I’ve been working on, I chose to work with the ShopAll theme from Nop-Templates (disclosure: Nop-Templates provided me with this template to evaluate for my client projects). The layout for the ShopAll theme is very similar to the design I created for my client, so it seemed a logical starting point.
Let’s review the “before” (ShopAll theme) and “after” (custom design):
One of the best things to get acquainted with is this list of all nopCommerce widget zones
; this will give you a better idea of what widget zones (places where widgets can be deployed) are available, and which files they’re located in.
It’s really helpful to have your custom design already available for comparison; there are a number of great tools available for creating designs and HTML templates. I use a combination of PhotoShop for layout, and Artisteer to create the HTML template. The latest version of Artisteer (currently in beta) includes an SDK to allow users to create templates for specific CMS & e-commerce applications; I’m sure that someone will come up with an export plugin for nopCommerce, but for now, it’s easier to just leverage the HTML export.
There’s no one best way for adapting an existing skin for a custom design; I start out with the nopCommerce theme, my chosen color palette, and Firebug, and select the parts I want to modify, starting with the background and main text colors. Depending on how much modification is required, you may find it helpful to open up the various views to modify your layout – this is one of the times our widget zone list comes in handy.
I cannot stress enough how helpful Firebug is in this process; you can see in the image below how Firebug will allow you to select an element in your page, then show you the corresponding CSS. You can make adjustments in the CSS in real-time, decide what works best, and then copy your new CSS to place in the appropriate stylesheet (conveniently linked in the Firebug CSS panel).
It can be a tedious process; there’s only so much select/replace you can do, without changing elements you didn’t intend to. Go carefully, selecting each feature as you’re ready to change your existing template to your new design. Most of your changes will be in the styles.css, but you may also need to make changes in your views. Don’t change the default views; instead, create corresponding folders and file in your skin in order to create your custom views.
Each widget/plugin has its own CSS; it’s best to get your initial skin set up the way you want it, then modify your plugins as you choose to use them. We’ll cover editing widget themes next time.
Leave a Reply