3 Columns instead of two on the home page

Dear Nopcommerce or anyone that could help

The latest edition of Nopcommerce supports 2 colums on the home page
The left menu and the Category-content page.
In style sheets it is:
The container:MasterWrapper-content which hold every thing
Then we have also the Div-Master-Wrapper-Side: Which holde the left Menu's Category, Information etc..
And we have the : Div-Master-Wrapper-cph, i geuss this is the content holder

Can we have next to this Div-Master-Wrapper-cph another DIV which contains actions in store, new products links etc..

Then you have three columns like Div-Master-Wrapper-Side and Div-Master-Wrapper-cph and the new one Div-Master-Wrapper-RSide for instance

Is this possible and what do i have to do to change the syle sheet for the default.aspx page. or do i have to make a new lets say threeColumns.Master

Hope someone could help me out.

Thanks in advance

Michael

you would need to modify the existing, or create a new master page with the layout you want. You can add the new column using css. We will be implementing nested master pages in the next release so you may want to look into this as you can keep common elements like logo, links, footer on all your master pages. Hope this helps,
Ben

Thanks Ben

I will dive into Nested Master Pages.

For now i just created a new Master Page. Name:Custom.Master with the same html and code behind as the main.master
But know with two content place holders.

And after the DIV ..CENTER i added

<div class="master-wrapper-Actions">
   <nopCommerce:RecentlyViewedProducts ID="ctrlRecentlyViewedProducts" runat="server" />
   <div class="clear">
   </div>
   <asp:ContentPlaceHolder ID="cph2" runat="server">
   </asp:ContentPlaceHolder>
</div>

Within the master.css i placed the lines u guys used.

.master-wrapper-Actions
{
  float: left;
  /*width: 180px;*/
  width: 170px;
  margin: 15px 0 0 10px;
  font-family: arial, helvetica, sans-serif;
  display: inline;
}


Only the lines in the default.aspx i change where:
code:
<%@ Page Language="C#" MasterPageFile="~/Custom.master" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Default"
    CodeBehind="Default.aspx.cs" %>

And the holder of the third column i placed after the ending code of the first content holder "cph1" the second content holder
<asp:Content ID="Content2" ContentPlaceHolderID="cph2" runat="Server">
    <div class="clear">
    </div>
</asp:Content>


Now i have a third column where i can place new products, and default "RecentlyViewedProducts" in.

Thanks for the reply

cheers!

Thanks Michael,

I tried your codes for the 3 column and I got the following errors:
[quote]
Server Error in '/' Application.

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Content controls have to be top-level controls in a content page or a nested master page that references a master page.

Source Error:


Line 38:                     <asp:ContentPlaceHolder ID="cph1" runat="server">
Line 39:                     </asp:ContentPlaceHolder>
Line 40:                     <asp:Content ID="Content2" ContentPlaceHolderID="cph2" runat="Server">
Line 41: <div class="clear">
Line 42: </div>

Source File: /Custom.master    Line: 40

Version Information: Microsoft .NET Framework Version:2.0.50727.3082; ASP.NET Version:2.0.50727.3082[/quote]

Any idea what I have done wrong? Can you give me the Custom.master codes you have?

Thanks

Ok

I have 2 questions for now. Did you used the latest version of NopCommerce on this site or did you download the updates om www.codeplex.com. There there is an example with nested master page

I will try to explain the one used on this site 1.11

1. when you create a new master page lets say Custom.master or better name it ThreeColumn.master
1a) Watch the code behind of the main.master and copy the the code behind in yours then you have to changed some variable names

ThreeColumn.master.cs

Example of codebehind:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.Common;
using NopSolutions.NopCommerce.Common.Configuration.Settings;
using NopSolutions.NopCommerce.Common.Promo.Affiliates;
using NopSolutions.NopCommerce.Common.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.Common.CustomerManagement;

namespace NopSolutions.NopCommerce.Web
{
    public partial class ThreeColumn: BaseNopMasterPage
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }
    }
}

1 b) Get Back to the HTML Source and change the directives of the first line:

<%@ Master Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.ThreeColumn"
    CodeBehind="ThreeColumn.master.cs" %>

