Customization

BlazorForge is designed to be customized. Every visible piece of the site is controlled by either a JSON config file or a Markdown file. You do not need to modify Razor components to change text, colors, or navigation.

This page covers the most common customizations.

Changing the Site Name and Logo

Site identity is stored in wwwroot/data/site.json.

Open the file with a text editor. You will see this structure:

{
  "site": {
    "name": "BlazorForge",
    "tagline": "Premium Blazor Web Themes for .NET Developers",
    "description": "Production-ready Blazor WebAssembly theme...",
    "url": "https://blazorforge.pages.dev",
    "language": "en",
    "locale": "en_US",
    "logo": {
      "text": "BlazorForge",
      "highlight": "Forge",
      "symbol": "microsoft-tiles"
    }
  }
}

The name field appears in the header and footer. Change it to your brand name.

The tagline field is used as a fallback for SEO when a page does not specify its own description.

The description field is longer text used in Open Graph previews.

The url field is the canonical URL of your site. Set this to your production domain.

The logo.text field is the full logo text shown in the header. The logo.highlight field is the part of the text that is colored differently. For example, if logo.text is BlazorForge and logo.highlight is Forge, the word Forge appears in the primary color.

Save the file. Reload the browser to see the change.

Changing the Navigation Menu

Navigation is stored in wwwroot/data/navbar.json.

The file has four sections.

The headerCta section defines the primary button in the top-right corner of the header.

The desktop section lists menu items shown on desktop screens.

The mobile section lists menu items shown on mobile with icon and description.

The mobileFooter section defines the status pill, version tag, call-to-action buttons, and meta text shown at the bottom of the mobile drawer.

To add a new menu item, add a new object to the desktop array:

{ "label": "Pricing", "href": "/pricing", "match": "prefix" }

The label field is the visible text. The href field is the link target. The match field is either exact for the home page or prefix for all other pages.

Do not forget the comma at the end of the previous item.

Save the file. Reload the browser.

Changing the Header CTA Button

The header call-to-action button is the primary button in the top-right corner.

You can change it in two places.

For a site-wide change, edit the headerCta section of wwwroot/data/navbar.json.

For a page-specific change, add a header_cta block to the frontmatter of the page. For example, in wwwroot/content/home.md:

header_cta:
  label: "Get BlazorForge"
  href: "https://creativitaz.gumroad.com/l/blazorforge"
  variant: "primary"

The variant field accepts primary, secondary, or white.

Page-specific values override the site-wide default.

Changing the Footer

Footer content is stored in wwwroot/data/footer.json.

The file has five sections.

The brand.description field is short text under the logo.

The trustLine field is a highlighted line under the brand description.

The socialOrder field controls the order of social icons.

The columns field is an array of footer columns, each with a heading and list of links.

The legal field contains the copyright text and legal links at the bottom.

To change the footer columns, edit the columns array. Each column has a heading string and a links array. Each link has a label and an href.

Save the file. Reload the browser.

Changing SEO Defaults

SEO defaults are stored in wwwroot/data/seo.json.

The file has three sections.

The defaults section defines the title template, title fallback, description, keywords, Open Graph image, Twitter Card settings, and image dimensions.

The organization section defines the Organization JSON-LD structured data. This includes the organization name, URL, logo, description, founding date, and social media profiles.

The robots section controls whether search engines should index and follow the site.

To change the title template, edit this line:

"titleTemplate": "%s | BlazorForge"

The %s placeholder is replaced with the page title. For example, if a page has the title About, the final title becomes About | BlazorForge.

Change it to your own format:

"titleTemplate": "%s — Your Brand"

Now page titles will look like About — Your Brand.

Changing Design Colors

All colors and design tokens are CSS variables defined at the top of wwwroot/css/style.css.

Open the file. The top section is called :root and contains all the variables.

:root {
  --color-primary: #0078D4;
  --color-primary-hover: #106EBE;
  --color-primary-light: #EFF6FC;
  --bg-primary: #FFFFFF;
  --bg-alt: #F8F9FA;
  --text-primary: #1F242E;
  --text-secondary: #5A6270;
  --border-light: #E5E7EB;
  --space-4: 16px;
  --radius-md: 10px;
}

To change the primary brand color, edit --color-primary. For example, to use a green brand:

--color-primary: #107C41;
--color-primary-hover: #0B5C30;
--color-primary-light: #E8F5E9;

Every button, link, and highlight updates automatically.

To change the border radius of cards and buttons, edit --radius-md.

To change global spacing, edit the --space-* variables. The values follow an eight-pixel grid.

Save the file. Reload the browser.

Editing Page Content

Each page has its own Markdown file in wwwroot/content/.

The home page is wwwroot/content/home.md.

The about page is wwwroot/content/about.md.

The contact page is wwwroot/content/contact.md.

