Designer's Guide

Contents

  1. Overview
  2. Installing / Applying theme in nopCommerce
  3. Creating / Writing your own theme (using current / default theme)
  4. Understanding Layout / Design
  5. Customizing nopCommerce Themes
  6. Right To Left Theme
  7. Widgets
  8. Responsive Design
  9. Mobile Theme
  10. Tips and Tricks
  11. Contributing a Theme

Overview

What is a theme?

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.

Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will contain skins. Themes are defined in special directories in your Web site or on your Web server.

A theme can also include a cascading style sheet (.CSS file). When you put a .CSS file in the theme folder, the style sheet is applied automatically as part of the theme. You define a style sheet using the file name extension .CSS in the theme folder. (Source: http://msdn.microsoft.com)

Definition of a nopCommerce theme

A nopCommerce theme is basically used for having a consistent layout and appearance across all pages or an entire website. nopCommerce theme consists of several supporting files, including style sheets for page appearance and supporting images.

Designer's Guide

All themes are located under nopCommerce root folder/Themes/.

Installing / Applying theme in nopCommerce

Let's assume you just downloaded a new theme which is in a zip file.

  1. Extract the contents of your zip file and copy it under "Themes" folder like shown in the figure below:

    Designer's Guide

  2. Go to the admin section (www.yourdomain.com/admin).

  3. Go to Configuration > Settings > General And Miscellaneous settings

  4. Select new theme from "Desktop Store theme" dropdown and SAVE.

    Now, go to public store. You should be able to see the new theme on your website.

Creating / Writing your own theme (using current / default theme)

Open your nopCommerce solution or website (web version) in Visual Studio - Go to this location:

  • If using sourcecode: \Nop.Web\Themes\
  • If using web version: \[Project Root]\Themes\
  1. Select any default / current theme

    Designer's Guide

  2. Now, Right click on the theme > select COPY

  3. Now select "Theme" folder > right click > PASTE

  4. You will get something like "Copy of default/current theme"

  5. Rename it - whatever you like to be the name of your new theme – For an instance, let's say: MyFirstTheme

  6. Now inside your New theme folder "MyFirstTheme" > open "theme.config" - Change the current / existing theme name with your new theme name "MyFirstTheme"

    Like this:

    Designer's Guide

  7. Now inside your new theme folder "MyFirstTheme" > View > Shared > open "Head.chtml" - Change the current / existing theme name with your new theme name "MyFirstTheme"

    Like this:

    Designer's Guide

    Now, inside your new theme folder "MyFirstTheme" > Content > Images add your new images in "images” directory and start updating / customizing your style.css according to your requirements.

    If you would like to test the changes > Go to Admin section > Apply your new theme > Save change and preview your public store.

Understanding Layout / Design

What are layouts? Every web developer / designer wants to maintain a consistent look and feel across all of the pages within the website. Back in the days, the concept of "Master Pages" was introduced in ASP.NET 2.0 which helps in maintaining a consistent look of the website by mapping it with .aspx pages.

Razor also supports this similar concept with a feature called "Layouts". Basically, it allows you to define a common site template and then inherit its look and feel across all the views/pages on your website.

In nopCommerce, there are 3 different kinds of layouts:

  • _ColumnsOne.cshtml
  • _ColumnsTwo.cshtml
  • _ColumnsThree.cshtml

All these 3 layouts are inherited from one main layout called: _Root.cshtml. The _Root.cshtml itself is inherited from _Root.Head.cshtml. _Root.Head.cshtml is the file you need to look into if you are linked css stylesheet and jquery files (you can add / link more .css and .js files here). The location of all these layouts in nopCommerce is as follows: nopCommerce root directory/Views/Shared/... . If you are using source code version then: \Presentation\Nop.Web\Views\Shared\...

Layout of _Root.cshtml

Designer's Guide

Layout of _Root.cshtml (in respect of css class)

Designer's Guide

Now the following 3 layouts override the body of _Root.cshtml:

_ColumnsOne.cshtml

In this case, there is no change in the layout of the body, so the structure remains pretty much the same as _Root.cshtml:

Designer's Guide

_ColumnsTwo.cshtml

In this case, there are 2 columns in the body structure:

Designer's Guide

_ColumnTwo.cshml Layout (Content Blocks)

Designer's Guide

_ColumnsThree.cshml Layout

In this case, there are 3 columns in the body structure:

Designer's Guide

_ColumnThree.cshml Layout (Content Blocks)

Designer's Guide

Customizing nopCommerce Themes

Uploading your store logo

In order to upload your store logo in a nopCommerce website, there are basically 2 methods:

First Method

  1. Go to nopCommerce root folder /Themes/YOUR THEME/Content/images/
  2. Look for logo.gif image file
  3. Replace the logo.gif with your store logo and name it as logo.gif (with same width:310px and height:60px)

Second Method

  1. Save your store logo in this location : /Themes/YOUR THEME/Content/images/
  2. Open /Views/Shared/Header.cshtml
  3. Replace logo.gif with YourLogo.gif/jpg/png

Important: You might have to refresh the browser in order to see the changes (new store logo).

How to change a layout

  1. If you would like to customize / make changes in the base layout (i.e. _Root.cshtml) of your nopCommerce website. Please look for this css code in your style.css

    .master-wrapper-page{margin:30px auto 0;width:960px;background:none repeat scroll 0 0 #FFF;box-shadow:0 0.5em 2em rgba(0,0,0,0.1);-moz-box-shadow:0 0.5em 2em rgba(0,0,0,0.1);-webkit-box-shadow:0 0.5em 2em rgba(0,0,0,0.1);}
    .master-wrapper-content{float:left;width:930px;margin:15px 15px 0 15px;padding:15px 0 0;text-align:left;background:none repeat scroll 0 0 #FFFFFF;}
    
  2. If you would like to customize / make changes in the layout of _ColumnOne.cshtml. Please look for this css code in your style.css

    .master-wrapper-main .center-1{float:left;width:910px;min-height:400px;padding:10px;background:#FFF;display:inline;border-radius:5px;}
    
  3. If you would like to customize / make changes in the layout of _ColumnTwo.cshtml. Please look for this css code in your style.css

    .master-wrapper-main .side-2{float:left;width:190px;margin:10px 0;display:inline;}
    .master-wrapper-main .center-2{float:left;width:710px;min-height:400px;padding:10px;margin:10px 0 10px 10px;background:#FFF;display:inline;border-radius:5px;}
    
  4. If you would like to customize /make changes in the layout of _ColumnThree.cshtml. Please look for this css code in your style.css

    .master-wrapper-main .leftside-3{float:left;width:190px;margin:10px 0;display:inline;}
    .master-wrapper-main .center-3{float:left;width:510px;min-height:400px;padding:10px;margin:10px;background:#FFF;display:inline;overflow:hidden;border-radius:5px;}
    .master-wrapper-main .rightside-3{float:right;width:190px;margin:10px 0;display:inline;}
    

Right To Left Theme

nopCommerce also supports right to left version of the public store theme.

nopCommerce default public store theme "DefaultClean" comes with the feature of right to left version style sheet.

To enable "Right to Left" version of theme, please go to Administration > Configuration > Languages, click on "Edit" a language, and ensure that "Right-to-Left" option is enabled.

Now, if you see the public store, it will look like this:

Designer's Guide

Styles used for RTL support are located in styles.rtl.css file.

Widgets

A widget is a stand-alone application that can be embedded into third party sites by any user on a page. It's a small application that can be installed and executed within a web page by an end user. (Wikipedia).

In nopCommerce, a widget plugin allows you to embed 3rd party code / application in public store in certain areas (for example, head tag, after body tag, left column block and right column block).

Currently, default nopCommerce installation allows the store admin to embed two widget plugins:

  1. Google Analytics
  2. Nivo Slider

Google Analytics Widget

Google Analytics is a free website stats tool from Google. It keeps track of statistics about the visitors and ecommerce conversion on your website. This widget block can be rendered at:

  • HTML Header tag
  • After <body> end HTML tag.

To configure Google Analytics Widget, go to Administration > Content Management > Widgets, click on "Configure" against "Google Analytics" and add your Google Analytics code.

Nivo Slider

Nivo slider is a nice and clean jquery image slider for your website / homepage to display a number of images scrolling with unique transition effects.

By default, nopCommerce comes with nivo slider integration as a widget (Enabled by default) which allows you to display number of images scrolling automatically on your homepage.

Responsive Design

The number of mobile devices is increasing at a very fast pace and due to different screen sizes / screen resolution, a responsive design approach is used by web developers in order to keep the user experience same or similar across the website.

Yes, nopCommerce default layout/theme does support a responsive design that is optimized for all screen sizes and this approach is handled via media-queries in the CSS. This allows your online ecommerce store layout to display the content of your website by automatically adjusting the viewing area depending on the size of the screen.

Viewing the responsive design. Just re-size your browser windows and keep decreasing its size. As, the size of the browser windows will decrease, you will see the nopCommerce site will adjust the content accordingly.

Enable / Disable the responsive design. A great thing about nopCommerce project is that a store admin gets the option to enable or disable the responsive design. By default, this feature is enabled but you can disable this feature anytime by going to: Administration > Configuration > Settings > General And Miscellaneous settings > "Responsive design supported"

Mobile Theme

As mobile technology is growing, mobile friendly website are becoming an important aspect of online business in order to reach full market that includes all kinds of online customers i.e. who access the standard desktop website and who access the website using their mobile devices.

Designer's Guide

nopCommerce does support mobile devices and it comes with a user-friendly mobile theme. In order to enable and select the mobile theme on your nopCommerce website, please go to Administration > Configuration > Settings > General and Miscellaneous Settings and ensure that "Mobile devices supported" is enabled.

Viewing the mobile site

Once you enable the mobile theme, a simple question arises - How to view the mobile website without a using a mobile phone? There are different ways to view your nopCommerce mobile website without using a mobile phone.

Method 1. Go to administration > Configuration > Settings > All Settings (Advanced) and set "storeinformationsettings.emulatemobiledevice" to "true". So, now when you view your nopCommerce website in your browser, you will see the mobile site.

Method 2. Another way of viewing the nopCommerce mobile site (without changing any setting) is using Firefox Mozilla browser along with an Add-on known as "Agent Switcher". Once you have this installed open nopCommerce website on Mozilla Firefox browser, go to "Tools" > "Default User Agent" and select "iPhone 3.0". Now, refresh your website and you will see your nopCommerce mobile site.

Understanding Mobile Theme

In order to understand nopCommerce mobile theme - we need to know the answer to a question "how a nopcommerce website knows that the user is viewing the website from a computer/desktop or a mobile device?".

The answer to this question is - 51Degrees.mobi

nopCommerce is using a .NET open source class library known as 51Degrees.mobi that detects mobile devices and browsers. As soon as your nopCommerce website detects that the request to view the website is coming from a mobile device, it switches up the public store desktop theme with a mobile theme (if the mobile theme feature is enabled in your Administration section as explained above). For more information about 51Degrees.mobi, please visit: http://51degrees.mobi/

The default mobile theme is located under nopCommerce root folder/Themes/Mobile.

In your nopCommerce web project, you can see all the views that have a mobile suffix like: Index.cshtml (Desktop view) and Index.Mobile.cshtml (Mobile View). Files with ".Mobile" part are appropriate mobile themes views (pages).

 

Tips and Tricks

  1. One of the major issues in web development / designing is that different browsers use different default values for various CSS properties. While customizing or creating your own them – Always make sure that your styling is compatible with all the browsers. Test your website in major browsers like IE, Mozilla, Opera, Safari and Chrome.
  2. While working with CSS style sheets, if you don't see any change on your website – Do not panic. Try deleting history and cookies of your browser and then try again by refreshing your page.
  3. Make sure you understand the difference between: id and classes. You can apply classes to multiple elements, while ids refer to only one element.
  4. Make use of Firebug Add-on plug-in offered by Mozilla. It is a very useful tool which allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can download it from here: http://getfirebug.com/
  5. CSS style sheets does not allow you to start the name of your ids and classes with a number or other non-alphabetical character.
  6. Do not limit yourself to span and div tags only. There are a lot of other / better features offers by CSS to style a page.

Contributing a Theme

nopCommerce is supported by a very active community. So, any kind of contribution is highly appreciated.

You can now share your theme with other users by Extensions section of nopCommerce website.

Just go to My account page, then "Your contributions and extensions" tab. Click "Upload a new extension" button in order to upload a new theme.

Author: Lavish Kumar (www.StrivingProgrammers.com)

nopCommerce on facebook