BVC 5 - How To Create a Theme - 3
In “Part 3” of creating a new theme, we’ll take a look at converting an existing theme to a new theme.
In this example, we’ll take a look at the “Print Book” theme.
As you’ve learned in the previous tutorial, each theme in BVC 5 has its own folder located under the BVModules > Themes folders. Lets take a look at the Print Book theme offered in BVC 5.
| Master Pages |
| Cart.Master |
Controls the layout for the Cart Page. |
| Category.Master |
Controls the layout for the Category page. |
| Closed.Master |
Controls the layout for the Closed page. |
| Custom.Master |
Controls the layout for Custom pages. |
| Default.Master |
Controls the layout for all pages that do not fall into other categories. |
| Home.Master |
Controls the layout for the Home page. |
| MyAccount.Master |
Controls the layout for the MyAccount pages. |
| Popup.Master |
Controls the layout for Popup pages. |
| Product.Master |
Controls the layout for Product pages. |
| Service.Master |
Controls the layout for Service pages. |
| Other Items under Themes Folder |
| BVTheme.xml |
XML File used to hold information about the theme. This information will appear on the "Themes" page in the Admin area. |
| Preview.jpg |
Sets the Preview image for the theme that will appear on the "Themes" page in the Admin area. |
| Controls Folder |
Used to store the Header, Footer and any other controls that appear on the master pages. |
| Images Folder |
Used to store images used by the master pages. |
| Styles Folder |
Used to store any style sheets used by the master pages. |
To create a new theme based off the Print Book theme, simply copy the folder to a new folder and give it a unique name.
Let's view the HTML for our Product master page:
The master page is a basic HTML skeleton of an ASP.NET page. This page is just like any other ASP.NET page and can reference style sheets, ASP.NET User Controls, HTML tags, etc… that will be used on every page that uses this master page.
Notice the two arrows in the above picture. The first arrow displays our reference to the style sheets this master page is using. BV Commerce 5 uses a CSS based design and will use these two style sheets to control the look of our master page.
The second arrow displays the “Content Place Holder” tag. Each master page contains a “Content Place Holder” tag. For each “ContentPlaceHolder” in the master page, the content page supplies a matching Content control. ASP.NET links the Content control to the appropriate “ContentPlaceHolder” by matching the ID of the “ContentPlaceHolder” with the pages “ContentPlaceHolderID”.
Let’s open a page that uses this master page and view it’s HTML:
Notice the HTML for this page must be between the “Content” tag. This Content tag has an ID of “MainContentPlaceHolder”. This ID matches that of our “ContentPlaceHolder” tag on the master page. When a user views this page on the store, the HTML content within the “Content” tags will be displayed within our master page.
How to associate a master page with an ASP.NET page
Each ASP.NET page within the store is made up of two files. The “.aspx” and “.vb” file. The “.aspx” markup file contains HTML and control tags. The “.vb” file contains the source code for the page.
At the beginning of most “.vb” files, you’ll find an event handler named “Page_PreInit”. View the screenshot below as an example:
Notice this line calls a method named “GetSafeMasterPage”. We can declare what master page we’d like this page to use by entering the name between the quotation marks. In this example, this page will use “Checkout.master”, located in our themes folder.
Let’s take a look at our newly created theme. We simply made a couple of changes in our style sheets that control the Home.Master page and the Category.Master Page:
