Nop Commerce Designer's Guide

Contents
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Overview Installing / Applying theme in nopCommerce Creating / Writing your own theme (using current / default theme) Understanding Layout / Design Customizing nopCommerce Themes Right To Left Theme Widgets Mobile Theme Tips and Tricks 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.

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:

2. 3. 4.

Go to the admin section (www.yourdomain.com/admin). Go to Configuration > Settings > General And Miscellaneous settings 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:

1.

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

2. 3. 4. 5. 6.

Now, Right click on the theme > select COPY Now select "Theme" folder > right click > PASTE You will get something like "Copy of default/current theme" Rename it - whatever you like to be the name of your new theme For an instance, let's say: MyFirstTheme Now inside your New theme folder "MyFirstTheme" > open "theme.config" - Change the current / existing theme name with your new theme name "MyFirstTheme"

Like this:

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:

Now, inside your new theme folder "MyFirstTheme" > Content > Images add your new images in "images directory and start updating / customizing your style.css accord ing 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

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

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:

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

_ColumnTwo.cshml Layout (Content Blocks)

_ColumnsThree.cshml Layout
In this case, there are 3 columns in the body structure:

_ColumnThree.cshml Layout (Content Blocks)

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 a. b. c. Go to nopCommerce root folder /Themes/YOUR THEME/Content/images/ Look for logo.gif image file Replace the logo.gif with your store logo and name it as logo.gif (with same width:310px and height:60px)

Second Method a. b. c. d. Save your store logo in this location : nopCommerce root folder/Themes/YOUR THEME/Content/images/ Go to nopCommerce root folder/Themes/YOUR THEME/Content/ Open style sheet: style.css Look for the css class "a.logo" and you will find this:

e. a.logo{background:url(images/logo.gif);display:block;width:310px;heig ht:60px;text-decoration:none;}
In the above mentioned css code: logo.gif is the name of the store logo image file f. g. Change logo.gif with YourLogo.gif/jpg/png (and specify the width and height of your new logo) Save changes to your style sheet (style.css) and preview your public store

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

2. .master-wrapper-page{margin:30px auto 0;width:960px; 3. background: none repeat scroll 0 0 #FFF; 4. box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1); 5. -moz-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1); 6. -webkit-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.1);} 7. 8. .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;}
9. If you would like to customize / make changes in the layout of _ColumnOne.cshtml. Please look for this css code in your style.css

10. .master-wrapper-main .center-1{float:left;width:910px;minheight:600px;padding:10px;background:#FFF;display:inline;borderradius:5px;}

11. If you would like to customize / make changes in the layout of _ColumnTwo.cshtml. Please look for this css code in your style.css

12. .master-wrapper-main .side-2{float:left;width:190px;margin:10px 0;display:inline;} 13. .master-wrapper-main .center-2{float:left;width:710px;minheight:600px;padding:10px;margin:10px 0 10px 10px;background:#FFF;display:inline;border-radius:5px;}

14. If you would like to customize /make changes in the layout of _ColumnThree.cshtml. Please look for this css code in your style.css

15. .master-wrapper-main .leftside-3{float:left;width:190px;margin:10px 0;display:inline;} 16. .master-wrapper-main .center-3{float:left;width:510px;minheight:600px;padding:10px;margin:10px;background:#FFF;display:inline; overflow:hidden;border-radius:5px;}

17. .master-wrapper-main .rightside3{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:

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. 2. Google Analytics 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.

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.

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. 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. Make sure you understand the difference between: id and classes. You can apply classes to multiple elements, while ids refer to only one element. 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/ CSS style sheets does not allow you to start the name of your ids and classes with a number or other non-alphabetical character. 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.

2. 3. 4.

5. 6.

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.