Creating BlogEngine .NET Theme

October 30, 2007 17:27 by Young Park

Creating BlogEngine .NET Theme from existing CSS Template is not very difficult. I've created several .NET Theme which I'm currently in use at several different blogs. Check this out here:

My Korean Blog
Modern Worship

To create a theme from existing templates, watching this video tutorial might help you.

Click here to Watch

Here's brief instruction on how to create BlogEngine .NET Theme:

1. Open the folder of the existing template
2. Create a Master page named site.master
3. Copy PostView.ascx, CommentView.ascx, and noavatar.jpg file from existing Themes to current working folder. It should be now like this:

4. Copy and Paste this code above right below <%@ Master ... %>

<%@ Register Src="~/admin/menu.ascx" TagName="menu" TagPrefix="uc1" %>
<%@ Import Namespace="BlogEngine.Core" %>

5. Open a template file (For example, index.html) and paste the inner code of <body></body> tags
6. Insert a link reference to .CSS file in the header part
7. Now Copy and Paste the Following Code to appropriate space

Blog Header:

<%=BlogSettings.Instance.Name %>

Blog Description:

<%=BlogSettings.Instance.Description %>

Home Link:

<asp:HyperLink ID="HlHome" NavigateUrl="~/default.aspx" runat="server">Home</asp:HyperLink>

Archive Link:

<a href="~/archive.aspx">Archive</a>
Contact Link: <asp:HyperLink ID="hlContact" NavigateUrl="~/contact.aspx" runat="server">Contact</asp:HyperLink>

RSS Feed Link:

<a href="<%=Utils.FeedUrl %>">Feed</a>
Login Status Link: <asp:LoginStatus ID="LoginStatus1" runat="Server" LoginText="Sign in" LogoutText="Sign out" EnableViewState="false" />

Blog Content

<blog:SearchOnSearch ID="SearchOnSearch1" runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />

Recent Posts

<blog:RecentPosts ID="RecentPosts1" runat="Server" />

Recent Comments

<blog:RecentComments ID="RecentComments1" runat="Server" />

Categories

<blog:CategoryList ID="CategoryList1" runat="Server" />

Archives

<blog:MonthList ID="MonthList1" runat="server" />

Administration Menu (<h2> is for title. You can modify this part.)

<% if (Page.User.Identity.IsAuthenticated){ %>
                        <h2>Administration</h2>
                        <uc1:menu ID="Menu1" runat="server" />
                    <%} %>

Search Box

<blog:SearchBox ID="SearchBox1" runat="server" />

Calendar

<blog:PostCalendar runat="Server" NextMonthText=">>" DayNameFormat="FirstTwoLetters" FirstDayOfWeek="monday" PrevMonthText="<<" CssClass="calendar" BorderWidth="0" WeekendDayStyle-CssClass="weekend" OtherMonthDayStyle-CssClass="other" UseAccessibleHeader="true" EnableViewState="false" />

Tag Cloud