# Orchardcore Theme Creator

> Creates new Orchard Core 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. Use this skill when requests mention Orchard Core Theme Creator, Prerequisites, Theme Creation Workflow, Step 1 Create Theme Directory, Step 2 Create Required Files, Step 3 Create Manifest.cs, or closely related Orchard Core implementation, setup, extension, or troubleshooting work. Strong matches include work with OrchardCore.Themes, OrchardCore.DisplayManagement.Manifest, OrchardCore.Modules.Manifest, OrchardCore.Theme.Targets, OrchardCore.Theme.Targets.csproj, OrchardCore.Cms.Web, TheBlogTheme, TheAdmin, TheAgencyTheme, YourThemeName, site.css, site.js. It also helps with assets, theme structure, Step 2 Create Required Files, Step 3 Create Manifest.cs, plus the code patterns, admin flows, recipe steps, and referenced examples captured in this skill.

- Skill: `crestapps/orchardcore-theme-creator` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add crestapps/orchardcore-theme-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/crestapps/orchardcore-theme-creator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: CrestApps (https://skillmd.com/u/crestapps)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/crestapps/orchardcore-theme-creator

---


# Orchard Core Theme Creator

This skill guides you through creating new Orchard Core themes following project conventions.

## Prerequisites

- OrchardCore repository (working directory)
- .NET SDK 10.0+ installed
- Node.js 22.x and Yarn 4.x only when the theme includes optional asset compilation

## Theme Creation Workflow

### Step 1: Create Theme Directory

```bash
mkdir src/OrchardCore.Themes/YourTheme
cd src/OrchardCore.Themes/YourTheme
```

### Step 2: Create Required Files

Every theme needs these files:

1. **Manifest.cs** - Theme metadata
2. **YourTheme.csproj** - Project file
3. **Views/Layout.cshtml** - Main layout
4. **Views/_ViewImports.cshtml** - Razor imports

### Step 3: Create Manifest.cs

```csharp
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:**
```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 Layout

Create `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.json
Assets.json
```

See `references/assets.md` for configuration details.

### Step 7: Build and Activate

```bash
# Build theme
cd /path/to/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