<%@ Register TagPrefix="nopCommerce" TagName="Header" Src="~/Modules/Header.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HeaderMenu" Src="~/Modules/HeaderMenu.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Footer" Src="~/Modules/Footer.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="CategoryNavigation" Src="~/Modules/CategoryNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ManufacturerNavigation" Src="~/Modules/ManufacturerNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="InfoBlock" Src="~/Modules/InfoBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyViewedProducts" Src="~/Modules/RecentlyViewedProductsBox.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="SearchBox" Src="~/Modules/SearchBox.ascx" %>


1 C) From here you need to combine the html in ThreeColumn.master with the stylesheet and play around with the Width of you're containers.
i called the newly created div  "<div class="master-wrapper-Actions">" Within this div i placed the recently view products. My geuss is to leave the menu as it is and not mix it up with other information.You can also placed the shopping cart in this section or promotion/actions, eye catche stuff to sell etc..

I also placed in this example the search box left above the categories, in the vertical menu, because i will ad some additions to the search. But you can comment this out. These lines are reconized by  "<nopCommerce:SearchBox runat="server" ID="ctrlSearchBox"></nopCommerce:SearchBox>
                            <div class="clear">
                            </div>"


<div class="master-wrapper-page">
                    <div class="master-wrapper-content">
                        <nopCommerce:Header ID="ctrlHeader" runat="server" />
                        <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
                        <div class="master-wrapper-side">
                            <nopCommerce:SearchBox runat="server" ID="ctrlSearchBox"></nopCommerce:SearchBox>
                            <div class="clear">
                            </div>
                            <nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server"></nopCommerce:CategoryNavigation>
                            <div class="clear">
                            </div>
                            <nopCommerce:ManufacturerNavigation ID="ctrlManufacturerNavigation" runat="server" />
                            <div class="clear">
                            </div>
                            <nopCommerce:InfoBlock ID="ctrlInfoBlock" runat="server" />
                        </div>
                        <div class="master-wrapper-center">
                            <div class="master-wrapper-cph">
                                <asp:ContentPlaceHolder ID="cph1" runat="server">
                                </asp:ContentPlaceHolder>
                            </div>
                        </div>
                        <div class="master-wrapper-Actions">
                            <div class="wrapper-Actions">
                            </div>
                            <div class="clear">
                            </div>
                            <nopCommerce:RecentlyViewedProducts ID="ctrlRecentlyViewedProducts" runat="server" />
                            <div class="clear">
                            </div>
                            <asp:ContentPlaceHolder ID="cph2" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <nopCommerce:Footer ID="ctrlFooter" runat="server" />
                </div>

1 d) Nop open style sheet in the master.css, location "NopCommerceStore\App_Themes\darkOrange". In here i made some changes i change the default width to 1024px instead of 830 i geuss it was. Look out in the css file beneath i used different images. Most of them end with .PNG so you could reconised my changes.


.master-wrapper-page
{
  
  margin: 0px auto;
  /*width: 830px;*/
  width: 1024px;  
}

.master-wrapper-content
{
  float: left;
  /*width: 830px;*/
  width: 1024px;
  margin: 0px 0px 0px 0px;
  text-align: left;
  /*Background: #fff url(images/bg_container.gif) repeat-x;*/
  background: #fff;
}

.master-wrapper-side
{
  float: left;
width: 180px;
  
  margin: 15px 0 0 10px;
  font-family: arial, helvetica, sans-serif;
  display: inline;
}

.master-wrapper-center
{
  float: left;
  width: 630px;
  margin: 15px 0 0 10px;
  background: url(images/bg_maincolumn.gif) no-repeat left bottom;
  display: inline;
}

.master-wrapper-cph
{
  float: left;
  width: 610px;
  background: #fff url(images/bg_content.gif) no-repeat right top;
  color: #000;
  min-height: 400px;
  padding: 10px 10px 10px 10px;
}


.master-wrapper-Actions
{
  float: left;
  /*width: 180px;*/
  width: 174px;
  display: inline;  
  height: auto;
  background: url('images/Action-Content.png') no-repeat 0 100%;
  overflow: hidden hidden;
  margin: 15px 0 0 10px;  
}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

master-wrapper-Actions

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.master-wrapper-Actions .wrapper-Actions
{

  background: url(images/ActionHeader.png) left top no-repeat;
  display: block;
  overflow: hidden hidden;
  padding: 15px 0 9px 0px;
}

