Orchardcore Theme Creator

Creates new OrchardCore themes with proper structure, manifest, layouts, and assets. Use when the user needs to create a new theme, customize layouts, or set up frontend assets.

tomevault-io 6d9321d 2 files · 4.5 KB Updated Sep 17, 2026

Install

Press C to copy

$ npx skillmds@latest add tomevault-io/orchardcore-theme-creator

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/tomevault-io/orchardcore-theme-creator.svg)](https://skillmd.com/skills/tomevault-io/orchardcore-theme-creator)

Trust & safety

Audits pending

Not yet audited · commit 6d9321d

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

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 templates
references/assets.md - SCSS, JS, and asset pipeline
AGENTS.md (repo root) - Build commands

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: orchardcore-theme-creatordescription: Creates new OrchardCore themes with proper structure, manifest, layouts, and assets. Use when the user needs to create a new theme, customize layouts, or set up frontend assets.---# OrchardCore Theme CreatorThis 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```bashmkdir src/OrchardCore.Themes/YourThemecd src/OrchardCore.Themes/YourTheme```### Step 2: Create Required FilesEvery theme needs these files:1. **Manifest.cs** - Theme metadata2. **YourTheme.csproj** - Project file3. **Views/Layout.cshtml** - Main layout4. **Views/_ViewImports.cshtml** - Razor imports### Step 3: Create Manifest.cs```csharpusing 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:**```csharp[assembly: Theme( Name = "Your Theme", BaseTheme = "TheBlogTheme", // Inherit from base // ... other properties)]```### Step 4: Create Project File```xml<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 LayoutCreate `Views/Layout.cshtml`:```html<!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.jsonAssets.json```See `references/assets.md` for configuration details.### Step 7: Build and Activate```bash# Build themecd D:\orchardcoredotnet build src/OrchardCore.Themes/YourTheme# Build assets (if added)yarn && yarn build# Run applicationcd src/OrchardCore.Cms.Webdotnet 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 templates- `references/assets.md` - SCSS, JS, and asset pipeline- `AGENTS.md` (repo root) - Build commands---> Converted and distributed by [TomeVault](https://tomevault.io/claim/orchardcms) — claim your Tome and manage your conversions.

tomevault-io/skills-registry/tree/main/orchardcms--orchardcore--orchardcore-theme-creator commit 6d9321d09b

Frequently asked questions

npx skillmds@latest add tomevault-io/orchardcore-theme-creator