// /blog/ocms-theme-development
Blog news image

oCMS Theme Development

oCMS features a powerful and flexible theme system. This guide covers everything you need to create custom themes. Theme Structure A theme consists of templates, static assets, and optional...

/* Mar 26, 2026 */ @Demo Admin ~1 min read

oCMS features a powerful and flexible theme system. This guide covers everything you need to create custom themes.

Theme Structure

A theme consists of templates, static assets, and optional translations:

mytheme/
├── theme.json           # Theme metadata
├── templates/
│   ├── layouts/
│   │   └── base.html    # Main layout
│   ├── pages/
│   │   ├── home.html
│   │   ├── page.html
│   │   └── post.html
│   └── partials/
│       ├── header.html
│       └── footer.html
├── static/
│   ├── css/
│   └── js/
└── locales/             # Optional translations

Template Inheritance

oCMS uses Go's html/template with a block-based inheritance system:

{{/* base.html */}}
<html>
<head>
  {{block "head" .}}{{end}}
</head>
<body>
  {{block "content" .}}{{end}}
</body>
</html>

Template Functions

oCMS provides many helper functions:

  • T - Translation function
  • TTheme - Theme-specific translations
  • FormatDate - Date formatting
  • SafeHTML - Render trusted HTML
  • Truncate - Text truncation

Static Assets

Place CSS, JavaScript, and images in the static/ directory. Reference them in templates using the asset path.

Best Practices

  • Use semantic HTML for accessibility
  • Optimize images before including them
  • Minimize CSS and JavaScript
  • Test responsive layouts thoroughly
  • Support both light and dark modes
/**
* @author

Demo Admin

*/

// Related Posts