The journal index is wwwroot/content/journal.md.

The services index is wwwroot/content/services.md.

Each file has YAML frontmatter at the top, between two --- lines. Below the frontmatter is the Markdown body.

Edit any value in the frontmatter or body. Save the file.

After editing, run the Markdown compiler to regenerate metadata:

cd Tools
dotnet run
cd ..

Or simply restart the Blazor site:

dotnet run

The compiler runs automatically during the build.

Adding a New Journal Article

Create a new file in wwwroot/content/journal/. The filename becomes the slug automatically, or you can set a slug field in the frontmatter.

A journal article needs this frontmatter:

---
title: "Your Article Title"
slug: "your-article-slug"
author: "Your Name"
author_role: "Your Role"
author_bio: "Short bio of the author."
date: 2026-10-16
category: "Category Name"
category_tag: "Category // Subcategory"
reading_time: "5 min read"
featured: false
tags:
  - "Tag1"
  - "Tag2"
excerpt: "Short summary of the article."
cover_image: "https://images.unsplash.com/photo-example"
cover_alt: "Alt text for cover image"
seo:
  title: "SEO Title Override"
  description: "SEO description."
  keywords: ["keyword1", "keyword2"]
  og_type: "article"
  canonical: "https://yoursite.com/journal/your-article-slug"
  og_image: "/images/Blazor.png"
---

Write the article body in Markdown below the frontmatter.

Save the file. Run the compiler. The article appears in the journal listing.

Adding a New Service Page

Create a new file in wwwroot/content/services/. The structure is similar to journal articles but with service-specific fields.

---
title: "Your Service Title"
slug: "your-service-slug"
badge: "Service #01"
icon: "⚡"
excerpt: "Short description of the service."
cover_image: "https://images.unsplash.com/photo-example"
cover_alt: "Alt text for cover image"
features:
  - "Feature 1"
  - "Feature 2"
  - "Feature 3"
specs:
  - title: "Starting Price"
    value: "From $650"
  - title: "Technology"
    value: "Your tech stack"
card_cta_label: "View Service Details"
cta_label: "Hire on Fiverr"
cta_href: "/services/your-service-slug"
external_cta_label: "Hire on Fiverr"
external_cta_href: "https://www.fiverr.com/your-link"
seo:
  title: "SEO Title"
  description: "SEO description."
  keywords: ["keyword1", "keyword2"]
  og_type: "article"
  canonical: "https://yoursite.com/services/your-service-slug"
  og_image: "/images/Blazor.png"
---

Write the service description in Markdown below the frontmatter.

Adding a New Static Page

For a simple static page, create a new Markdown file in wwwroot/content/:

---
title: "Your Page Title"
slug: "your-page"
seo:
  description: "SEO description."
  keywords: ["keyword1", "keyword2"]
header:
  tag: "Section Tag"
  heading: "Your Page Heading"
  subtitle: "Subtitle text."
---

Your Markdown content here.

Then create a Razor page in Pages/YourPage.razor:

@page "/your-page"
@inject MarkdownService Md
@inject SeoService Seo

<PageTitle>@(page?.Title ?? "Your Page")</PageTitle>

@if (page is null)
{
    <div class="container section"><p>Loading…</p></div>
}
else
{
    <section class="section">
        <div class="container">
            <h1>@page.Title</h1>
            @((MarkupString)page.BodyHtml)
        </div>
    </section>
}

@code {
    private PageContent? page;

    protected override async Task OnInitializedAsync()
    {
        page = await Md.GetYourPageAsync();

        if (page is not null)
        {
            Seo.Set(
                title: page.Title,
                description: page.Seo.Description,
                keywords: page.Seo.Keywords);
        }
    }
}

Add a method to MarkdownService to load the new file:

public Task<PageContent?> GetYourPageAsync()
    => GetCachedAsync<PageContent>("metadata/your-page.json");

Run the compiler and the new page is available at /your-page.

Using Decap CMS for Customization

If you prefer a browser interface, you can use Decap CMS for most customizations.

Site identity, SEO settings, navigation, footer, and widgets are all editable through the CMS under Site Settings.

Page content is editable under Pages.

Journal articles are editable under Engineering Journal.

Service pages are editable under Themes & Services.

See Content Editing with Decap CMS for setup instructions.

What Cannot Be Customized Through Config

Some customizations require editing Razor components directly.

The structure of the home page, about page, and contact page is defined in the corresponding Razor files in Pages/.

The component library is defined in Shared/Components/.

The SEO meta tag rendering is defined in Services/SeoService.cs.

The Markdown compiler is defined in Tools/MarkdownCompiler.cs.

For details on modifying these files, see the Developer Guide.

Next Steps

For common questions after customization, see FAQ.

For developer-focused customization, see the Developer Guide starting at Architecture Overview.