Overview

The Postnomic Client SDKs ship with clean, responsive default styling that works out of the box. You can customize the appearance to match your application's brand by overriding CSS, choosing a blog layout, and replacing default views or components.

Blog Layout Options

Postnomic supports two built-in blog layouts, configurable per blog through the dashboard under Settings → Blog Settings:

• Default — A traditional single-column blog listing with posts displayed vertically. Ideal for text-heavy content.
• Masonry — A multi-column grid layout where posts flow into available space, similar to Pinterest. Uses CSS column-count: 2 with break-inside: avoid for a compact, visual presentation.

The layout setting is stored on the blog entity and returned via the API. The Client SDKs automatically apply the corresponding CSS layout when rendering the blog index.

Overriding Default CSS

Both Client SDKs include a default stylesheet. To customize the look, add your own CSS that overrides the Postnomic defaults. Create a CSS file in your application's wwwroot directory:

/* wwwroot/css/blog-custom.css */

.postnomic-blog-index {
    max-width: 900px;
    margin: 0 auto;
}

.postnomic-post-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.postnomic-post-title {
    font-family: 'Georgia', serif;
    color: #1a1a2e;
}

.postnomic-post-excerpt {
    color: #555;
    line-height: 1.6;
}

Reference it in your layout file after the Postnomic default stylesheet:

<link rel="stylesheet" href="css/blog-custom.css" />

Using Bootstrap Themes

The default Postnomic styles are Bootstrap-compatible. If your application already uses Bootstrap, the blog components will inherit your theme's typography, colors, and spacing. To apply a custom Bootstrap theme:

1. Use a Bootstrap theme from services like Bootswatch or build your own with the Bootstrap customizer.
2. Include the themed Bootstrap CSS in your application's layout.
3. The Postnomic components will automatically adopt the theme's variables.

Overriding Views (ASP.NET Core)

For the ASP.NET Core integration, you can override individual Razor Pages by creating pages at the matching Area path in your own project. The ASP.NET Core routing system will prioritize your pages over the package defaults:

/Areas/Blog/Pages/Index.cshtml       → Override blog listing
/Areas/Blog/Pages/Post.cshtml        → Override post detail
/Areas/Blog/Pages/Author.cshtml      → Override author profile

Inject IPostnomicBlogService into your custom pages to fetch data:

public class IndexModel : PageModel
{
    private readonly IPostnomicBlogService _blogService;

    public IndexModel(IPostnomicBlogService blogService)
    {
        _blogService = blogService;
    }

    public async Task OnGetAsync()
    {
        var posts = await _blogService.GetPostsAsync();
        // Custom rendering logic
    }
}

Overriding Components (Blazor)

In Blazor applications, you can create your own routable components at the same paths to replace the defaults. Define components with the @page "/blog" directive in your application and they will take precedence.

Masonry Layout Customization

To adjust the masonry layout's column count for different screen sizes, override the CSS:

.postnomic-masonry {
    column-count: 1;
}

@media (min-width: 768px) {
    .postnomic-masonry {
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .postnomic-masonry {
        column-count: 3;
    }
}