nopCommerce ( Designers Guide )

Define theme
—————-
> Property settings to define unique look across the site
> Made up of set of elements- skins, CSS,Images.. etc.
> When you put a .CSS file in the theme folder, the style sheet is applied automatically as part of the theme.

nopCommerce theme
—————————
> Theme consist several supporting files
> All themes are located under nopCommerce root folder//Themes/

Installing theme in nopCommerce
——————————————-
> Extract theme zip file under ‘Themes’ folder.
> Go to admin section ( http://www.mydomain.com/admin )
> Go to Configuration>settings>General And Miscellaneous settings
> select te new theme from ‘Default Store Theme’ and save

Creating Your Own Theme
———————————
> Open your nopCommerce solution in Visual studio
> Go to themes and select any default theme
> Right click and copy it
> Select the themes folder and paste it there
> Rename it.
> Then open theme.config file from new theme folder.
> Change the theme name with your theme name.
> Start customizing it by changing images in content>images folder and by editing css files.

you can test the changes by Go to admin > apply new theme > save and preview

Layout/Design
——————-
> For consistent look over the site like ‘Master pages’ in ASP.NET 2.0
> Layout file allows to create a common template and can inherit its look and feel across all the views.
Two diiferent kind of layouts in nopCommerce
_ColumnsOne.cshtml
_ColumnsTwo.cshtml
> These 2 layouts are inherited from one main layout ‘ _Root.cshtml’ and itself inherited from ‘_Root.Hed.cshtml’
> Css an Jquery files are linked in ‘_Root.Head.cshtml’
> Location of layout files root/Views/Shared/..

Customizing nopCommerce Themes
————————————————

Changing Logo>>

1st Method
”””””””””””””
> 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)

2nd Method
”””””””””””””
> Save your store logo in this location : nopCommerce root folder/Themes/YOUR THEME/Content/images/
> Go to nopCommerce root folder/ Views / Shared / Header.cshtml
> Open “Header.cshtml” file
> Look for this code at the top:

var logoPath = “~/Themes/” + currentThemeName + “/Content/images/logo.gif”;

You can mention the path of your custom logo here.

In the above mentioned css code: logo.gif is the name of the store logo image file

> Change logo.gif with YourLogo.gif/jpg/png
> Save changes to the Header.cshtml file
> Hard refresh browser to view the changes

To make changes in style, look for the following code in your css >>

</pre>
.header-logo {
margin: 0 0 20px;
text-align: center;
}
.header-logo a {
display: inline-block;
max-width: 100%;
line-height: 0; /*firefox line-height bug fix*/
}
.header-logo a img {
max-width: 100%;
opacity: 1;
}
<pre>

To change layout>>

1.For changes in ‘_Root.cshtml’

</pre>
.master-wrapper-content {
position: relative;
z-index: 0;
width: 90%;
margin: 0 auto;
}
.master-column-wrapper {
position: relative;
z-index: 0;
}
.master-column-wrapper:after {
content: "";
display: block;
clear: both;
}

2. To make changes in ‘_ColumnOne.cshtml

</pre>
.center-1 {
margin: 0 0 100px;
}

3.To make changes in ‘_ColumnTwo.cshtml

</pre>
.center-2, .side-2 {
margin: 0 0 50px;
}
.side-2:after {
content: "";
display: block;
clear: both;
}

To edit Top Menu >>

> If you would like to customize / make changes in header menu (top menu) of your nopCommerce website, please go to the following location:
Go to nopCommerce root folder/ Views / Catalog / TopMenu.cshtml

> Open file “TopMenu.cshtml” – You can add or remove menu items in

  • according to your requirements.

 

To edit footer>>

> If you would like to customize / make changes in footer (or footer links) of your nopCommerce website, please go to the following location:

Go to nopCommerce root folder/ Views / Common / Footer.cshtml
> Open file “Footer.cshtml” – You can add or remove links in

  • or complete according to your requirements.

 

Right to Left Theme
————————-

> nopCommerce supports right to left version of theme
> To enable “Right to Left” version of theme, Go to Administration>configuration>Languages, Click on ‘Edit’ a language and check “Right to Left” option.
> styles used for RTL are located in styles.rtl.css file

Widgets
———-

widgets are 3rd party code .

nopcommerce allows two widget plugins
1.Google analytics ( to track statistics of visitors)
– To configure Google Analytics Widget, go to Administration > Content Management > Widgets, click on “Configure” against “Google Analytics” and add your Google Analytics code.
2.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.

Responsive Design
————————-

> kind of web design changes its layout according to the device screen size.
> nopCommerce supports responsive web design and handled via media queries.
> To view the responsiveness of your site , just re-size your browser window and keep decreasing its size.

Tips
—–

> Test design in all possible browsers
> Clear browser history if changes are not visible.
> understand difference between ‘Id’ and ‘Class’
> 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.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s