Table of Contents

Customizing Razor UI

Use this guide when you want to change a pre-built Razor surface: .cshtml UI pages or partial UI components, or UI layouts implemented as .cshtml partials. You do not use ReplaceBaseComponent. Instead, add a file in your client with the same relative path and file name as the original under your project’s Pages tree (path override).

If you are editing Blazor .razor instead, see Customizing Blazor UI.

Find what you are customizing

If the UI is… Look here first
Shared across features (error UI page, culture UI page, shared partials, _SimpleLayout, and similar) UI components module — full list, type names, paths, and source.
Owned by a product module (Identity login, register, blogging UI pages, and so on) That module’s UI article under Modules — for example Identity UI, Blogging UI.
Admin or user panel when the surface is Razor Most shell chrome is Blazor; confirm on Admin panel or Website & user panel.

More module UI links: Administration · AI ChatBot · Analytic · Blogging · Change tracking · Identity · Licensing · Monitoring · Payment · Pricing · Settings · Subscription · Supporting UI components

Path override (pages and partials)

For .cshtml UI pages and partial UI components, add a file in your client with the same relative path and file name as the original (under your project’s Pages tree). At runtime your copy wins.

Example: to override the Identity login UI page, if the original lives at Pages/Account/Login.cshtml inside the module’s UI area, place Pages/Account/Login.cshtml in your WebApp (or the relevant client) at the same relative path, then edit your copy.

Always confirm the exact path on the module UI article you are customizing.

Layouts

A UI layout wraps UI pages (headers, footers, auth chrome). For Razor, layouts are .cshtml files—override them with the same path override rules as other UI pages.

Where to look

UI layout kind Where it is documented
General-purpose Razor UI layout (_SimpleLayout, and similar) Razor components and pages
Module Razor UI layouts (Identity auth shell, Blogging, …) Tables below + the module UI article—for example Identity UI

Quick steps

  1. Copy the original .cshtml UI layout from the module UI article, from the UI components module, or from the DevKit repository.
  2. Put it in your client under Pages with the same relative path and file name.
  3. Edit your copy.

Razor layouts (.cshtml)

UI layout Role
_SimpleLayout.cshtml (shared library) Minimal server-rendered UI layout for simple or auth-related Razor UI pages.
_AuthenticationLayout.cshtml (Identity module) UI layout for login, register, password reset, and related Identity Razor UI pages.
_BloggingLayout.cshtml (Blogging module) UI layout for blog list and post UI pages.

_SimpleLayout.cshtml

@using CodeBlock.DevKit.Contracts.Models
@using CodeBlock.DevKit.Contracts.Services
@using CodeBlock.DevKit.Web.Blazor.Server.Components
@using Microsoft.AspNetCore.Hosting
@using Microsoft.AspNetCore.Mvc.ViewEngines
@using CodeBlock.DevKit.Web.Localization
@inject LocalizationSettings LocalizationSettings
@inject ApplicationSettings ApplicationSettings
@inject ISettingAccessorService SettingAccessorService
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html dir="@LocalizationSettings.GetCurrentLanguageDirection()" lang="@LocalizationSettings.GetCurrentLanguageCode()" style="font-family: @LocalizationSettings.GetCurrentLanguageFont() !important">
<head>

    <component type="typeof(HeadTags)" render-mode="ServerPrerendered" />
    <meta name="description" content="@ApplicationSettings.Localized.Description">
    <title>@ViewData["Title"]</title>
    <base href="~/" />
    <link href="css/cb.general.nspa.@(LocalizationSettings.GetCurrentLanguageDirection().ToLower()).min.css?v=1.6.0-beta5" rel="stylesheet" />
</head>
<body style="background-color:#362e6f; font-family: @LocalizationSettings.GetCurrentLanguageFont() !important">
   
    <div class="simple-layout-wrapper">
        <!-- Fullscreen Background -->
        <div class="simple-fullscreen-bg"></div>
        
        <!-- Animated Background -->
        <div class="bg-animation">
            <div class="floating-orb floating-orb-1"></div>
            <div class="floating-orb floating-orb-2"></div>
            <div class="floating-orb floating-orb-3"></div>
            <div class="floating-orb floating-orb-4"></div>
            <div class="floating-orb floating-orb-5"></div>
            <div class="floating-orb floating-orb-6"></div>
            <div class="floating-orb floating-orb-7"></div>
            <div class="floating-orb floating-orb-8"></div>
        </div>

        <div class="simple-language-wrapper">
            <partial name="_SelectLanguage" model="@("language-btn")" />
        </div>

        <div class="simple-container">
            <div class="simple-wrapper">
                <div class="simple-branding">
                    <a href="/" class="simple-brand-link">
                        @if (SettingAccessorService.Settings.Identity.ShowLogo)
                        {
                            <img class="simple-logo" src="/images/logos/logo.png" alt="@ApplicationSettings.Localized.Name" />
                        }

                        @if (SettingAccessorService.Settings.Identity.ShowAppName)
                        {
                            <h1 class="simple-app-name">@ApplicationSettings.Localized.Name</h1>
                        }
                        else if (!SettingAccessorService.Settings.Identity.ShowLogo)
                        {
                            <h1 class="simple-app-name">Welcome</h1>
                        }
                    </a>
                </div>
                @RenderBody()
            </div>
        </div>
    </div>

    <script src="~/js/cb.general.nspa.min.js?v=1.6.0-beta5"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

