How To Create A Custom Style For Articulate Within Umbraco

Articulate is a free Umbraco package, using it will be quicker and easier than building something custom.  Out of the box, Articulate comes with a few themes, however, if like me you want the style of your blog to mirror that of the rest of your website, you will likely want to create a custom theme.  In this tutorial, you will learn how to do that.  

If you are new to Articulate, I suggest you read this tutorial first.  After you have it installed, we are ready to get cracking:

How To Create A Custom Theme With Articulate

Provided you have installed Articulate in your webroot you should see the following directory '\App_Plugins\Articulate\Themes\'.  This folder, as you can probably guess, contains all the Articulate themes.

To create a custom theme, create a folder.  The name of the folder will be your theme name, so you will want to make it meaningful.  Within here create another folder called 'Views'.  In here you need to create two views, 'list.cshtml' and 'Post.cshtml'.  List.cshtml view will be the file that will render out the listing page.  Post.cshtml will be used to render out the post page, as you can see below:

List.cshtml

The purpose of this guide is to get you up and running with a custom theme and not to teach you how to write a template from scratch. Instead, I'll quickly share with you the basic HTML to get you up and running.

  @using FortDunlop.Web.Core.Extensions
@using Articulate.Models;
@using Umbraco.Core.Models
@using Umbraco.Web;
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@{
    Layout = "~/Views/Master.cshtml";
    var articulateModel = (Articulate.Models.ListModel)Model;
}
<div class="row blog-listing">
    <div class="col-md-12">
        @if (articulateModel.Children.Any())
        {
            foreach (PostModel post in articulateModel.Children)
            {
                <article class="blog-listing-article row">
                    <section class="col-md-8 col-sm-12">
                        <h3>
                            @post.Name
                        </h3>
                        <p>
                            @post.Excerpt
                        </p>

                        <a href="@post.Url" title="More Info" class="btn">More Info</a>
                    </section>
                </article>
            }
        }
        else
        {
            <article class="blog-article">
                No blog posts found
            </article>
        }

    </div>
</div>

In the template, you convert the IPublishedContent into a ListModel object. After that, you can access the various properties how you see fit.

Post.cshtml

The HTML for a blog post page is usually a lot simpler:

@using Articulate
@using Umbraco.Core.Models
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
@{
    Layout = "~/Views/Master.cshtml";
    var articulateModel = (Articulate.Models.PostModel)Model;
}

<div class="row blog-listing-body">
    <div class="col-md-offset-1 col-md-7 col-sm-12">

        <article class="row">

            <sectiom class="blog-listing-introduction col-md-10 col-md-offset-2  col-sm-12">
                <h1>
                    @articulateModel.Name
                </h1>
                <hr>
                <div class="blog-listing-article">
                    @articulateModel.Body
                </div>
                <aside>
                    @if (!string.IsNullOrWhiteSpace(articulateModel.PostImageUrl))
                    {
                        var thumbnail = articulateModel.GetCropUrl(500, 500, "postImage");
                        <img class="thumb" src="@thumbnail" alt="@articulateModel.Name" />
                    }
                </aside>



            </sectiom>

        </article>

    </div>
</div>

Here we do a similar thing as we do in the list view. Convert the IPublishedContent to a PostModel and then access the properties as needed.

Applying Your Theme

Within the Umbraco backend, create/open a new page using the 'Blog' document type.

 

In the 'Tab' section, you'll see a 'Theme' section.  In this list, you should see your theme (based on the folder name).  Select that and save the page and your theme will now be applied.  Simples!

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top