Introduction

For many creating advanced ASP.NET website or application administration templates is difficult; we are software developers not designers. This sample and tutorial shows you how to leverage freely available pre-designed templates and how to use them in your existing ASP.NET application or website.

Building the Sample

This code has been tested on Windows Server 2008 RC2 & Windows Server 2012, and developed using Microsoft Visual Studio 2010 & VS2012. It should work perfectly well on any computer running Windows 7 and higher (possibly Vista).

Description

If you are anything like me your web site design skills are simply not good enough for professional purposes. Yet, there are so many great and free designs available on the internet for us to use; if we could only incorporate them into our ASP.NET applications quickly and successfully.

Within this tutorial I will show you how to use a pre-designed and free administration design and incorporate that into your ASP.NET application and use the built in Roles and Memberships to manage the system. In future tutorials I will show you have to implement various features of your new ASP.NET administration page.

Please remember to Vote,

The Design

There are many designs you can choose, look on Bing for ASP.NET Administration Designs, or Dashboards and you will discover a great wealth to choose from. In this tutorial we will use a free design Nova HTML5 which is an htnl5 template and css combination. But you can use any template you like.

The Proceedure.

Step 1:

Download the template Nova HTML5 and extract the contents to a suitable folder.
Open Visual Studio and create a new asp.net Web Forms application.
Add an Admin Folder to the root of the solution.
Create an HTML folder within the Admin Folder. We will use this to store our html template for later use.
Copy the contents of the Nova Template folder you created earlier to the Admin/Html folder in your solution.
Copy the Images, Css, Js folders from Admin/Html to Admin.
In the Admin folder add new item "master page" and save it as admin.master
In the Admin folder add new item "web form with master page" select the admin master page and save as default

We have now set up the basis for our new administration system. The next stage is where we do a little copy and paste to convert the html into asp.net. You will be surprised how easy this is.

Step 2:

Open the html template's index page - by clicking on it in visual studio.
Copy everything between the <head> </head> tags a copy to the admin.master file. In the Admin.master file insert the html between the <head></head> tags.
Copy everything between the <body> </body> tags in the html index page and place in the default.aspc file in the admin folder inside the <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"></asp:Content> tags

Your admin.master file should now look like this:

XAML

Edit|Remove

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="admin.master.cs" Inherits="WebApplication1.Admin.admin" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dashboard I Admin Panel</title>

    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
    <!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/hideshow.js" type="text/javascript"></script>
    <script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.equalHeight.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $(".tablesorter").tablesorter();
        }
        );
        $(document).ready(function ()
        {

            //When page loads...
            $(".tab_content").hide(); //Hide all content
            $("ul.tabs li:first").addClass("active").show(); //Activate first tab
            $(".tab_content:first").show(); //Show first tab content

            //On Click Event
            $("ul.tabs li").click(function ()
            {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
            });

        });
    </script>
    <script type="text/javascript">
        $(function ()
        {
            $('.column').equalHeight();
        });
</script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="admin.master.cs" Inherits="WebApplication1.Admin.admin" %> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Dashboard I Admin Panel</title> 
 
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" /> 
    <!--[if lt IE 9]> 
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> 
    <script src="js/hideshow.js" type="text/javascript"></script> 
    <script src="js/jquery.tablesorter.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="js/jquery.equalHeight.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function () 
        { 
            $(".tablesorter").tablesorter(); 
        } 
        ); 
        $(document).ready(function () 
        { 
 
            //When page loads... 
            $(".tab_content").hide(); //Hide all content 
            $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
            $(".tab_content:first").show(); //Show first tab content 
 
            //On Click Event 
            $("ul.tabs li").click(function () 
            { 
 
                $("ul.tabs li").removeClass("active"); //Remove any "active" class 
                $(this).addClass("active"); //Add "active" class to selected tab 
                $(".tab_content").hide(); //Hide all tab content 
 
                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
                $(activeTab).fadeIn(); //Fade in the active ID content 
                return false; 
            }); 
 
        }); 
    </script> 
    <script type="text/javascript"> 
        $(function () 
        { 
            $('.column').equalHeight(); 
        }); 
</script> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
         
        </asp:ContentPlaceHolder> 
    </div> 
    </form> 
</body> 
</html>

