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.

Update: I found another silly reason to lose all of your CSS, by default when you copy all of the css and js from TheBlogTheme into your new theme project all of those projects are marked as ignored, so they don't get checked into the repo. So if you try to check out and re-deploy from a new machine all of those crucial files will be missing, so don't forget to check those in 👍🏾