Once you've modified the CSS you might also want to change the overall layout of the Web Store page or 'frame' which is controlled by a MasterPage. The Web Store uses two Master Pages, one for the public portion of the store called WebStoreMaster.master and one for the admin portion called WebStoreAdmin.master.

Each ASP.NET Theme in the store has a matching Master Page Theme which is located in the App_Templates folder of the Web project. So if the Theme you're using is Standard then the matching Master Page is found in App_Templates/Standard.

Master Page Layout

The Web Store uses an overall page layout scheme for each of the 'public' interface pages as well as a separate layout for the Admin pages. For reference here's a typical form in the main portion of the application:

The form is made up of a Master Page template which surrounds the main content of the page. The Master Page makes up the 'frame' around the content and it renders the following UI components:

• Page Header
  The header at the top of the page which in the image above contains the logo, the sign in/out buttons, and the site menu bar at the top.

• Left Sidebar
  The left sidebar that contains the store's main navigation links and the category list. The Master Page implements the code to load up the category list.

• Content Panel (handled by each ASPX page)
  The main content which is defined for each page. Each ASPX page use the main Master page and so implements only a ContentPlaceHolder with the page specific content. The Master Page provides the 'frame' content. There are two ContentPlaceholders in the Master Page: Headers which allows adding custom page headers to the page, and Content which is the main content placeholder where the page specific content goes.

• Page Footer
  The footer for the page is rendered just below the Content Placeholder. In the default implementation this is a plain and simple copyright notice and a logo for the store.
  

All but the Content Panel are designed and hooked up in code inside of the Master Page. So there's one page that handles the main reusable layout of the page. The ASPX page then provides the ContentPlaceHolder with the page specific content in the content area.

Master Pages control the base frame layout of the page which in the figure above is everything but the inner content panel. Using Master Pages you can customize the header, the display of the sidebar and the footer - basically anything but the main inner content.

Changing the Master Page

The figure above shows a customized them that was copied originally from the Hawaiian Theme.

I copied the Theme and Master Page Theme and added a background image for the header, moving the Your account and sign in buttons to the top of the form and adding a background to the category list.

Note that the change in the Master page affects the entire public interface so the changes can be seen on all of the public pages.

Moving and Hiding Controls

For the most part the Master pages control visual layout of the 'frame' interface for the page with the master content displayed in the center panel. You can move around controls and markup the HTML anyway you see fit.

However, because these Master Pages are based on inheritance it's important that you don't remove any of the ASP.NET controls on the page. If you need get rid of controls you can hide them (Visible=False) but you shouldn't remove them to avoid any compilation errors related to missing control access. Adding functionality too is possible but please realize that the 'Master Master' page that contains the actual code is contained in the Standard App_Templates folder. Any changes made to the pages requires that you add the controls to the Standard Theme as well.

Dynamic Content on the Master Page

Most of the content on the Master Page is static, but there are a few dynamic items on the page and the Master Page provides the logic to load these items. Specifically the Category List and the My Shopping Cart details are filled on every load of the page. The Master Page handles the logic for loading these display items.

You can of course add your own controls which may either be static or dynamic.