Creating a new Theme for Orchard

Tagged: orchard theme codegen

Overview

Creating a theme in orchard is easy, with only 3 steps:

  1. Generate new theme using code generation feature
  2. Add some styling and new views if required
  3. Activate theme from Admin area.

Generate the Theme

Most of the work and boiler plate to do with creating a new theme is handled by Orchard, using the code generation feature. To get started open Orchard.exe (found in the bin folder of the Orchard.Web project and run the following commands

feature enable Orchard.CodeGeneration

codegen theme SimpleBlog

This will have create the required files in the correct structure for your new theme inside the Themes folder in Orchard.Web. You're now ready to start customising the styling.

Add some new styling

Now that Orchard has done the heavy lifting with regards to creating a new theme you have a template where you can customise as much or as little of Orchard as you choose. At the simplest level, Orchard works by defining the way a page should look in a Layout Razor view file. This layout file defines the different areas (Zones) of the page where content can be placed and sometimes adds content that will be static such as a footer. To make sure the content is placed into the correct Zone you add an entry into the placement.info file (though for now you can stick to the default Orchard)

Creating a layout

Create a File called Layout.cshtml in the Views folder and add the following markup (from OrchardProject.net)

@{
    Script.Require("ShapesBase");
    Style.Include("site.css");
}

<div id="header">
    <div id="branding">
        <h1>@T("Main header")</h1>
    </div>
</div>
<div id="layout-navigation" class="group">
    @Display(Model.Navigation)
</div>
<div id="main">
@Display(Model.Content)
</div>

Adding some css

As you notice in the layout, we're trying to include a site.css file. If you create a file in the Styles folder of your module with some CSS in it will be applied to the site. That's it. You've create your own theme for Orchard. All that is left to do is enable it.

Activate the new theme

To activate your new theme, browse to the admin area and choose Themes from the menu. You should see your theme with the option to either Preview or Set Current. You'll notice that the thumbnail is the default orchard logo (found in your new theme as theme.png) if you intend to share your new theme or plan on having a few of them on your site you should take a screen capture of the site with the new theme and save it as Theme.png in your theme.

Sharing your theme

If you do decide to share your theme the easiest way is through the Orchard command line, one command will wrap it all into a nupkg that can be distributed and loaded from the admin section.

package create SimpleBlog c:\temp