I have enjoyed BlogEngine.NET a bunch, so I will be posting some small helps and hints on how to skin BE.
Today I will go over the date box I have on the right hand side of the title. The first thing is to open your PostView.ascx file in the themes directory under the theme you are using for your new skin.
My markup is as follows, with the markup used for the Date Box in red.
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>
<div class="post xfolkentry" id="post<%=Index %>">
<span class="pubDate">
<span class="month"><%=Post.DateCreated.ToString("MMM") %></span>
<span class="day"><%=Post.DateCreated.ToString("dd") %></span>
<span class="year"><%=Post.DateCreated.ToString("yyyy") %></span>
</span>
<h1><a href="<%=Post.RelativeLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a></h1>
<span class="author">by <a href="<%=VirtualPathUtility.ToAbsolute("~/") + "author/" + Server.UrlEncode(Post.Author) %>.aspx"><%=Post.AuthorProfile != null ? Post.AuthorProfile.DisplayName : Post.Author %></a></span>
<div class="text"><asp:PlaceHolder ID="BodyContent" runat="server" /></div>
<div class="bottom">
<%=Rating %>
<p class="tags">Tags: <%=TagLinks(", ") %></p>
<p class="categories"><%=CategoryLinks(" | ") %></p>
</div>
<div class="footer">
<div class="bookmarks">
<a rel="nofollow" title="Index <%=Index %>" target="_blank" href="http://www.dotnetkicks.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&title=<%=Server.UrlEncode(Post.Title) %>">Submit to DotNetKicks</a> |
<a rel="nofollow" href="mailto:?subject=<%=Server.UrlEncode(Post.Title) %>&body=Thought you might like this: <%=Post.AbsoluteLink.ToString() %>">E-mail</a>
</div>
<%=AdminLinks %>
<a rel="bookmark" href="<%=Post.PermaLink %>" title="<%=Server.HtmlEncode(Post.Title) %>">Permalink</a> |
<a rel="nofollow" href="<%=Post.RelativeLink %>#comment"><%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</a>
</div>
</div>
As you notice I have the Post.DateCreated seperated into three different classes. One for each line of the date box. MMM displays the three letter abbreviation for the month. dd displays the two digit number day, and yyyy displays the 4 digit year.
Next you will create the CSS that will make the box and float it to the right of the title.
.post .pubDate
{
background:#BCAFA3 none repeat scroll 0 0;
border:1px solid #ccc;
color:#FFFFFF;
display:block;
float:right;
line-height:1;
margin:0 0 10px 10px;
padding:5px;
text-align:center;
width:40px;
}
.post .pubDate .month,
.post .pubDate .year
{
display:block;
}
.post .pubDate .day
{
display:block;
font-size:20px;
}
.post .pubDate .year
{
display:block;
}
As a side note, I have text throughout the blog set at 12px.
body
{
font-size: 12px;
{
This will make the top and bottom line 12px, and the .post .pubDate .day attribute you see in the CSS code above will set the two digit day to 20px.
You should also set the .post h1 (or what ever header you are using for your blog titles) to be a specific length so that it doesn’t run into the date box. I have mine set as follows.
.post h1
{
border-color:#999999;
border-style:solid;
border-width:0 0 1px;
width:450px;
margin: 5px 0 5px;
padding: 0px 0px 2px;
}
.text
{
margin: 15px 0px 0px;
}
You will also notice that I give the blog content a top margin of 15px so that you don’t get text wrap around your date box. The text of your post will just run under the date box. The class used for the div with your post’s textual content is “Text”
Conclusion
That is about it. Have fun skinning your BlogEngine.NET. They have done a good job of making things easy as far as skinning goes, so make your blog look however you want. Let’s those creative juices flow!