// 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.
Creates and updates OrchardCore admin edit views using the ocat-* CSS class conventions. Use when creating or modifying Edit view files (*.Edit.cshtml, *.Fields.Edit.cshtml) to ensure correct layout and styling.
Builds, watches, and manages frontend assets in OrchardCore. Use when modifying SCSS, JS, TS, or Vue files, adding new assets to a module/theme, or troubleshooting build failures. Covers all asset actions (vite, sass, min, copy, parcel, webpack, concat) and the three-tier package structure.
Creates new OrchardCore modules with proper structure, manifest, startup, and patterns. Use when the user needs to create a new module, add content parts, fields, drivers, handlers, or admin functionality.
Tests OrchardCore CMS features through browser automation. Use when the user needs to build, run, setup, or test OrchardCore functionality including admin features, content management, media library, and module testing.
| name | orchardcore-theme-creator |
| description | 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. |
This skill guides you through creating new OrchardCore themes following project conventions.
D:\orchardcoremkdir src/OrchardCore.Themes/YourTheme
cd src/OrchardCore.Themes/YourTheme
Every theme needs these files:
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
)]
<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>
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>
Create asset structure:
Assets/
āāā scss/site.scss
āāā js/site.js
āāā package.json
Assets.json
See references/assets.md for configuration details.
# 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
| Zone | Purpose |
|---|---|
Header | Site header |
Navigation | Main menu |
Messages | Alerts/notifications |
Content | Main content |
Sidebar | Side widgets |
Footer | Site footer |
| Theme | Description |
|---|---|
TheBlogTheme | Blog template |
TheAdmin | Admin UI |
TheAgencyTheme | Business template |
| Item | Convention |
|---|---|
| Theme folder | YourThemeName (PascalCase) |
| Namespace | YourThemeName |
| CSS file | site.css |
| JS file | site.js |
references/theme-structure.md - Directory layout and templatesreferences/assets.md - SCSS, JS, and asset pipelineAGENTS.md (repo root) - Build commands