Theme Selector idea for a Blog Engine written with ASP.NET MVC

Question

I have started to build a blog engine which is totally unprofesional and meant to be not used by anyone. So, in plain English I cannot tell that you go ahead and run this for yourself and you will be happy.

You may see the complete code I have written so far :

https://github.com/tugberkugurlu/MvcBloggy

While now I am working on DAL, I also try to lay down what I need to do. One point I am stuck here is how I can handle theme selection for the blog engine.

• How should I start building the basics? Should I create a skeleton html and let others write the CSS and basically select that? Or something else?
• In terms of ASP.NET MVC structure, what would be the best approach to handle this feature.

I am not sure any of you guys has ever done something like this so far. I would appreciate if you can provide a way.

Answer 1

I suggest you to look at NBlog temable blog engine

https://github.com/ChrisFulstow/NBlog

In particular, look at the class ThemeableRazorViewEngine.cs

https://github.com/ChrisFulstow/NBlog/blob/master/NBlog.Web/Application/Infrastructure/ThemeableRazorViewEngine.cs

using System.Web.Mvc;
using NBlog.Web.Application.Service;

namespace NBlog.Web.Application.Infrastructure
{
public class ThemeableRazorViewEngine : RazorViewEngine
{
    private readonly IThemeService _themeService;

    public ThemeableRazorViewEngine(IThemeService themeService)
    {
        _themeService = themeService;

        base.ViewLocationFormats = new[]
        {
            _themeService.Current.BasePath + "/Views/{1}/{0}.cshtml",
            _themeService.Current.BasePath + "/Views/Shared/{0}.cshtml",
            "~/Themes/Default/Views/{1}/{0}.cshtml"                
        };

        base.PartialViewLocationFormats = new string[] {
            _themeService.Current.BasePath + "/Views/{1}/{0}.cshtml",
            _themeService.Current.BasePath + "/Views/Shared/{0}.cshtml",
            "~/Themes/Default/Views/Shared/{0}.cshtml"
        };
    }

    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {           
        // bypass the view cache, the view will change depending on the current theme
        const bool useViewCache = false;

        return base.FindView(controllerContext, viewName, masterName, useViewCache);
    }
}
}

Answer 2

Fully theming web application is a very complex problem. You should not even attempt solving it, before you have a functional blog engine.

A simple and reasonably easy to achieve customization, is allowing the user to pick the .css file, and making sure all elements within the page are easily addressable/selectable with the appropriate IDs/classes.