Skip to content

4. Designing a theme

Jump to bottom
Mark Downie edited this page Jun 15, 2026 · 29 revisions

DasBlog Core uses Razor views for theming. Each theme is a self-contained folder under /Themes/ that defines the layout, blog post templates, and styles for the site.

Available themes

DasBlog Core ships with six built-in themes:

Theme Description
dasblog Default theme, clean Bootstrap 5 layout
darkly Dark color scheme based on Bootswatch Darkly
flamingo Pink accent palette
flatly Flat, modern look based on Bootswatch Flatly (navy/blue accents)
kindofblue Blue accent palette
median Sidebar layout with summary cards (purple accents)

All built-in themes target Bootstrap 5.3 and Font Awesome 6. They are protected and cannot be edited or deleted directly. To customize a built-in theme, create a copy using the theme editor.

Theme editor

The admin panel includes a theme editor at /admin/themes for managing themes directly from the browser.

Capabilities

  • Browse themes - View all installed themes with status indicators (Active, Built-in)
  • Create theme - Copy an existing theme as a starting point for a new custom theme
  • Edit files - Edit theme files with CodeMirror syntax highlighting (supports .cshtml, .css, .js, .json, .html, .xml, .svg)
  • Versioned backups - Each save automatically creates a backup (up to 3 versions retained)
  • Revert changes - Restore a file to any previous backup version
  • Set active - Switch the site to a different theme
  • Delete - Remove custom themes (built-in themes and the active theme cannot be deleted)

Built-in themes are read-only. To customize one, create a copy first using the Create action.

Switching themes

To switch your active theme:

  1. Navigate to /admin/themes
  2. Click Set as Active on the theme you want to use

Or change the Theme setting on the admin settings page (/admin/settings).

Theme folder structure

Each theme folder contains the following files:

File Required Purpose
_Layout.cshtml Yes Master layout (HTML skeleton, navigation, header, footer)
_BlogItem.cshtml Yes Full blog post display template
_BlogItemSummary.cshtml Yes Post summary/card template for listings
_BlogPage.cshtml Yes Static page display template
_BlogPageSummary.cshtml Yes Static page summary template
custom.css Yes Theme-specific styles
favicon.ico No Theme favicon
custom.js No Theme-specific JavaScript

Theme reference

The following sections cover theme internals for manual theme creation or advanced customization.

Creating a theme manually

  1. Create a new folder under Themes/ with your theme name
  2. Copy the required files from an existing theme
  3. Customize the Razor views and CSS
  4. Set your theme as active in /admin/themes

You can also create a theme from the CLI: dasblog-core newtheme <name>

Layout skeleton

The _Layout.cshtml defines the overall page structure. Here is the typical pattern:

<!DOCTYPE html>
<html lang="en">
<head>
    <partial name="_HtmlHeadPartial" />
    <partial name="_HtmlRSSPartial" />
    <partial name="_HtmlAtomPartial" />
    <partial name="_TwitterCardPartial" />
    <partial name="_OpenGraphPartial" />
    <partial name="_BlogPostingSchemaOrgPartial" />
    <!-- Bootstrap CSS, Font Awesome, site.css, theme custom.css -->
</head>
<body>
    <header>
        <!-- Navigation with <site-title /> or <site-title-link /> -->
        <!-- Admin menu (wrapped in dasblog-authorized) -->
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        @RenderBody()
        <site-page-control view-context="@ViewContext" />
        <footer>
            <site-copyright />
        </footer>
    </div>
    <!-- jQuery, Bootstrap JS, site.js -->
    @RenderSection("scripts", required: false)
</body>
</html>

Blog post template

The _BlogItem.cshtml uses @model PostViewModel and renders a full blog post. A typical template includes:

@model PostViewModel

<h2><post-title-link post=@Model /></h2>
<small><post-created-date post="@Model" /></small>

<post-content post="@Model" />

Categories: <post-categories-list post="@Model" >, </post-categories-list>

Share on <post-to-twitter post="@Model">Twitter</post-to-twitter>,
<post-to-reddit post="@Model">Reddit</post-to-reddit>,
<post-to-facebook post="@Model">Facebook</post-to-facebook>,
<post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>,
<post-to-blue-sky post="@Model">BlueSky</post-to-blue-sky>

<div dasblog-authorized>
    <post-edit-link post="@Model" />
    <post-delete-link post="@Model" />
    <comment-management-link post="@Model" />
    <partial name="_DeleteConfirmationModalPartial" model="Model" />
</div>

<partial name="_CollapseCommentBlockPartial" model="@Model" />

Summary card template

The _BlogItemSummary.cshtml renders a compact card for post listings (used on the front page when configured for summary view):

@model PostViewModel

<post-categories-list post="@Model" />
<h3><post-title-link post=@Model /></h3>
<small><post-created-date post="@Model" /></small>
<p><post-content post="@Model" strip-html="true" content-length="20" /></p>
<post-title-link post=@Model>Continue reading...</post-title-link>
<post-image post=@Model css="card-img" default-image="/images/default/dasblog.png" />

For a complete list of available tag helpers and partial views, see Tag Helpers & Partial Views.

Additional questions?

If you have additional questions or concerns please submit an issue.

Clone this wiki locally
⚡