Customizing an Existing Theme in Orchard Core

Posted by Zach on February 01, 2020

I want to use Orchard Core as my CMS, but I can't find any good write ups on how to take an existing theme and tweak it. I know if I download the source code I can just overwrite an existing project, or copy/paste one and tweak that but that seems messy when I can install Orchard Core as a nuget package. I'll keep my notes here as I go along.

Here's what I've done so far

  • Created a new .net core web app (empty)
  • Installed Orchard CMS as a nuget package
  • Navigated to my project root on the command line and ran
    • dotnet new octheme -n "ZachsBlogTheme" (you need to install the orchard command line tools to do this)
  • Cloned the Orchard Core git repo and copied TheBlogTheme from here: \OrchardCore\src\OrchardCore.Themes\TheBlogTheme (make sure you overwrite existing files)
  • Add the new theme project to my solution, globally rename "TheBlogTheme" to "ZachsBlogTheme"
  • In the new project install the following nuget package:
    • OrchardCore.Theme.Targets
  • Added a reference to my new theme to my existing CMS project.
  • Open the admin section, go to Design -> Themes select my new theme. Deselect old theme.

That should do it. I ran into an issue where it seemed like my custom Orchard Core theme wasn't loading any css, but that was because I didn't overwrite existing files when I copied in TheBlogTheme so the main layout file for the theme was missing. Silly mistake but documenting it here in case someone else runs into it.