BE Theme Tip: Make the front page look different

-   Jul 25, 2009 -   BlogEngine.NET, Development -   ,

I spent some time over the past few days working on a new theme for this blog.  It had been a while since I had made a BlogEngine theme, but the process is still the same as it was 2 years ago.  It is a fairly easy process and it really allows for a lot of customization with just the smallest amount of code.

NewTheme I thought I would share a few of the techniques I used in making this theme over a few blog posts.  Hopefully, they will come in handy for someone making their own theme and maybe inspire some more interesting themes in the BlogEngine realm.

One of the most interesting parts of the new theme is the different look on the front page of my blog.  The front page on a BlogEngine blog is usually a list of posts (although this can be overridden to be a particular page in the admin section).  The list of posts or post list is simply a display of a set number of posts one after another.  Each post is displayed using the PostView.ascx of the specific theme. The number of posts depend on the settings you have chosen in your admin section.  There is also a setting that determines if the post is displayed in full in the post list or if just the description (or first so many characters) are displayed.

Armed with this basic information, we know that all we need to do is put a little custom code in the PostView.ascx to change the look of the page based on what type of page it is.  In my case I really only care if I’m displaying the post list or not, but you could easily write your code to check for a specific page, a particular categories or whatever.

The first thing I did was to make an enum called PageStyle with 3 values (Page, Front, and Featured).  Page is for general formatting.  Featured is the top item on my front page and Front is the other items on my front page. I then added a ViewStyle variable to my theme’s PostView class in PostView.ascx.cs and the code in in the page load to set ViewStyle based on what page is being displayed.  A trimmed down snippet of this code is below.

   1: protected PageStyle ViewStyle;
   2:  
   3: protected void Page_Load(object sender, EventArgs e)
   4: {
   5:string path = Request.RawUrl.ToLower();
   6:if (path.LastIndexOf('/') > -1)
   7:         path = path.Substring(path.LastIndexOf('/') + 1);
   8:if (path.StartsWith("default.aspx") || path.StartsWith("blog.aspx") || path == "")
   9:     {
  10:         ViewStyle = PageStyle.Front;
  11:  
  12:// Latest Post?
  13:         BlogEngine.Core.Post temp = Post.Next;
  14:if (temp == null)
  15:             ViewStyle = PageStyle.Featured;
  16:     }
  17:else
  18:     {
  19:         ViewStyle = PageStyle.Page;
  20:     }
  21:  
  22:base.Page_Load(sender, e);
  23: }

Now that I have ViewStyle set, I can use this in my PostView.ascx page to dramatically change the look of the html that will result for the different type of pages being called.  I’ve put a few samples in the snippet below.

   1: <% if (ViewStyle == PageStyle.Page) { %>
   2: <div class="post-page">
   3:   ...
   4: </div>
   5: <% } %>
   6:  
   7: <div class="<%=ViewStyle == PageStyle.Page ? "post-title" : "junk" %>">
   8: ...
   9: </div>

Personally, I like changing the classes of my divs and span tags where possible and use CSS to make the changes. Sometimes however, I’ve needed to actually use an if block to make the display look as I’d like.

A quick note for those trying this with an existing theme.  Most themes I’ve seen do not have a code behind file for the PostView.ascx.  You can make one, but make sure you reference it in the PostView.ascx file and that your cs file inherits from BlogEngine.Core.Web.Controls.PostViewBase.  If you forget this, you won’t get anything to work.

Hopefully, this is helpful to someone.  If you have questions or I need to be more clear, let me know in the comments.

8 Comments

Commented on 7/27/2009 11:58:35 PM
Great looking theme Al.  The front page looks good, and I like the category images -- very inspiring.

I am getting a "jQuery is not defined" JS error on a number of pages.  I'm sure you're still working out the kinks.

I'm going to crawl your site some more ... probably find some more novel widgets or features I never knew existed!
Commented on 7/28/2009 2:17:35 AM
Thanks Ben.

I think I have the Jquery errors ironed out now.  Hopefully, I'll find all the bugs in the next day or two.
Rafael E. Belliard
Commented on 7/28/2009 9:44:19 PM
Awesome. These type of tricks only make the best developer friendly engine out there even better.
Commented on 7/29/2009 1:44:10 AM
Great theme, I have been working with BE alot over the last 6 months, I have to say it's really awesome. So easy to set up and modify. Nowadays when I start a new website, I generally start from a fresh BE theme and build the site around it, because there is very little you can't do with a little effort.

Keep it up, and thanks for the new tip, I like this concept and your grid style front page looks great.
Commented on 8/6/2009 5:17:03 PM
Great Trick and you Theme looks great. Thanks
Commented on 8/7/2009 3:13:19 AM
Nice article, Al. This is exactly what I will do with in next redesign of my blog. In  fact I'm thinking of excluding sidebar on homepage, but we'll se about that Smile
Commented on 8/9/2009 4:08:37 PM
Your solution is a good non-intrusive alternative ... for my blog I modified the User controls/PostList.ascx itself in order to modify the Post List view ... I think that I will make an update and implement your method ... as I said is less intrusive to Blog Engine architecture and leaves the entire responsibility to the theme. Thanks!
Commented on 8/11/2009 3:46:14 AM
Thanks for this info. But that i have to check
Comments are closed