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.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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

Repository: OrchardCMS/OrchardCore
Path: .agents/skills/orchardcore-theme-creator/SKILL.md
Commit: b0e1e44

Last updated: 3 days ago
First committed: 7 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.