Introduction

This is the content type for the start page of the site. This is the root page on your site which is first displayed when you browse your site. Looking at the template for the startpage, there are many possible ways to create a content type. What you include in you content type StartPage depends on what you would like to make editable for an editor. I have made the decision to make the following content on the startpage editable.

1. The Image in the header
2. The Short Text under the top navigation menu
3. The Text on the start page with an Image

Other content on the start page like top navigation menu, news list, search text box, spots and so on will not be part of the StartPage content type. These things are separated functionality that will be implemented either in the template for the start page or as individual controls.

image 1. Startpage content type

StartPage class

Create a new class in you web application project. If you have created a Visual Studio Web Application project you can place the content type class files anywhere you like as long as they are included in the project, otherwise you must place the content type classes in the App_Code folder. In this tutorial, the content types are placed in the \lemoon\contenttype folder.

Next, identify what kind of content that should be included in the content type. In this content type, we have an Image, a line of text and a long text. The table below shows what the corresponding content type data type to use.

A complete example of the StartPage content type is shown below.

using System;
using System.ComponentModel.DataAnnotations;
using Mindroute.Core.Model;
using System.Collections.Generic;

namespace MyProject.ContentTypes
{

    /// <summary>
    /// Content type for the start page
    /// </summary>
    [Serializable]
    [Author("lemoon")]
    [Description("A content type for the start page.")]
    public class StartPage : StandardContent
    {

        /// <summary>
        /// Web site header image
        /// </summary>
        [Persisted]
        [Render(Weight = 1)]
        [DataType("File")]
        public ContentRef HeaderImage { get; set; }


        /// <summary>
        /// Short text
        /// </summary>
        [Persisted]
        [Render(Weight = 2)]     
        public string ShortText
        {
            get;
            set;
        }


        /// <summary>
        /// Text image
        /// </summary>
        [Persisted]
        [Render(Weight = 3)]
        [DataType("File")]
        public ContentRef TextImage { get; set; }


        /// <summary>
        /// Text
        /// </summary>
        [Persisted]
        [Render(Weight = 4)]
        [DataType(DataType.Html)]
        public string Text
        {
            get;
            set;
        }

    }
}

code 1. The StartPage class 

Create the template for the StartPage

In order to render the StartPage correctly, we need to create a template. The template is then connected as the default template for the content type StartPage. The template should use the site.master master page. Since the content type class is strongley typed, we can inherit the template from the generic Mindroute.Lemoon.Web.UI.PageBase<T> where T is the content type StartPage. If we do this, we have direct access to the properties in the StartPage class, for example, ShortText, Text and so on. Create a template called startpage.aspx in the \lemoon\template folder. Look at the template below.

<%@ page language="C#" autoeventwireup="true" inherits="MyProject.Template.StartPage" masterpagefile="~/lemoon/master/site.master" Codebehind="startpage.aspx.cs" %>

<asp:content contentplaceholderid="content" runat="server">
  
</asp:content>

code 2. The startpage.aspx template

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 StartPage : PageBase<Lemoon.ContentTypes.StartPage>
    {
    }
}

code 3. The startpage.aspx.cs code behind

Now it's time to lift out the startpage's specific content from the master page and place it in the asp:content in the startpage.aspx template. In the example below, we have moved all the start page specific content to the template which is the div content and div sidebar. Make sure to move the content place holder with the id content in the master page site.master to the place where the two div-tag were previously located.

<%@ page language="C#" autoeventwireup="true" inherits="MyProject.Template.StartPage" masterpagefile="~/lemoon/master/site.master" Codebehind="startpage.aspx.cs" %>

<asp:content contentplaceholderid="content" runat="server">
<div id="content">
    <div class="post">
        <h2 class="title"><a href="#">TerraFirma2 by NodeThirtyThree + FCT</a></h2>
        <p class="date">Posted on October 1, 2009</p>
        <div class="entry"> <img src="/images/img02.jpg" width="132" height="122" alt="" class="border alignleft" />
            <p>This is <strong>TerraFirma2</strong>, a free template by <a href="http://www.nodethirtythree.com/">nodethirtythree</a> and <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.  This template is released under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a> license so use it however you like, just keep the footer links back to our sites. The photos used in this design are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. Check out my other work at <a href="http://www.nodethirtythree.com/">my site</a> or follow me on <a href="http://twitter.com/nodethirtythree">Twitter</a>. Have fun.</p>
        </div>
        <div class="meta">
            <p class="tags">Tags: <a href="#">Internet</a>, <a href="#">Free Templates</a>, <a href="#">Web Design</a></p>
            <p class="links"><a href="#" class="comments">Comments (64)</a> <a href="#" class="more">More</a></p>
        </div>
    </div>
    <div class="post">
        <h2 class="title"><a href="#">Lorem ipsum dolor sit amet</a></h2>
        <p class="date">Posted on September 29, 2009</p>
        <div class="entry">
            <p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat, dui sed posuere molestie, urna sapien porta purus, vel sodales ante erat sed arcu. Nunc semper, diam ut blandit elementum, ipsum purus vestibulum quam, sit amet auctor est nunc ut risus. Maecenas vitae justo sit amet erat congue aliquet molestie commodo odio. Praesent tempor pellentesque nibh.</p>
        </div>
        <div class="meta">
            <p class="tags">Tags: <a href="#">Internet</a>, <a href="#">Free Templates</a>, <a href="#">Web Design</a></p>
            <p class="links"><a href="#" class="comments">Comments (32)</a> <a href="#" class="more">More</a></p>
        </div>
    </div>
