Optionally provide private feedback to help us improve this article...

Thank you for your feedback!


The InstantKB Master Page

Each skin within InstantKB contains a standard ASP.NET master page file allowing you to easily wrap existing rich templates around InstantKB.

The master page file can be found within the root of each InstantKB skin directory. Each skin can have a different masterpage template. For example if you wanted to wrap an existing web site design around our "Classic" skin you would navigate to "\Skins\Classic\MasterPage.Master"

Open this within Visual Studio (or NotePad) and you should see the following template…

Understanding the MasterPage.Master File

The masterpage.master file is a template you can use to add your web site header & footer HTML around InstantKB. The default master mark-up looks like this (simplified)…

<%@ Master Language="VB" Inherits="InstantASP.InstantKB.UI.Controls.Master" EnableViewState="false" %>
<#%@ Register tagPrefix="InstantASP" Namespace="InstantASP.Common.UI.WebControls" Assembly="InstantASP.Common.UI" %>
<%@ Register tagPrefix="InstantKB" Namespace="InstantASP.InstantKB.UI.Controls" Assembly="InstantASP.InstantKB.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="ctlHeader" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="contentWrapper">
<div class="contentPadding">
<asp:contentplaceholder id="ctlContentPlaceHolder" runat="server"/>
</div>
</div>
</form>
</body>
</html>

This content placeholder is the location all knowledge base mark-up will e added.

<asp:contentplaceholder id="ctlContentPlaceHolder" runat="server"/>

Wrapping your design around InstantKB

To wrap your existing HTML around InstantKB you should add your header HTML just before the contentplaceholder tag. Add your footer HTML just below the <asp:contentplaceholder/> tag.

For example…

<%@ Master Language="VB" Inherits="InstantASP.InstantKB.UI.Controls.Master" EnableViewState="false" %>
<#%@ Register tagPrefix="InstantASP" Namespace="InstantASP.Common.UI.WebControls" Assembly="InstantASP.Common.UI" %>
<%@ Register tagPrefix="InstantKB" Namespace="InstantASP.InstantKB.UI.Controls" Assembly="InstantASP.InstantKB.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="ctlHeader" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="contentWrapper">
<div class="contentPadding">
<table width="500">
<tr>
<td>
<asp:contentplaceholder id="ctlContentPlaceHolder" runat="server"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

If your header or footer HTML contains links to images or other pages on your main web site you will need to ensure you provide absolute URLs for your hyperlinks within the InstantKB masterpage to ensure your links still work. For example an image maybe <img src="https://yourdomain.com/images/companylogo.gif" />.

If you use relative URLs for your links or images and InstantKB is installed within a child folder off your main web site you can use relative links providing you use the correct paths within the masterpage. For example an image maybe <img src="../images/companylogo.gif" />.

This would link to an image in your "Images" folder on your main web site.

Using rich server side controls within the MasterPage

As this is a standard ASP.NET master page you can include 3rd party UI controls such as JavaScript based navigation controls. Or standard ASP.NET server controls such as the ASP.NET membership controls.

For example lets say you would like to add ASP.NET user controls to render the forum header & footer you can include user controls like so...

<%@ Master Language="VB" Inherits="InstantASP.InstantKB.UI.Controls.Master" EnableViewState="false" %>
<#%@ Register tagPrefix="InstantASP" Namespace="InstantASP.Common.UI.WebControls" Assembly="InstantASP.Common.UI" %>
<%@ Register tagPrefix="InstantKB" Namespace="InstantASP.InstantKB.UI.Controls" Assembly="InstantASP.InstantKB.UI" %>
<% @Register tagprefix="InstantASP" Tagname="Header" src="instantaspascx/iaspheader.ascx" %>
<% @Register tagprefix="InstantASP" Tagname="Footer" src="instantaspascx/iaspfooter.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="ctlHeader" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="contentWrapper">
<div class="contentPadding">
<InstantASP:Header runat="server"/>
<asp:contentplaceholder id="ctlContentPlaceHolder" runat="server"/>
<InstantASP:Footer runat="server"/>
</div>
</div>
</form>
</body>
</html>

Using Inline Code within the MasterPage

You can use inline ASP.NET code within your MasterPage. For example if you wanted perform a redirect within our software you could use the masterpage.master file to add code as shown below..



As the master page is used for every page this code will be executed on all front-end pages. Adding inline code within the MasterPage.Master avoids the need to recompile the solution.

The InstantKB Admin CP Master Page

We use a separate masterpage for the InstantKB Admin Area. This masterpage can be found within the root of each skin directory and is called "Admin.Master".