1 e) Now it is possible to change the directive in the default.aspx page, this is the first line. Could be that here you are missing the search if it was not included in the Menu header as a NopCommerce controle. Also the placeholder for the third column is added in here. <asp:Content ID="Content2" ContentPlaceHolderID="cph2" runat="Server">
    <div class="clear">
    </div>
</asp:Content>


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

<%@ Register TagPrefix="nopCommerce" TagName="TodaysPoll" Src="~/Modules/TodaysPoll.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="NewsList" Src="~/Modules/NewsList.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageCategories" Src="~/Modules/HomePageCategories.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageProducts" Src="~/Modules/HomePageProducts.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageText" Src="Modules/HomePageText.ascx" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="Server">
    <nopCommerce:HomePageText ID="ctrlHomePageText" runat="server"></nopCommerce:HomePageText>
    <div class="clear">
    </div>
    <nopCommerce:HomePageCategories ID="ctrlHomePageCategories" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:HomePageProducts ID="ctrlHomePageProducts" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:NewsList ID="ctrlNewsList" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:TodaysPoll ID="ctrlTodaysPoll" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph2" runat="Server">
    <div class="clear">
    </div>
</asp:Content>

In the new code you can download from codeplex similair can be done. Hope it helps my english is not all that.

Hope it helps you one the way if something is missing or you do have questions let me know.

Ps:
1 Don't forget to rebuild the site in visual studio 2008.
2 Make a copy first of you're origanel and/or use Araxis merge or other application to watch changed made if you update the site when you added some custom code.

Cheers

Michael

Thanks Michael,

I installed the nopcommerce 1.11.

I just finished your codes, build solution, and debug. But, I can't see the third column and the recently viewed products. Any idea?

Dear T..

I add now some code that i tested in the origanal code of 1.11 version. The one before was more for mine own lay-out.

1 a) ThreeColumn.master html source
<%@ Master Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.ThreeColumn"
    CodeBehind="ThreeColumn.master.cs" EnableTheming="true" %>

<%@ Register TagPrefix="nopCommerce" TagName="Header" Src="~/Modules/Header.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HeaderMenu" Src="~/Modules/HeaderMenu.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Footer" Src="~/Modules/Footer.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="CategoryNavigation" Src="~/Modules/CategoryNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ManufacturerNavigation" Src="~/Modules/ManufacturerNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="InfoBlock" Src="~/Modules/InfoBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyViewedProducts" Src="~/Modules/RecentlyViewedProductsBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="App_Themes/darkOrange/master.css" rel="stylesheet" type="text/css" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
</head>
<body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
        EnableScriptLocalization="true" ID="ScriptManager1" />
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">
            <nopCommerce:Header ID="ctrlHeader" runat="server" />
            <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
            <div class="master-wrapper-side">
                <nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server"></nopCommerce:CategoryNavigation>
                <div class="clear">
                </div>
                <nopCommerce:ManufacturerNavigation ID="ctrlManufacturerNavigation" runat="server" />
                <div class="clear">
                </div>
                <nopCommerce:InfoBlock ID="ctrlInfoBlock" runat="server" />
            </div>
            <div class="master-wrapper-center">
                <div class="master-wrapper-cph">
                    <asp:ContentPlaceHolder ID="cph1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div class="master-wrapper-Actions">
                <div class="wrapper-Actions">
                </div>
                <div class="clear">
                </div>
                <nopCommerce:RecentlyViewedProducts ID="ctrlRecentlyViewedProducts" runat="server" />
                <div class="clear">
                </div>
                <asp:ContentPlaceHolder ID="cph2" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div class="clear">
        </div>
        <nopCommerce:Footer ID="ctrlFooter" runat="server" />
    </div>
    </form>
</body>
</html>

1 b) ThreeColumn.master.cs source

//------------------------------------------------------------------------------
// The contents of this file are subject to the nopCommerce Public License Version 1.0 ("License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at  https://www.nopcommerce.com/License.aspx.
//
// Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied.
// See the License for the specific language governing rights and limitations under the License.
//
// The Original Code is nopCommerce.
// The Initial Developer of the Original Code is NopSolutions.
// All Rights Reserved.
//
// Contributor(s): _______.
//------------------------------------------------------------------------------

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.Common;
using NopSolutions.NopCommerce.Common.Configuration.Settings;
using NopSolutions.NopCommerce.Common.Promo.Affiliates;
using NopSolutions.NopCommerce.Common.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.Common.CustomerManagement;