</div>
<div id="sidebar">
    <ul>
        <li>
            <h2>About me</h2>
            <p><img src="/images/img03.jpg" width="210" height="72" alt="" class="border" /></p>
            <p><strong>Nunc semper diam</strong> ut blandit elementum, ipsum purus vestibulum quam, sit amet justo sit amet erat.</p>
        </li>
        <li>
            <h2>Nulla aliquam</h2>
            <ul>
                <li><a href="#">Faucibus non sit amet elit nulla</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet veroeros\</a></li>
                <li><a href="#">Consectetur adipiscing elit integer</a></li>
                <li><a href="#">Placerat dui sed posuere molestie</a></li>
                <li><a href="#">Urna sapien porta purus vel</a></li>
                <li><a href="#">Sodales ante erat sed arcu semper</a></li>
                <li><a href="#">Diam ut blandit elementum purus</a></li>
                <li><a href="#">Vestibulum quam sit amet auctor </a></li>
            </ul>
        </li>
    </ul>
</div>
</asp:content>

 code 4. The StartPage template

Let's continue with the fun stuff now, replacing the static content with content from lemoon 4 cms. As mentioned before, all content type classes are strongly typed and since we inhertied from the generic class PageBase<T> where T is our content type StartPage, we can easily output the title, texts and so on directly in the aspx page. Look at an extract from the html code where the content for the start page title, text, created date and commenting count is outputed.

<div class="post">
   <h2 class="title"><a href="#"><% = Content.Title %></a></h2>
   <p class="date">Posted on <% = Content.Created.ToString("MMMM dd, yyyy") %></p>
   <div class="entry"> <img src="<% = Content.TextImage.Value.Url() %>" width="132" height="122" alt="" class="border alignleft" />
      <% = Content.Text %>
   </div>
   <div class="meta">
      <p class="tags">Tags: <a href="#">Internet</a>, <a href="#">Free Templates</a>, <a href="#">Web Design</a></p>
      <p class="links"><a href="#" class="comments">Comments (<% = Content.Comments.Count %>)</a> <a href="<% = Content.Url(false) %>" class="more">More</a></p>
   </div>
</div>

 code 5. Using stongly typed properties in the template

Test the StartPage content type

Ok, let's test the content type on our site! Since this is the start page on our site, it includes a couple of extra steps.

1. Enable the StartPage content type
2. Set the default template for a Startpage to startpage.aspx
3. Create a new root page for our site using the StartPage content type
4. Set the new root page as the default root page on our site
5. Browse the site to test the new content type

1. Enable the StartPage

The content type is created and now we need to enable it before we can use it. Logon to the lemoon editorial interface and go to Manage -> Content types. Click on the StartPage content type. Check the Enabled checkbox to enable the content type. Once the content type is enabled you can use it on the Site.

NOTE! If the content type isn't visible in the content type list, makle sure you have compiled your project.

2. Set the template

While your're in the edit mode for the content type, set the startpage.aspx as the template to use for all pages of content type StartPage.

image 2. Set the template

3. Create a new root page

Go to Site and select the page representing the site. In this case "TerraFirma2 [en]". Select the menu Create -> StartPage. Enter the title "Welcome to TerraFirma2". Select a TextImage to use. If you havn't uploaded any files to the file archive, first go to Files and upload a image to use. Enter a Text and then Publish the page.

4. Set the new root page as the default page for the site

This extra step is needed because we are creating a new start page for the site. When you install lemoon 4 cms, a default start page is created for you which is the startpage for the site. We must now change this setting.

Go to Manage -> Sites -> List sites. Edit the TerraFirma2 site and change the Default root page to the one you created in step 3.

image 3. Setting the default root page on a site

5. Browse the site

Go to your site and check out our new startpage so far...

The Header image and the Short text

The only things left now is the site header image and the short text just below the top navigation menu. As you might have seen now, these design elements aren't really a part of the start page template, startpage.aspx, but rather of the master page site.master. But since we want these elements to be editable, we have to place them somewhere. They could of course also have been separate content published somewhere outside the site structure, but I think these types of things is easier to put on the start page content type.

We have to modify the site.master and site.master.cs code to display the image and the short text. In this example, a public variable of type Lemoon.ContentTypes.StartPage is declared and set to the root page of the site. Look at the examples below.

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
    {
        public Lemoon.ContentTypes.StartPage StartPage;

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            StartPage = ContentService.Get<MyProject.ContentTypes.StartPage>((int)Site.DefaultContentID);

        }
    }
}

code 6. Getting the start page of the site

The public variable is then used in the site.master html. Take a look...

<div id="header" class="container" style="">
        <div id="logo">
            <h1><a href="#">TerraFirma<sup>2</sup></a></h1>
            <p>By <a href="http://www.nodethirtythree.com/">nodethirtythree</a> + <a href="http://www.freecsstemplates.org/">FCT</a></p>
        </div>
        <div id="banner"><img src="<% = StartPage.HeaderImage.Value.Url() %>" width="667" height="118" alt="" /></div>
    </div>
    <div id="menu" class="container">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="top-bar" class="container">
        <div class="bar">
            <div class="text"><% = StartPage.ShortText %></div>
            <div id="search">
                
                    <fieldset>
                        <input type="text" name="query" value="" class="input-text" />
                        <input type="submit" value="Search" class="input-submit" />
                    </fieldset>
                
            </div>
        </div>
    </div>

 code 7. Site.master page