Close
AlgoliaLogoLight
Close full mode
logo

Create a custom Orchard Core CMS theme

Git RepositoryEdit on Github

Setup a new Orchard project

  • Follow steps in Setup Orchard Core CMS document to setup a new Orchard Core CMS.
  • Please make sure you can login to an admin panel.
  • After you have setup a project, you should have a project structure like this:
    $ tree -I 'bin|obj' orchard-example
    orchard-example
    └── src
    └── OrchardExample.Cms
    ├── NLog.config
    ├── OrchardExample.Cms.csproj
    ├── Program.cs
    ├── Properties
    │   └── launchSettings.json
    ├── Startup.cs
    ├── appsettings.json
    └── wwwroot

Create a new theme

  • CD to orchard-example folder.
  • Create a new folder with name Themes in src folder.
  • CD to src/Themes
  • Create a theme with name OrchardExample.Theme by using dotnet new octheme command.
  • Note, you can change a theme's name to any name that you want.
    $ cd orchard-example
    $ mkdir src/Themes
    $ cd src/Themes
    $ dotnet new octheme --name OrchardExample.Theme --AddLiquid false
  • Note Orchard Core CMS's theme/view supports Liquid template and it is default to Liquid template. However we want use Razor template because we can debug with step into/step over and we can use C# code inside a view.

Our project structure after adding a theme

$ tree -I 'bin|obj|' orchard-example
orchard-example
└── src
├── OrchardExample.Cms
│   ├── NLog.config
│   ├── OrchardExample.Cms.csproj
│   ├── Program.cs
│   ├── Properties
│   │   └── launchSettings.json
│   ├── Startup.cs
│   ├── appsettings.json
│   └── wwwroot
│   └── .placeholder
└── Themes
└── OrchardExample.Theme
├── Manifest.cs
└── OrchardExample.Theme.csproj

Create a layout file

  • Cd to orchard-example (the root folder) and use code . command to launch VS Code.

  • Create Views/Layout.cshtml file in OrchardExample.Theme project.

  • Add the following content to Layout.cshtml.

    <!DOCTYPE html>
    <html lang="@Orchard.CultureName()">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@RenderTitleSegments(Site.SiteName, "before")</title>
    <resources type="Meta" />
    <!-- INSERT REQUIRED RESOURCES HERE -->
    <style asp-name="bootstrap" version="4" at="Head"></style>
    <script asp-name="bootstrap" version="4" at="Foot"></script>
    <resources type="HeadLink" />
    <resources type="Stylesheet" />
    <resources type="HeadScript" />
    </head>
    <body dir="@Orchard.CultureDir()">
    @await RenderBodyAsync()
    <footer>
    @await RenderSectionAsync("Footer", required: false)
    </footer>
    <resources type="FootScript" />
    </body>
    </html>
  • Layout.cshtml is the main document of our theme which contains header, body and footer.

  • Add Views/_ViewImports.cshtml file and add the following content to it.

    @inherits OrchardCore.DisplayManagement.Razor.RazorPage<TModel>
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper *, OrchardCore.DisplayManagement
    @addTagHelper *, OrchardCore.ResourceManagement
    @addTagHelper *, OrchardCore.Menu
    @using Microsoft.AspNetCore.Routing
    @using Microsoft.Extensions.Options
    @using OrchardCore.ContentManagement
    @using OrchardCore.ContentManagement.Routing

Our project structure after adding Layout.cshtml

$ tree -I 'bin|obj|App_Data|Localization|wwwroot' orchard-example
orchard-example
└── src
├── OrchardExample.Cms
│ ├── NLog.config
│ ├── OrchardExample.Cms.csproj
│ ├── Program.cs
│ ├── Properties
│ │ └── launchSettings.json
│ ├── Startup.cs
│ └── appsettings.json
└── Themes
└── OrchardExample.Theme
├── Manifest.cs
├── OrchardExample.Theme.csproj
└── Views
├── Layout.cshtml
└── _ViewImports.cshtml

Launch a website

  • Open an integrated terminal in VS Code.
  • From the root folder of the project, CD to src/OrchardExample.Cms folder.
  • Reference the theme project to OrchardExample.Cms project by running the following command:
    $ cd src/OrchardExample.Cms
    $ dotnet add reference ../Themes/OrchardExample.Theme/OrchardExample.Theme.csproj
  • Launch the project with dotnet run.
    $ dotnet run
  • Open a browser and navigate to https://localhost:5001/admin.
  • Fill your admin's username and password that you have setup on a setup new website page.
  • After you have logged in an admin site, on lef-hand side menu, click Design > Themes.
  • You should find our OrchardExample.Theme, click Make Current to set it as a default frontend theme.
  • Go to the home page https://localhost:5001/ and you should find that our custom theme has been applied.
  • Note, the layout of our theme is very simple and it does not have a menu. We will add a menu later when we go deeper in theme development.
Loading comments...