Your Default.aspx file should now look like this:

XAML

Edit|Remove

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/admin.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1.Admin._default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <header id="header">
        <hgroup>
            <h1 class="site_title"><a href="index.html">Website Admin</a></h1>
            <h2 class="section_title">Dashboard</h2>
            <div class="btn_view_site"><a href="http://www.medialoot.com">View Site</a></div>
        </hgroup>
    </header>
    <!-- end of header bar -->

    <section id="secondary_bar">
        <div class="user">
            <p>John Doe (<a href="#">3 Messages</a>)</p>
            <!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
        </div>
        <div class="breadcrumbs_container">
            <article class="breadcrumbs"><a href="index.html">Website Admin</a>
                <div class="breadcrumb_divider"></div>
                <a class="current">Dashboard</a></article>
        </div>
    </section>
    <!-- end of secondary bar -->

    <aside id="sidebar" class="column">
        <form class="quick_search">
        <input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
        </form>
        <hr />
        <h3>Content</h3>
        <ul class="toggle">
            <li class="icn_new_article"><a href="#">New Article</a></li>
            <li class="icn_edit_article"><a href="#">Edit Articles</a></li>
            <li class="icn_categories"><a href="#">Categories</a></li>
            <li class="icn_tags"><a href="#">Tags</a></li>
        </ul>
        <h3>Users</h3>
        <ul class="toggle">
            <li class="icn_add_user"><a href="#">Add New User</a></li>
            <li class="icn_view_users"><a href="#">View Users</a></li>
            <li class="icn_profile"><a href="#">Your Profile</a></li>
        </ul>
        <h3>Media</h3>
        <ul class="toggle">
            <li class="icn_folder"><a href="#">File Manager</a></li>
            <li class="icn_photo"><a href="#">Gallery</a></li>
            <li class="icn_audio"><a href="#">Audio</a></li>
            <li class="icn_video"><a href="#">Video</a></li>
        </ul>
        <h3>Admin</h3>
        <ul class="toggle">
            <li class="icn_settings"><a href="#">Options</a></li>
            <li class="icn_security"><a href="#">Security</a></li>
            <li class="icn_jump_back"><a href="#">Logout</a></li>
        </ul>

        <footer>
            <hr />
            <p><strong>Copyright &copy; 2011 Website Admin</strong></p>
            <p>Theme by <a href="http://www.medialoot.com">MediaLoot</a></p>
        </footer>
    </aside>
    <!-- end of sidebar -->

    <section id="main" class="column">

        <h4 class="alert_info">Welcome to the free MediaLoot admin panel template, this could be an informative message.</h4>

        <article class="module width_full">
            <header>
                <h3>Stats</h3>
            </header>
            <div class="module_content">
                <article class="stats_graph">
                    <img src="http://chart.apis.google.com/chart?chxr=0,0,3000&chxt=y&chs=520x140&cht=lc&chco=76A4FB,80C65A&chd=s:Tdjpsvyvttmiihgmnrst,OTbdcfhhggcTUTTUadfk&chls=2|2&chma=40,20,20,30" width="520" height="140" alt="" />
                </article>

                <article class="stats_overview">
                    <div class="overview_today">
                        <p class="overview_day">Today</p>
                        <p class="overview_count">1,876</p>
                        <p class="overview_type">Hits</p>
                        <p class="overview_count">2,103</p>
                        <p class="overview_type">Views</p>
                    </div>
                    <div class="overview_previous">
                        <p class="overview_day">Yesterday</p>
                        <p class="overview_count">1,646</p>
                        <p class="overview_type">Hits</p>
                        <p class="overview_count">2,054</p>
                        <p class="overview_type">Views</p>
                    </div>
                </article>
                <div class="clear"></div>
            </div>
        </article>
        <!-- end of stats article -->

        <article class="module width_3_quarter">
            <header>
                <h3 class="tabs_involved">Content Manager</h3>
                <ul class="tabs">
                    <li><a href="#tab1">Posts</a></li>
                    <li><a href="#tab2">Comments</a></li>
                </ul>
            </header>

            <div class="tab_container">
                <div id="tab1" class="tab_content">
                    <table class="tablesorter" cellspacing="0">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Entry Name</th>
                                <th>Category</th>
                                <th>Created On</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Lorem Ipsum Dolor Sit Amet</td>
                                <td>Articles</td>
                                <td>5th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Ipsum Lorem Dolor Sit Amet</td>
                                <td>Freebies</td>
                                <td>6th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Sit Amet Dolor Ipsum</td>
                                <td>Tutorials</td>
                                <td>10th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Dolor Lorem Amet</td>
                                <td>Articles</td>
                                <td>16th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Dolor Lorem Amet</td>
                                <td>Articles</td>
                                <td>16th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- end of #tab1 -->

                <div id="tab2" class="tab_content">
                    <table class="tablesorter" cellspacing="0">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Comment</th>
                                <th>Posted by</th>
                                <th>Posted On</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Lorem Ipsum Dolor Sit Amet</td>
                                <td>Mark Corrigan</td>
                                <td>5th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Ipsum Lorem Dolor Sit Amet</td>
                                <td>Jeremy Usbourne</td>
                                <td>6th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Sit Amet Dolor Ipsum</td>
                                <td>Super Hans</td>
                                <td>10th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Dolor Lorem Amet</td>
                                <td>Alan Johnson</td>
                                <td>16th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"></td>
                                <td>Dolor Lorem Amet</td>
                                <td>Dobby</td>
                                <td>16th April 2011</td>
                                <td>
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <!-- end of #tab2 -->

            </div>
            <!-- end of .tab_container -->

        </article>
        <!-- end of content manager article -->

        <article class="module width_quarter">
            <header>
                <h3>Messages</h3>
            </header>
            <div class="message_list">
                <div class="module_content">
                    <div class="message">
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
                        <p><strong>John Doe</strong></p>
                    </div>
                    <div class="message">
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
                        <p><strong>John Doe</strong></p>
                    </div>
                    <div class="message">
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
                        <p><strong>John Doe</strong></p>
                    </div>
                    <div class="message">
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
                        <p><strong>John Doe</strong></p>
                    </div>
                    <div class="message">
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p>
                        <p><strong>John Doe</strong></p>
                    </div>
                </div>
            </div>
            <footer>
                <form class="post_message">
                <input type="text" value="Message" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
                <input type="submit" class="btn_post_message" value="" />
                </form>
            </footer>
        </article>
        <!-- end of messages article -->

        <div class="clear"></div>

        <article class="module width_full">
            <header>
                <h3>Post New Article</h3>
            </header>
            <div class="module_content">
                <fieldset>
                    <label>Post Title</label>
                    <input type="text">
                </fieldset>
                <fieldset>
                    <label>Content</label>
                    <textarea rows="12"></textarea>
                </fieldset>
                <fieldset style="width: 48%; float: left; margin-right: 3%;">
                    <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>Category</label>
                    <select style="width: 92%;">
                        <option>Articles</option>
                        <option>Tutorials</option>
                        <option>Freebies</option>
                    </select>
                </fieldset>
                <fieldset style="width: 48%; float: left;">
                    <!-- to make two field float next to one another, adjust values accordingly -->
                    <label>Tags</label>
                    <input type="text" style="width: 92%;">
                </fieldset>
                <div class="clear"></div>
            </div>
            <footer>
                <div class="submit_link">
                    <select>
                        <option>Draft</option>
                        <option>Published</option>
                    </select>
                    <input type="submit" value="Publish" class="alt_btn">
                    <input type="submit" value="Reset">
                </div>
            </footer>
        </article>
        <!-- end of post new article -->

        <h4 class="alert_warning">A Warning Alert</h4>

        <h4 class="alert_error">An Error Message</h4>

        <h4 class="alert_success">A Success Message</h4>

        <article class="module width_full">
            <header>
                <h3>Basic Styles</h3>
            </header>
            <div class="module_content">
                <h1>Header 1</h1>
                <h2>Header 2</h2>
                <h3>Header 3</h3>
                <h4>Header 4</h4>
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

                <p>Donec id elit non mi porta <a href="#">link text</a> gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

                <ul>
                    <li>Donec ullamcorper nulla non metus auctor fringilla. </li>
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>Donec ullamcorper nulla non metus auctor fringilla. </li>
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                </ul>
            </div>
        </article>
        <!-- end of styles article -->
        <div class="spacer"></div>
    </section>
</asp:Content>

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/admin.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1.Admin._default" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
    <header id="header"> 
        <hgroup> 
            <h1 class="site_title"><a href="index.html">Website Admin</a></h1> 
            <h2 class="section_title">Dashboard</h2> 
            <div class="btn_view_site"><a href="http://www.medialoot.com">View Site</a></div> 
        </hgroup> 
    </header> 
    <!-- end of header bar --> 
 
    <section id="secondary_bar"> 
        <div class="user"> 
            <p>John Doe (<a href="#">3 Messages</a>)</p> 
            <!-- <a class="logout_user" href="#" title="Logout">Logout</a> --> 
        </div> 
        <div class="breadcrumbs_container"> 
            <article class="breadcrumbs"><a href="index.html">Website Admin</a> 
                <div class="breadcrumb_divider"></div> 
                <a class="current">Dashboard</a></article> 
        </div> 
    </section> 
    <!-- end of secondary bar --> 
 
    <aside id="sidebar" class="column"> 
        <form class="quick_search"> 
        <input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"> 
        </form> 
        <hr /> 
        <h3>Content</h3> 
        <ul class="toggle"> 
            <li class="icn_new_article"><a href="#">New Article</a></li> 
            <li class="icn_edit_article"><a href="#">Edit Articles</a></li> 
            <li class="icn_categories"><a href="#">Categories</a></li> 
            <li class="icn_tags"><a href="#">Tags</a></li> 
        </ul> 
        <h3>Users</h3> 
        <ul class="toggle"> 
            <li class="icn_add_user"><a href="#">Add New User</a></li> 
            <li class="icn_view_users"><a href="#">View Users</a></li> 
            <li class="icn_profile"><a href="#">Your Profile</a></li> 
        </ul> 
        <h3>Media</h3> 
        <ul class="toggle"> 
            <li class="icn_folder"><a href="#">File Manager</a></li> 
            <li class="icn_photo"><a href="#">Gallery</a></li> 
            <li class="icn_audio"><a href="#">Audio</a></li> 
            <li class="icn_video"><a href="#">Video</a></li> 
        </ul> 
        <h3>Admin</h3> 
        <ul class="toggle"> 
            <li class="icn_settings"><a href="#">Options</a></li> 
            <li class="icn_security"><a href="#">Security</a></li> 
            <li class="icn_jump_back"><a href="#">Logout</a></li> 
        </ul> 
 
        <footer> 
            <hr /> 
            <p><strong>Copyright &copy; 2011 Website Admin</strong></p> 
            <p>Theme by <a href="http://www.medialoot.com">MediaLoot</a></p> 
        </footer> 
    </aside> 
    <!-- end of sidebar --> 
 
    <section id="main" class="column"> 
 
        <h4 class="alert_info">Welcome to the free MediaLoot admin panel template, this could be an informative message.</h4> 
 
        <article class="module width_full"> 
            <header> 
                <h3>Stats</h3> 
            </header> 
            <div class="module_content"> 
                <article class="stats_graph"> 
                    <img src="http://chart.apis.google.com/chart?chxr=0,0,3000&chxt=y&chs=520x140&cht=lc&chco=76A4FB,80C65A&chd=s:Tdjpsvyvttmiihgmnrst,OTbdcfhhggcTUTTUadfk&chls=2|2&chma=40,20,20,30" width="520" height="140" alt="" /> 
                </article> 
 
                <article class="stats_overview"> 
                    <div class="overview_today"> 
                        <p class="overview_day">Today</p> 
                        <p class="overview_count">1,876</p> 
                        <p class="overview_type">Hits</p> 
                        <p class="overview_count">2,103</p> 
                        <p class="overview_type">Views</p> 
                    </div> 
                    <div class="overview_previous"> 
                        <p class="overview_day">Yesterday</p> 
                        <p class="overview_count">1,646</p> 
                        <p class="overview_type">Hits</p> 
                        <p class="overview_count">2,054</p> 
                        <p class="overview_type">Views</p> 
                    </div> 
                </article> 
                <div class="clear"></div> 
            </div> 
        </article> 
        <!-- end of stats article --> 
 
        <article class="module width_3_quarter"> 
            <header> 
                <h3 class="tabs_involved">Content Manager</h3> 
                <ul class="tabs"> 
                    <li><a href="#tab1">Posts</a></li> 
                    <li><a href="#tab2">Comments</a></li> 
                </ul> 
            </header> 
 
            <div class="tab_container"> 
                <div id="tab1" class="tab_content"> 
                    <table class="tablesorter" cellspacing="0"> 
                        <thead> 
                            <tr> 
                                <th></th> 
                                <th>Entry Name</th> 
                                <th>Category</th> 
                                <th>Created On</th> 
                                <th>Actions</th> 
                            </tr> 
                        </thead> 
                        <tbody> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Lorem Ipsum Dolor Sit Amet</td> 
                                <td>Articles</td> 
                                <td>5th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Ipsum Lorem Dolor Sit Amet</td> 
                                <td>Freebies</td> 
                                <td>6th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Sit Amet Dolor Ipsum</td> 
                                <td>Tutorials</td> 
                                <td>10th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Dolor Lorem Amet</td> 
                                <td>Articles</td> 
                                <td>16th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Dolor Lorem Amet</td> 
                                <td>Articles</td> 
                                <td>16th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                        </tbody> 
                    </table> 
                </div> 
                <!-- end of #tab1 --> 
 
                <div id="tab2" class="tab_content"> 
                    <table class="tablesorter" cellspacing="0"> 
                        <thead> 
                            <tr> 
                                <th></th> 
                                <th>Comment</th> 
                                <th>Posted by</th> 
                                <th>Posted On</th> 
                                <th>Actions</th> 
                            </tr> 
                        </thead> 
                        <tbody> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Lorem Ipsum Dolor Sit Amet</td> 
                                <td>Mark Corrigan</td> 
                                <td>5th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Ipsum Lorem Dolor Sit Amet</td> 
                                <td>Jeremy Usbourne</td> 
                                <td>6th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Sit Amet Dolor Ipsum</td> 
                                <td>Super Hans</td> 
                                <td>10th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Dolor Lorem Amet</td> 
                                <td>Alan Johnson</td> 
                                <td>16th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                            <tr> 
                                <td> 
                                    <input type="checkbox"></td> 
                                <td>Dolor Lorem Amet</td> 
                                <td>Dobby</td> 
                                <td>16th April 2011</td> 
                                <td> 
                                    <input type="image" src="images/icn_edit.png" title="Edit"><input type="image" src="images/icn_trash.png" title="Trash"></td> 
                            </tr> 
                        </tbody> 
                    </table> 
 
                </div> 
                <!-- end of #tab2 --> 
 
            </div> 
            <!-- end of .tab_container --> 
 
        </article> 
        <!-- end of content manager article --> 
 
        <article class="module width_quarter"> 
            <header> 
                <h3>Messages</h3> 
            </header> 
            <div class="message_list"> 
                <div class="module_content"> 
                    <div class="message"> 
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p> 
                        <p><strong>John Doe</strong></p> 
                    </div> 
                    <div class="message"> 
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p> 
                        <p><strong>John Doe</strong></p> 
                    </div> 
                    <div class="message"> 
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p> 
                        <p><strong>John Doe</strong></p> 
                    </div> 
                    <div class="message"> 
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p> 
                        <p><strong>John Doe</strong></p> 
                    </div> 
                    <div class="message"> 
                        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor.</p> 
                        <p><strong>John Doe</strong></p> 
                    </div> 
                </div> 
            </div> 
            <footer> 
                <form class="post_message"> 
                <input type="text" value="Message" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"> 
                <input type="submit" class="btn_post_message" value="" /> 
                </form> 
            </footer> 
        </article> 
        <!-- end of messages article --> 
 
        <div class="clear"></div> 
 
        <article class="module width_full"> 
            <header> 
                <h3>Post New Article</h3> 
            </header> 
            <div class="module_content"> 
                <fieldset> 
                    <label>Post Title</label> 
                    <input type="text"> 
                </fieldset> 
                <fieldset> 
                    <label>Content</label> 
                    <textarea rows="12"></textarea> 
                </fieldset> 
                <fieldset style="width: 48%; float: left; margin-right: 3%;"> 
                    <!-- to make two field float next to one another, adjust values accordingly --> 
                    <label>Category</label> 
                    <select style="width: 92%;"> 
                        <option>Articles</option> 
                        <option>Tutorials</option> 
                        <option>Freebies</option> 
                    </select> 
                </fieldset> 
                <fieldset style="width: 48%; float: left;"> 
                    <!-- to make two field float next to one another, adjust values accordingly --> 
                    <label>Tags</label> 
                    <input type="text" style="width: 92%;"> 
                </fieldset> 
                <div class="clear"></div> 
            </div> 
            <footer> 
                <div class="submit_link"> 
                    <select> 
                        <option>Draft</option> 
                        <option>Published</option> 
                    </select> 
                    <input type="submit" value="Publish" class="alt_btn"> 
                    <input type="submit" value="Reset"> 
                </div> 
            </footer> 
        </article> 
        <!-- end of post new article --> 
 
        <h4 class="alert_warning">A Warning Alert</h4> 
 
        <h4 class="alert_error">An Error Message</h4> 
 
        <h4 class="alert_success">A Success Message</h4> 
 
        <article class="module width_full"> 
            <header> 
                <h3>Basic Styles</h3> 
            </header> 
            <div class="module_content"> 
                <h1>Header 1</h1> 
                <h2>Header 2</h2> 
                <h3>Header 3</h3> 
                <h4>Header 4</h4> 
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 
 
                <p>Donec id elit non mi porta <a href="#">link text</a> gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
 
                <ul> 
                    <li>Donec ullamcorper nulla non metus auctor fringilla. </li> 
                    <li>Cras mattis consectetur purus sit amet fermentum.</li> 
                    <li>Donec ullamcorper nulla non metus auctor fringilla. </li> 
                    <li>Cras mattis consectetur purus sit amet fermentum.</li> 
                </ul> 
            </div> 
        </article> 
        <!-- end of styles article --> 
        <div class="spacer"></div> 
    </section> 
