Introduction
The web site template we are going to implement consists of a html page (index.html), a stylesheet (style.css) and a bunch of images. The easiest thing to start with is to take the html and place it into a master page. By doing that, we can browse our site and make sure everything looks ok. Implementing the xhtml design into lemoon consists of 4 simple steps:
- Place the html in a master page
- Create a template that uses the master page
- Set the template as the default template for Content Type page
- Reference the stylesheet and images in our master page
1. Place the html in a master page
Create a new master page in the \lemoon\master folder. Name the master page site.master (you can of course name your master page and templates any name you like). Make sure the master page inherits from the Mindroute.Lemoon.Web.UI.Admin.MasterPageBase class. Add a ContentPlaceHolder with the id content. Paste the html code from the index.html page inside the form-tag.
NOTE! There's a form-tag surrounding the search text box in the xhtml design. Make sure to remove the form-tag, otherwise the design will not display correctly.
<%@ master language="C#" autoeventwireup="true" inherits="MyProject.Master.Site" enableviewstate="false" Codebehind="site.master.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="<%= Content.Teaser ?? Site.Teaser %>" />
<title><% = Content.Title %></title>
</head>
<body>
<form runat="server">
<asp:ContentPlaceHolder ID="content" runat="server"></asp:ContentPlaceHolder>
<!-- PLACE THE HTML FROM THE INDEX.HTML HERE! -->
</form>
</body>
</html>
code 1. site.master
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Model = Mindroute.Core.Model;
using Mindroute.Lemoon.Web.UI.Admin;
using Mindroute.Lemoon.Helpers;
namespace MyProject.Master
{
public partial class Site : MasterPageBase
{
}
}
code 2. site.master.cs
2. Create a template that uses the master page
Next step is to create a template (.aspx) that uses the master page site.master. Create a new Web Form (.aspx) in the \lemoon\templates folder. Name the template page.aspx (you can of course name your master page and templates any name you like). Make sure te template inherits from the generic Mindroute.Lemoon.Web.UI.PageBase<T> where T is Mindroute.Core.Model.Content. Also make sure the template uses the site.master master page.
NOTE! lemoon 4 installs a template called Page.aspx which is connected to the Content typePage. You can use this template and modify it if you want. Since the Home page for an installed lemoon 4 site is of content type Page, you don't have to worry about connecting your own template to the content type. Read more about Content Types and Templates here.
<%@ page language="C#" autoeventwireup="true" inherits="MyProject.Template.Page" masterpagefile="~/lemoon/master/site.master" Codebehind="page.aspx.cs" %>
<asp:content contentplaceholderid="content" runat="server">
</asp:content>
code 3. page.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Mindroute.Lemoon.Web.UI;
namespace MyProject.Template
{
public partial class Page : PageBase<Mindroute.Core.Model.Content>
{
}
}
code 4. page.aspx.cs
3. Set the template as the default template for Content Type Page
Next step is to set the template page.aspx as the default template for the content Type Page. This is done in the editorial interface of lemoon. Logon to the lemoon editorial interface, http://[yourwebsite]/admin and go to Manage -> Content types and edit the Page content type. Set the Default Template to page.
The reason we are doing this is because the Home (or root page) for the web site (in this case) is of Content Type Page. Page is a content type which comes by default in lemoon 4. When we browse the site, the root page is the first page to show up (if we don't supply a slug to another page) and the template connected to the page is used, in this case page.aspx.
image 1. Set the template for content type Pageimage 1. Set the template for content type Pageimage 1. Set the template for content type Pageimage 1. Set the template for content type Pageimage 1. Set the template for content type Page
4. Reference the stylesheet and images
Next step is to add the stylesheet and images to you project. Simply copy the .css and images folder to you Visual Studio project folder. Stylessheets and images can be places anywhere you like. In this tutorial, we'll place the assets in the \css and \images folders. Make sure to include the folder and files in your project once they are copied to the project folder.
image 2. Include the css and images folders
Add the stylesheet to the master page and update all paths to images both in the template and the stylesheet.
<%@ master language="C#" autoeventwireup="true" inherits="MyProject.Master.Site" enableviewstate="false" Codebehind="site.master.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="<%= Content.Teaser ?? Site.Teaser %>" />
<title><% = Content.Title %></title>
<!-- Link to stylesheet style.css -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
</head>
<body>
<form runat="server">
<!-- PLACE THE HTML FROM THE INDEX.HTML HERE! -->
</form>
</body>
</html>
code 5. Add the stylesheet to the site.master
The xhtml design is now in place and we can browse out lemoon site. The next step is to create relavant content types and templates, replace all dynamic content with lemoon 4 content and so on.
Compile your web site and browse it!