_AuthenticationLayout.cshtml

@{
    Layout = "_SimpleLayout";
}
@RenderBody()

_BloggingLayout.cshtml

@using CodeBlock.DevKit.Contracts.Models
@using CodeBlock.DevKit.Contracts.Services
@using CodeBlock.DevKit.Web.Blazor.Server.Components
@using CodeBlock.DevKit.Web.Localization
@inject LocalizationSettings LocalizationSettings
@inject ApplicationSettings ApplicationSettings
@inject ISettingAccessorService SettingAccessorService
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html dir="@LocalizationSettings.GetCurrentLanguageDirection()" lang="@LocalizationSettings.GetCurrentLanguageCode()" style="font-family: @LocalizationSettings.GetCurrentLanguageFont() !important">
<head>
    <component type="typeof(HeadTags)" render-mode="ServerPrerendered" />
    <meta name="description" content="@ApplicationSettings.Localized.Description">
    <title>@ViewData["Title"] - @ApplicationSettings.Localized.Name</title>
    <base href="~/" />
    <link href="css/cb.blog.nspa.@(LocalizationSettings.GetCurrentLanguageDirection().ToLower()).min.css?v=1.6.0-beta5" rel="stylesheet" />
</head>
<body class="blog-body" style="font-family: @LocalizationSettings.GetCurrentLanguageFont() !important; background-color: #ffffff;">
  
    @Html.Partial("_TopBar")

    @Html.Partial("_SideBar")

    @Html.Partial("_SearchModal")

    <main class="blog-main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 blog-content-area">
                    @RenderBody()
                </div>
            </div>
        </div>
    </main>

    @Html.Partial("_Footer")

    <script src="~/js/cb.blog.nspa.min.js?v=1.6.0-beta5"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Choosing a UI layout

  • Authentication (Razor) → _AuthenticationLayout.cshtml / _SimpleLayout.cshtml
  • Blogging (Razor) → _BloggingLayout.cshtml

Blazor shells (admin, user panel, pricing, public website) use .razor UI layouts — see Customizing Blazor UI — Layouts.

How module UI is loaded (Razor pages)

Module assemblies are registered in each client’s startup (same registration Blazor uses). Razor UI pages from those assemblies are available through that registration; you do not list every .cshtml assembly in Router AdditionalAssemblies the way you do for Blazor route tables.

WebApp startup (module registration):

using CanBeYours.Infrastructure;
using CodeBlock.DevKit.Clients.WebApp;

namespace CanBeYours.WebApp;

/// <summary>
/// Static configuration class for the WebApp client application.
/// This class demonstrates how to configure services and middleware pipeline using CodeBlock.DevKit.
/// The current setup shows a basic configuration - you can extend this with your own services,
/// authentication, logging, or other middleware while maintaining the same structure.
/// </summary>
internal static class Startup
{
    /// <summary>
    /// Configures the application services including WebApp client module and infrastructure.
    /// This method demonstrates how to add CodeBlock.DevKit modules and your own services.
    /// </summary>
    /// <param name="builder">The web application builder instance</param>
    /// <returns>Configured web application instance</returns>
    public static WebApplication ConfigureServices(this WebApplicationBuilder builder)
    {
        builder.AddWebAppClientModule(typeof(Startup));
        builder.Services.AddInfrastructureModule();

        return builder.Build();
    }

    /// <summary>
    /// Configures the application middleware pipeline including WebApp client module and infrastructure.
    /// This method demonstrates how to set up the request processing pipeline.
    /// </summary>
    /// <param name="app">The web application instance</param>
    /// <returns>Configured web application instance</returns>
    public static WebApplication ConfigurePipeline(this WebApplication app)
    {
        app.UseWebAppClientModule();
        app.Services.UseInfrastructureModule();
        return app;
    }
}

For Blazor App.razor and AdditionalAssemblies, see Customizing Blazor UI — How module UI is loaded.