</asp:Content>

If you run the program now - and navigate to the admin folder you will see the template sitting there in all its glory ready for customisation. Before we go on to the basic customisation we will wire the template up to the front end to make things a little more convienient for us.

In the Site.master template which you will find in the root of your solution explorer. Search for the Anonymous template for logging in and add the following link: <li><a id="DashboardLink" runat="server" href="~/Admin/default.aspx">Log in</a></li>.

Your login section should now look like this:

XAML

Edit|Remove

 <section id="login">
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul>
                                <li><a id="registerLink" runat="server" href="~/Account/Register.aspx">Register</a></li>
                                <li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
                                <li><a id="DashboardLink" runat="server" href="~/Admin/default.aspx">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <p>
                                Hello, <a runat="server" class="username" href="~/Account/ChangePassword.aspx" title="Change password">
                                    <asp:LoginName runat="server" CssClass="username" />
                                </a>!
                                <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
                            </p>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </section>

<sectionid="login"> 
<asp:LoginView runat="server"ViewStateMode="Disabled"> 
<AnonymousTemplate> 
<ul> 
<li><aid="registerLink"runat="server"href="~/Account/Register.aspx">Register</a></li><li><aid="loginLink"runat="server"href="~/Account/Login.aspx">Log in</a></li><li><aid="DashboardLink"runat="server"href="~/Admin/default.aspx">Log in</a></li></ul></AnonymousTemplate><LoggedInTemplate> 
<p> 
                                Hello, <arunat="server"class="username"href="~/Account/ChangePassword.aspx"title="Change password"> 
<asp:LoginName runat="server"CssClass="username"/></a>! 
                                <asp:LoginStatus runat="server"LogoutAction="Redirect"LogoutText="Log off"LogoutPageUrl="~/"/></p></LoggedInTemplate></asp:LoginView></section>

Clearly we will change this before we make this a production release but for now it is suitable to speed up our testing and development work. This link will take us straight to the admin template so that we can see how our changes are working.

More Information

I will add additional tutorials on this subject adding more advanced features to the original template until we end up with a full CMS written with your needs in mind. When part two is ready I will edit this page to include a link to it. Future Tutorials will contain:

Introduction
Customization I: The basics
Customization 2: Advanced
Adding User Administration
Adding Database Administration
Adding Content Administration
- Frontend Template customization
Adding Site Administration
... and anything you think you need here

However, I will not add these tutorials if no one is interested in this, so if you are interested then rate this article please.