Skip to main content

Theme Designer's Guide to Mixcore

This guide is designed for web designers, front-end developers, and creative professionals who want to create or customize themes for Mixcore CMS.

Theme Development Overview​

Mixcore themes control the visual presentation and user experience of your website. As a theme designer, you'll be working with:

  • HTML/CSS for structure and styling
  • JavaScript for interactive elements
  • Template files that integrate with Mixcore's content system
  • Asset management (images, fonts, etc.)

Getting Started​

Theme Structure​

A typical Mixcore theme has the following structure:

theme-name/
├── assets/               # Static assets
│   ├── css/              # Stylesheets
│   ├── js/               # JavaScript files
│   ├── images/           # Theme images
│   └── fonts/            # Custom fonts
├── templates/            # Template files
│   ├── master.cshtml     # Main layout template
│   ├── home.cshtml       # Homepage template
│   ├── page.cshtml       # Default page template
│   ├── post.cshtml       # Blog post template
│   └── ...               # Other templates
├── partials/             # Reusable components
│   ├── header.cshtml     # Header component
│   ├── footer.cshtml     # Footer component
│   └── ...               # Other components
├── theme.json            # Theme metadata
└── README.md             # Documentation

For more details, see Theme Basics.

Development Environment Setup​

To develop Mixcore themes, you'll need:

  1. A local Mixcore installation (see Installation Guide)
  2. Your preferred code editor (VS Code, Sublime Text, etc.)
  3. Basic knowledge of HTML, CSS, and JavaScript
  4. Familiarity with Razor syntax for templates

Creating Your First Theme​

Step 1: Set Up the Theme Structure​

Create the basic folder structure as shown above.

Step 2: Define Theme Metadata​

Create a theme.json file with your theme's information:

{
  "name": "My Custom Theme",
  "version": "1.0.0",
  "author": "Your Name",
  "description": "A beautiful custom theme for Mixcore",
  "tags": ["responsive", "modern", "clean"],
  "thumbnail": "assets/images/thumbnail.jpg",
  "previewUrl": "https://example.com/theme-preview",
  "supportUrl": "https://example.com/support"
}

Step 3: Create the Master Template​

The master template (master.cshtml) serves as the main layout for your theme. It typically includes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="~/themes/my-theme/assets/css/styles.css">
    @RenderSection("head", required: false)
</head>
<body>
    <header>
        @Html.Partial("_Header")
    </header>
    
    <main>
        @RenderBody()
    </main>
    
    <footer>
        @Html.Partial("_Footer")
    </footer>
    
    <script src="~/themes/my-theme/assets/js/main.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Step 4: Create Content Templates​

Create templates for different content types:

  • home.cshtml for the homepage
  • page.cshtml for standard pages
  • post.cshtml for blog posts
  • Additional templates as needed

For detailed template examples, see Template Files.

Template Development​

Working with Mixcore Template Engine​

Mixcore uses Razor syntax for templates. Key concepts include:

  • @Model to access page data
  • @Html.Partial() for including partial templates
  • @RenderBody() and @RenderSection() for layout composition

Content Display​

To display content from Mixcore, use:

<h1>@Model.Title</h1>
<div class="content">
    @Html.Raw(Model.Content)
</div>

Dynamic Navigation​

Generate navigation menus dynamically:

<nav>
    <ul>
        @foreach (var item in Model.Navigation)
        {
            <li class="@(item.IsActive ? "active" : "")">
                <a href="@item.Url">@item.Title</a>
            </li>
        }
    </ul>
</nav>

Styling Your Theme​

CSS Best Practices​

  • Use a CSS preprocessor like SASS or LESS for maintainability
  • Implement responsive design principles
  • Consider a CSS framework like Bootstrap or Tailwind
  • Organize styles with a methodology like BEM

Mobile Responsiveness​

Ensure your theme looks great on all devices:

/* Base styles for mobile first approach */
.container {
    width: 100%;
    padding: 0 15px;
}

/* Tablet styles */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Desktop styles */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

Accessibility​

Make your themes accessible to all users:

  • Use semantic HTML elements
  • Maintain sufficient color contrast
  • Include proper alt text for images
  • Ensure keyboard navigation works
  • Test with screen readers

Theme Functionality​

Adding Custom JavaScript​

Enhance your theme with interactive features:

// main.js
document.addEventListener('DOMContentLoaded', function() {
    // Mobile menu toggle
    const menuButton = document.querySelector('.menu-toggle');
    const navigation = document.querySelector('.main-navigation');
    
    menuButton.addEventListener('click', function() {
        navigation.classList.toggle('active');
    });
    
    // Other interactive features...
});

Theme Settings​

Allow users to customize your theme:

  1. Define customizable options in theme.json
  2. Create a settings interface
  3. Apply settings throughout your templates

See Theme Functionality for implementation details.

Testing Your Theme​

Browser Testing​

Test your theme across multiple browsers:

  • Chrome, Firefox, Safari, Edge
  • Mobile browsers
  • Different screen sizes and resolutions

Performance Optimization​

Optimize for speed:

  • Minify CSS and JavaScript
  • Optimize images
  • Implement lazy loading
  • Reduce HTTP requests

Validation​

Ensure your theme meets quality standards:

  • HTML validation
  • CSS validation
  • JavaScript linting
  • Accessibility testing (WCAG compliance)

Packaging and Distribution​

Creating a Theme Package​

Package your theme for distribution:

  1. Compile and minify assets
  2. Remove development files
  3. Create comprehensive documentation
  4. Add a screenshot/thumbnail

Publishing Your Theme​

Options for distributing your theme:

  • Submit to the Mixcore Theme Gallery
  • Sell on theme marketplaces
  • Share on GitHub or similar platforms

For guidelines on releasing your theme, see Release Your Theme.

Theme Customization Tips​

Child Themes​

For extending existing themes without modifying the original:

  1. Create a new theme folder
  2. Specify the parent theme in your theme.json
  3. Override only the files you want to change

Theme Components​

Create reusable components for:

  • Headers and footers
  • Navigation menus
  • Content cards
  • Forms and input elements
  • Social media widgets

Resources​

Further Learning​

Continue your theme development journey with: