BVC 5 - How To Create a Theme - 2

In the second part of our tutorial, we’ll take a look at adding our own header and footer to our home page. We’ll also some additional styles to liven up our store.

To begin, let’s add some new styles to our style sheet to properly position our new header and footer controls we’re about to add. First, modify the “body” selector in the style sheet (or compare your style sheet to ours below). We’re going to change the background color of our website to black, and the font color to white.

Next, copy and paste the following styles to your style sheet and save your changes:

/* header */
#header {height:75px;font-size:11px;margin:0;border-bottom:solid 1px #fff;}
#header ul {list-style:none;margin:0;padding:0;}
#header ul li {display:inline;margin:0;padding:0}
#header a {color:#fff; margin:0 20px 0 0;}
#headermainmenu {font-weight:bold;text-align:center;font-size:13px;}
#headernavmenu {margin:0 0 5px 0;padding:3px 0 0 0; text-align:right;}


#footernavmenu a {color:#fff;margin:0 0 0 20px;}
#footernavmenu ul {list-style:none;margin:0;}
#footernavmenu li {display:inline;margin:0;}


/* footer */
#footer {width:780px;margin-left:auto;margin-right:auto;clear:both;border-top:solid 1px #666;}
#footernavmenu {margin:10px 0 20px 0;text-align:center;}
#footercopyright {width:300px;padding:10px;color:#666;font-size:11px;}

Next, instead of creating our own header and footer controls, we’re going to copy them from another theme.

From your solutions explorer, copy the “header.ascx” and “footer.ascx” from the “BVC 5” theme to your theme folder:

Now we need to add some code to our "default.master" to allow these controls to appear. View the screenshot below. Arrows will mark all newly added items that need to be added to your master page.

From the VWD main toolbar, select File > Save All. Right click on the URL located in the “Solution Explorer” and select “View in Browser”. If you need help locating the URL, part 1 of the tutorial contains a screenshot of this option.

If everything went well, your site should look similar to the screenshot below.

Hopefully this tutorial provided enough direction to allow you to begin creating your own theme. In "Part 3", we’ll take a look at creating a new theme from an existing BV Commerce 5 theme.