orchardcms OrchardCore Theme Creator
This skill guides you through creating new OrchardCore themes following project conventions.
Prerequisites
- OrchardCore repository at
D:\orchardcore - .NET SDK 10.0+ installed
- Node.js 22.x and Yarn 4.x (for asset compilation)
Theme Creation Workflow
Step 1: Create Theme Directory
mkdir src/OrchardCore.Themes/YourTheme
cd src/OrchardCore.Themes/YourTheme
Step 2: Create Required Files
Every theme needs these files:
- Manifest.cs - Theme metadata
- YourTheme.csproj - Project file
- Views/Layout.cshtml - Main layout
- Views/_ViewImports.cshtml - Razor imports
Step 3: Create Manifest.cs
using OrchardCore.DisplayManagement.Manifest;
using OrchardCore.Modules.Manifest;
[assembly: Theme(
Name = "Your Theme",
Author = ManifestConstants.OrchardCoreTeam,
Website = ManifestConstants.OrchardCoreWebsite,
Version = ManifestConstants.OrchardCoreVersion,
Description = "Your theme description."
)]
Extending a base theme:
[assembly: Theme(
Name = "Your Theme",
BaseTheme = "TheBlogTheme", // Inherit from base
// ... other properties
)]
Step 4: Create Project File
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
<Title>Your Theme</Title>
<Description>Your theme description.</Description>
</PropertyGroup>
<ItemGroup>
<FrameworkReference Include="Microsoft.AspNetCore.App" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\OrchardCore\OrchardCore.Theme.Targets\OrchardCore.Theme.Targets.csproj" />
</ItemGroup>
</Project>
Step 5: Create Layout
Create Views/Layout.cshtml:
<!DOCTYPE html>
<html lang="@Orchard.CultureName()">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@RenderTitleSegments(Site.SiteName, "before")</title>
<resources type="StyleSheet" />
</head>
<body>
<zone Name="Header" />
<main>
<zone Name="Messages" />
<zone Name="Content" />
</main>
<zone Name="Footer" />
<resources type="FootScript" />
</body>
</html>
Step 6: Add Assets (Optional)
Create asset structure:
Assets/
├── scss/site.scss
├── js/site.js
└── package.json
Assets.json
See references/assets.md for configuration details.
Step 7: Build and Activate
# Build theme
cd D:\orchardcore
dotnet build src/OrchardCore.Themes/YourTheme
# Build assets (if added)
yarn && yarn build
# Run application
cd src/OrchardCore.Cms.Web
dotnet run -f net10.0
# Activate theme in Admin → Design → Themes
Quick Reference
Available Zones
| Zone | Purpose |
|---|---|
Header |
Site header |
Navigation |
Main menu |
Messages |
Alerts/notifications |
Content |
Main content |
Sidebar |
Side widgets |
Footer |
Site footer |
Base Themes
| Theme | Description |
|---|---|
TheBlogTheme |
Blog template |
TheAdmin |
Admin UI |
TheAgencyTheme |
Business template |
Naming Conventions
| Item | Convention |
|---|---|
| Theme folder | YourThemeName (PascalCase) |
| Namespace | YourThemeName |
| CSS file | site.css |
| JS file | site.js |
References
references/theme-structure.md- Directory layout and templatesreferences/assets.md- SCSS, JS, and asset pipelineAGENTS.md(repo root) - Build commands