Cloning and modifying a theme in Orchard Core

I decided earlier this year that I was going to branch out from my DotNetNuke (DNN) roots and start working on other open source applications, this decision came over many discussions with folks at the 2018 DNNSummit. As soon as I got home from Denver, I got myself setup with a demo site running on Orchard, then I did absolutely nothing with it after that. Fast forward a few months and I had a new idea for a blog that I wanted to do, not wanting to go with my usual DNN + Engage Publish suite of tools, like every other blog I use, I decided that I would install Orchard CMS on Microsoft Azure.

After one false start (I installed Orchard CMS initially), I got Orchard Core up and running on Azure and a blog setup pretty easily. Once I did though, I decided that I needed to change the look of the default “The Blog Theme” that was included with Orchard Core, because I was working with the source code in Visual Studio it was fairly easy to track down where “The Blog Theme” was, it was a separate CSPROJ file in the Orchard Core solution. Rather than simply modifying that theme however, I decided I would clone the theme, rename it, keep the MIT License intact, and start my “own” theme for use within Orchard Core. To do that, I followed the following steps.

  1. In the Windows File Explorer, navigate to OrchardCore\src\OrchardCore.Themes
  2. Right click on TheBlogTheme, copy and paste
  3. Rename “TheBlogTheme Copy” to your new theme name, I chose CollectorOfJackTheme (after the website I am building)
  4. Navigate into your new theme folder, find “TheBlogTheme.csproj”, rename the project file to your new theme name “CollectorOfJackTheme.csproj”
  5. Open up the Orchard Core solution in Visual Studio 2017.
  6. Expand the solution explorer src/OrchardCore.Themes
  7. Right click on that OrchardCore.Themes folder and choose to Add Existing project, find your CollectorOfJackTheme.csproj file.
  8. Open up the Manifest.cs file and rename any of the properties you want to adjust.
    image
  9. Press Control-Shift-F in Visual Studio and do a “find” for “TheBlogTheme”, limit the scope of the find to Current Project to make your results easier to manage. Basically you want to find every instance of “TheBlogTheme” in your current project and replace it with the name of your new project.
    image
  10. After that, you can start making changes/adjustments/etc to your new project so that you can customize your theme.

Once you’ve created your new theme, and made any necessary changes, you’re going to want to try to deploy that theme. I had hoped it would be as simple as hitting Publish in Visual Studio to get the theme deployed out to my Azure instance and selectable, but this was not the case. In order to get things deployed and accessible, you need to make one final change.

  • In Visual Studio, in the solution, navigate to src/OrchardCore.Targets
  • Right click on OrchardCore.Application.Cms.Targets, and choose Add Reference.
  • From there choose your Project, click okay a few times
    image
  • Save
  • Compile
  • Publish

From there you should now have a NEW theme available to you under the Admin/Themes/Active Themes page. You can simply choose to Make Default, and apply the theme.
image

Stay tuned for future blogs around my experiences using Orchard Core!

No Comments