Custom Theme

There are some good themes & Templates available for download or to buy, unfortunately non of them fulfills the design I want to use for my store even if I edit the CSS or replace the images.

Using Dreamweaver and Photoshop, I already created HTML with CSS that I wish to use for my store. I even created the Master Page but I dont know how to apply my design. Can anyone please guide me.

Here is a little info about my design;

Its based on 2 vertical menu bars and the content of the page would come in middle.

Left Menu
Since I have 85 categories and most of them can not be classified so it will not be possible to display them all in menu, therefore I want them to be like this.
1. Featured Categories (6 to 12 entries)
2. Categories (Categories A-G, H-M etc) + a link (All Categories) which will open a page displaying all categories.
3. Featured Manufactures (6 to 12 entries) + a link (All Manufactures) which will open a page displaying all Manufactures.
4. Customer Service (Help & FAQs, Request Quote, Site Map, Contacts etc)
5. Some Adv. Banners

Right menu
1. User Log in (if possible)
2. Quick Search + Link to a page for Advance Search i.e. Search Bar code or ISBN (my product is books so people do search using ISBN etc)
3. Subscription Menu, for user to enter there Email to subscribe for our newsletters.
4. New Entries (Displaying thumbnails of few latest Products)
5. Some Adv. Banners

I will be very grateful if anyone can guide me how to do so.

Hi,

I am in the middle of a custom theme as well.  Through trial and error I would recommend the following.

1. Keep the same master page names that come with the version you are using.  Unless you have a need to change up your designs regularly, just redesign root, onecolumn, twocolumn .master pages to your needs.  Keeps upgrades simpler as well

2. If you must change the name of the root pages, make it the root.master page.  Every static page is 'tied' to a master page.  Example, if you add a large image on the home page (default.aspx), that page gets it's layout from twocolumn.master which is nested inside of root.master.

If you use a different master than root that will mean that you will need to point twocolumn.master to your new root.master.

If you use a different master than twocolumn.master then you will need to point every page that uses it (default.aspx is one) to your new nested master page.  

At the top of the static aspx pages you will see something that looks like this..

<%@ Page Language="C#" MasterPageFile="~/MasterPages/OneColumn.master" AutoEventWireup="true"
    Inherits="NopSolutions.NopCommerce.Web.Default" CodeBehind="Default.aspx.cs" %>

...
This tells the page to use OneColumn.master (I changed mine from twocolumn.master).If you look at the top of onecolumn.master you will see a similar heading pointing to root.master.  

Remember that if you change the name of your nested master, you will need to make changes to every aspx page that uses that.

3.  If your design is significantly different than the darkOrange strip out all css from base,master,category,manufacturer, and modules.css.  Leave all the classes, but write your own css from scratch.  It's much easier and faster.  You will find many of the classes can be combined and stripped down.

4.  To apply your own theme, copy one of the theme folders in App_Themes, paste it into the same folder, rename it to whatever you want, and start making your changes.  Finally logon to admin panel goto configuration-->global settings and click the seo/display tab. Under store theme choose the theme you created in App_Themes.

That's it.  Pretty basic stuff, but for a dummy like me those are things that seemed to make it much easier.  Hope this helps.
joe

I am a jackeroo, thanks for you experience!

Hi there

I have no clue about modifying master pages. Can someone direct me for the start. I opened two column master in design view but to me it makes no sense ( i have little experince in aspx) i went to code view and saw many attached aspx file to code of design file . can someone help me which file to edit to get the design i want and see what i accomplished through the process

Thanks again

This is an older post but here are a few things that can point you in the right direction.

1. Be realistic about what you want to do.  If you don't know anything about asp.net web forms then don't try and change your site to look and act like patagonia.com.  Have a more modest goal.

2. Web forms for asp.net makes heavy use of templates.  The 2 primary templates are master pages and controls.
3. Master pages or files ending in .master are root pages that define layout and sometimes functionality of all pages (.aspx files).  
3. In nopCommerce there are 2 master pages.  Root.master is used for every page in nopCommerce.  Whatever you put in this file will be visible on ALL pages that link to this file.  TwoColumn.master is a nested master page and it goes inside and is child to Root.master.
4. Most pages(.aspx) in nopCommerce use TwoColum.master.  So the structure of say a product page would be like so:
Root.master->TwoColumn.master->Product.aspx.
5. There can be html markup in any of these types of pages.  You must decide what should go where.
6. The other type of template are control files.  These are found in the modules folder and end with the .ascx extension.  They are the meat of any web forms site.  Typically you will find most of the markup and most of the logic/functionality in these  files.  
7. You will find references to these files in master pages and .aspx files.  They usually look like this:

<nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />

There are references to the file location of these controls at the top of master, page, and control files.
8.  Controls can be a collection of controls or just a single control.  Again, you will find html markup in these files.
9. Files ending in .cs are code behind files that are the functionality/logic of page or control.  This is another topic all together.  I wouldn't touch these files until you understand C# and OOP.

This is a quick and dirty explanation of how to find the markup in nopCommerce.  I would strongly recommend downloading the free Firebug extension for Mozilla.  This will help you single out areas you want change.

Hope this helps.  Good luck and stay patient.

Thanks for the information . I guess I am pretty much ok. I learnt many things i redesigned my nopcommerce .It is goot for the start .www.Akermart.com . I have asp background but I am not good in .net still learning . Could you guys tell me please , what is the logic of nopcommerce going database and getting the data.

connection strings is under what module or how it connects in asp i was putting my connection strings in include file and just writing the necessarry query in the file and querrying using ADO. I know asp.net uses ADO.NET but in nopcommerce there should be a class for that can someone tell me the logic (classes,.ascx ) files for communicating and bringing the data

It depends on what version you are using.  Nop 1.7 + (I think) uses entity framework.  EF is a large topic.  I would suggest doing a little research on EF.  After that take a peak in the Data folder in the Nop.BusinessLogic, once you have an idea of how things work there you can progress into each of the other folders and look in the "...Manager.cs" classes.  These contain the queries to the database.

Sorry I couldn't be of more help but your question is a bit broad.  If there is something specific you are trying to do then perhaps a more detailed answer would be forthcoming.

t

Note: If you are using 1.9 then the manager classes have been replaced by Interface and "....Service".cs classes.  They work in a similar fashion.