namespace NopSolutions.NopCommerce.Web
{
    public partial class ThreeColumn : BaseNopMasterPage
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }
    }
}

1 c) Replace the lines in the master.css, located in the darkOrange folder, until the the comment of the header sections

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  MASTER PAGE WRAPPERS

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.master-wrapper-page
{
  margin: 10px auto;
  width: 1024px;
}

.master-wrapper-content
{
  float: left;
  width: 1024px;
  margin: 15px 0 0;
  text-align: left;
  background: #555 url(images/bg_container.gif) repeat-x;
}

.master-wrapper-side
{
  float: left;
  width: 180px;
  margin: 15px 0 0 10px;
  font-family: arial, helvetica, sans-serif;
  display: inline;
}

.master-wrapper-center
{
  float: left;
  width: 630px;
  margin: 0px 0 0 10px;
  background: url(images/bg_maincolumn.gif) no-repeat left bottom;
  display: inline;
}

.master-wrapper-cph
{
  float: left;
  width: 610px;
  background: #fff url(images/bg_content.gif) no-repeat right top;
  color: #000;
  min-height: 400px;
  padding: 10px 10px 10px 10px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

master-wrapper-Actions

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.master-wrapper-Actions .wrapper-Actions
{

background: url(images/ActionHeader.png) left top no-repeat;
display: block;
overflow: hidden hidden;
padding: 15px 0 9px 0px;
}

.master-wrapper-Actions
{
float: left;
/*width: 180px;*/
width: 174px;
display: inline;
height: auto;
background: url('images/Action-Content.png') no-repeat 0 100%;
overflow: hidden hidden;
margin: 0px 0 0 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  MASTER HEADER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


1 d) Replace all the LINES in the Default.aspx html source

<%@ Page Language="C#" MasterPageFile="~/ThreeColumn.master" AutoEventWireup="true"
    Inherits="NopSolutions.NopCommerce.Web.Default" Codebehind="Default.aspx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="TodaysPoll" Src="~/Modules/TodaysPoll.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="NewsList" Src="~/Modules/NewsList.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageCategories" Src="~/Modules/HomePageCategories.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageProducts" Src="~/Modules/HomePageProducts.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageText" Src="Modules/HomePageText.ascx" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="Server">
<div>Content column</div>
    <nopCommerce:HomePageText ID="ctrlHomePageText" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:HomePageCategories ID="ctrlHomePageCategories" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:HomePageProducts ID="ctrlHomePageProducts" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:NewsList ID="ctrlNewsList" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:TodaysPoll ID="ctrlTodaysPoll" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph2" runat="Server">
    <div>Third column</div>
</asp:Content>

That's it i guess,Recompile or rebuild the solution.

PS
1) use FireFox and install Color-zilla free plugin under web developer section, i think it is, you will get a color picker which you can use to see the divs etc..

2) Changes made in aspx or stylesheets you do not have to rebuild save wil do, changes made in server side code, you need to rebuild the solution

Thanks Michael,

This time I got the third column, but without the recently viewed products or even the third column box.

Here are the html , master.css, ThreeColumn.Master.cs:
[quote]

ThreeColumn.Master

<%@ Master Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.ThreeColumn"
CodeBehind="ThreeColumn.master.cs" EnableTheming="true" %>

