How to Create a Theme - Part 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.
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:
