Custom Themes

Last updated: May 13, 2026

The custom themes editor lets you take full control of your knowledge base's HTML, CSS, and JavaScript. Edit page layout templates, style everything with custom CSS, and add scripts -- all from a built-in code editor with live preview and draft/publish workflow.

Your theme builds on top of the branding defaults you've already configured in Brand center and Styling & customization. The theme editor is where you go when you need control beyond what those visual settings offer.

image.png
Built with Pylon's custom themes

Getting started

To open the theme editor, navigate to your knowledge base in the sidebar and click Code.

Theme files

The sidebar organizes your theme into four groups of editable files:

Layouts -- HTML templates that control the structure of each page type:

  • homepage -- The main landing page of your knowledge base

  • collections -- The page displayed when viewing a collection of articles

  • articles -- The page displayed when reading an individual article

Navigation -- Shared components rendered on every page:

  • navbar -- The top navigation bar

  • footer -- The bottom footer section

Styling:

  • styles.css -- Custom CSS that applies across all pages

Scripts:

  • scripts -- Custom JavaScript (e.g., analytics, third-party widgets)

Click any file in the sidebar to open it in the editor.

Template Syntax

Layout and navigation files use Go template syntax. Dynamic content is inserted using double curly braces: {{ }}. Below is a list of possible variables but the editor autocomplete dropdown contains the most complete, up to date list.

image.png

Variables available on all pages

These variables are available in every template file (homepage, collection, article, navbar, footer):

  • {{.KB.Title}} -- Knowledge base title

  • {{.KB.LogoURL}} -- Logo image URL (light mode)

  • {{.KB.LogoDarkURL}} -- Logo image URL (dark mode)

  • {{.KB.Header}} -- Banner headline text

  • {{.KB.Links}} -- Navigation links configured for this knowledge base

  • {{.Org.Name}} -- Organization name

  • {{.Org.BrandColorHex}} -- Brand color hex code (e.g. #4F46E5)

  • {{.CurrentPath}} -- Current page URL path

  • {{.PageType}} -- Page type (homepage, collection, or article)

  • {{.FaviconURL}} -- Favicon image URL

  • {{.Collections}} -- Top-level collections (for building navigation menus)

  • {{.Footer.LogoURL}} -- Footer logo image URL

  • {{.Footer.Sections}} -- Footer link sections

  • {{.Footer.SocialLinks}} -- Social media links

Homepage variables

In addition to the shared variables above, the homepage template has access to:

  • {{.PopularArticles}} -- Most-viewed articles

  • {{.BannerColorHex}} -- Banner background color hex code

  • {{.BannerImageURL}} -- Banner background image URL

  • {{.BackgroundType}} -- Banner background type (color, image, or empty for default)

  • {{.DarkText}} -- Whether banner text should be dark (true) or light (false)

Collection page variables

The collections template has access to:

  • {{.Collection}} -- The current collection object (.Title, .Slug, .Description, .Icon, .CustomIconURL, .ArticleCount, .URL)

  • {{.Articles}} -- Articles in this collection (each with .Title, .Slug, .URL)

  • {{.Subcollections}} -- Child collections

  • {{.Breadcrumbs}} -- Navigation breadcrumb trail (each with .Title, .URL)

  • {{.ActiveTopLevelCollectionURL}} -- URL of the top-level ancestor collection (useful for sidebar active states)

Article page variables

The articles template has access to:

  • {{.Article}} -- The current article object (.Title, .Slug, .Identifier, .LastUpdatedDisplay, .URL)

  • {{.ArticleHTML}} -- Rendered article body HTML

  • {{.Collection}} -- Parent collection (may be nil if the article is uncategorized)

  • {{.TOC}} -- Table of contents generated from article headings (each entry has .ID, .Title, .Level)

  • {{.RelatedArticles}} -- Related articles

  • {{.SectionArticles}} -- All articles in the same collection

  • {{.PreviousArticle}} / {{.NextArticle}} -- Adjacent articles in the same collection (nil if first/last)

  • {{.Breadcrumbs}} -- Navigation breadcrumb trail

Common template patterns

Looping over a list:

{{range .Collections}}
  <a href="{{.URL}}">{{.Title}}</a>
{{end}}

Conditional rendering:

{{if .NextArticle}}
  <a href="{{.NextArticle.URL}}">Next: {{.NextArticle.Title}}</a>
{{end}}

Looking up a specific collection by identifier:

{{with collection "getting-started"}}
  <a href="{{.URL}}">{{.Title}}</a>
{{end}}

Rendering the article body:

<div class="article-content">
  {{.ArticleHTML}}
</div>

Building a table of contents:

<nav>
  {{range .TOC}}
    <a href="#{{.ID}}">{{.Title}}</a>
  {{end}}
</nav>

Rendering footer sections with nested links:

{{range .Footer.Sections}}
  <div>
    <h4>{{.Title}}</h4>
    {{range .Links}}
      <a href="{{.URL}}">{{.Label}}</a>
    {{end}}
  </div>
{{end}}

Editing Workflow

Autosave

Changes are automatically saved as drafts as you type. You'll see:

  • A Draft badge next to the file name when there are unpublished changes

  • A "Saving..." or "Last saved..." indicator in the toolbar

image.png

Undoing changes

To discard your draft and revert a file to its last published version, click the undo button in the toolbar.

Template validation

The editor validates your templates in real time. If there are syntax errors in your Go templates, error indicators appear in the editor. All template errors must be fixed before you can publish.

Previewing

Click the Preview button in the toolbar to open a live preview of your knowledge base with all current draft changes applied. The preview opens in a new browser tab.

Use the preview to verify your layout, styling, and dynamic content before publishing.

Publishing

When you're ready to make your changes live:

  1. Click the Publish button in the toolbar

  2. A dropdown appears showing all modified files and how many have been changed

  3. To discard a specific file's draft, click the undo icon next to it

  4. Click Publish All to push all draft changes live

image.png

Important notes:

  • Publish All deploys all modified files at once -- you cannot publish individual files separately

  • Publishing is disabled if any template file has errors -- fix all errors first

  • Files that have not been modified are not affected by publishing