<%@ Register TagPrefix="nopCommerce" TagName="Header" Src="~/Modules/Header.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HeaderMenu" Src="~/Modules/HeaderMenu.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Footer" Src="~/Modules/Footer.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="CategoryNavigation" Src="~/Modules/CategoryNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ManufacturerNavigation" Src="~/Modules/ManufacturerNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="InfoBlock" Src="~/Modules/InfoBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyViewedProducts" Src="~/Modules/RecentlyViewedProductsBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="App_Themes/darkOrange/master.css" rel="stylesheet" type="text/css" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true"
EnableScriptLocalization="true" ID="ScriptManager1" />
<div class="master-wrapper-page">
<div class="master-wrapper-content">
<nopCommerce:Header ID="ctrlHeader" runat="server" />
<nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
<div class="master-wrapper-side">
<nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server"></nopCommerce:CategoryNavigation>
<div class="clear">
</div>
<nopCommerce:ManufacturerNavigation ID="ctrlManufacturerNavigation" runat="server" />
<div class="clear">
</div>
<nopCommerce:InfoBlock ID="ctrlInfoBlock" runat="server" />
</div>
<div class="master-wrapper-center">
<div class="master-wrapper-cph">
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="master-wrapper-Actions">
<div class="wrapper-Actions">
</div>
<div class="clear">
</div>
<nopCommerce:RecentlyViewedProducts ID="ctrlRecentlyViewedProducts" runat="server" />
<div class="clear">
</div>
<asp:ContentPlaceHolder ID="cph2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="clear">
</div>
<nopCommerce:Footer ID="ctrlFooter" runat="server" />
</div>
</form>
</body>
</html>

Master.css until Master Header

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  MASTER PAGE WRAPPERS

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.master-wrapper-page
{
  margin: 10px auto;
  width: 1024px;
}

.master-wrapper-content
{
  float: left;
  width: 1024px;
  margin: 15px 0 0;
  text-align: left;
  background: #555 url(images/bg_container.gif) repeat-x;
}

.master-wrapper-side
{
  float: left;
  width: 180px;
  margin: 15px 0 0 10px;
  font-family: arial, helvetica, sans-serif;
  display: inline;
}

.master-wrapper-center
{
  float: left;
  width: 630px;
  margin: 15px 0 0 10px;
  background: url(images/bg_maincolumn.gif) no-repeat left bottom;
  display: inline;
}

.master-wrapper-cph
{
  float: left;
  width: 610px;
  background: #fff url(images/bg_content.gif) no-repeat right top;
  color: #000;
  min-height: 400px;
  padding: 10px 10px 10px 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

master-wrapper-Actions

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.master-wrapper-Actions .wrapper-Actions
{

background: url(images/ActionHeader.png) left top no-repeat;
display: block;
overflow: hidden hidden;
padding: 15px 0 9px 0px;
}

.master-wrapper-Actions
{
float: left;
/*width: 180px;*/
width: 174px;
display: inline;
height: auto;
background: url('images/Action-Content.png') no-repeat 0 100%;
overflow: hidden hidden;
margin: 0px 0 0 10px;
}

ThreeColumn.Master.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.Common;
using NopSolutions.NopCommerce.Common.Configuration.Settings;
using NopSolutions.NopCommerce.Common.Promo.Affiliates;
using NopSolutions.NopCommerce.Common.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.Common.CustomerManagement;

namespace NopSolutions.NopCommerce.Web
{
    public partial class ThreeColumn : BaseNopMasterPage
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }
    }
}

[/quote]

Appreciate your help. I still couldn't find where I've missed some codes.

can you show me what you have in the default.aspx the html source of it.

Thanks in advance..

Michael

Sorry, I forgot the default.aspx. I thought I had it posted.

default.aspx
[quote]
<%@ Page Language="C#" MasterPageFile="~/ThreeColumn.master" AutoEventWireup="true"
    Inherits="NopSolutions.NopCommerce.Web.Default" Codebehind="Default.aspx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="TodaysPoll" Src="~/Modules/TodaysPoll.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="NewsList" Src="~/Modules/NewsList.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageCategories" Src="~/Modules/HomePageCategories.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageProducts" Src="~/Modules/HomePageProducts.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageText" Src="Modules/HomePageText.ascx" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="Server">
<div>Content column</div>
<nopCommerce:HomePageText ID="ctrlHomePageText" runat="server" />
<div class="clear">
</div>
<nopCommerce:HomePageCategories ID="ctrlHomePageCategories" runat="server" />
<div class="clear">
</div>
<nopCommerce:HomePageProducts ID="ctrlHomePageProducts" runat="server" />
<div class="clear">
</div>
<nopCommerce:NewsList ID="ctrlNewsList" runat="server" />
<div class="clear">
</div>
<nopCommerce:TodaysPoll ID="ctrlTodaysPoll" runat="server" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph2" runat="Server">
<div>Third Column</div>
</asp:Content>
[/quote]

Thanks,