This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Homepage. You can use it for reference or copy/paste it in and resave to return to the original default state.

For the default HTML for Customize > Homepage for older knowledge bases that use that HTML, refer to Default Homepage Article HTML.

<div class="ko-homepage-top">
    <h1 class="hg-article-title xcolor">[homepage("title")]</h1>
    [template("large-search")]
</div>
<div class="hg-article">
    <div class="hg-article-body">
        <div>[template("icon-cats,max=8,col=4,desc=0")]</div>
        <div>[homepage("body")]</div>
        <div class="homepage-widgets row">
            <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
            <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
            <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
        </div>
    </div>
</div>

Default Body HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Body. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="row hg-site-body slideout-new">
    [template("layout")]
  {{snippet.backToTop}}
</div>
<div class="row ko-site-footer text-center xsize">
    <div>Copyright © 2025 Your Company, LLC. All rights reserved.
        <br>Made with <a href="https://www.knowledgeowl.com" target="_blank">KnowledgeOwl</a> <img class="ko-logo" src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/65cbb573a7123f123624c722/n/favicon-32px.svg">
    </div>
</div>

Default Top Navigation HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Top Navigation. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="navbar-header">
    [template("slideout-left-toggle")]
    <a class="navbar-brand" href="/[template("rootpath")]" title="[template("project-name")]">[template("project-logo")]</a>
    <div class="hg-project-name">[template("project-name")]</div>
    <div class="nav-left-searchbar hidden-xs">
        [template("searchbar")]
    </div>
    <button type="button" class="navbar-toggle toc-toggle pull-left clear-left" data-toggle="collapse" data-target=".documentation-categories">
        <span class="sr-only">[translation("top-navigation:table-of-contents")]</span>
        <span class="browse">[translation("top-navigation:table-of-contents")]</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    [template("slideout-right-toggle")]
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">[translation("top-navigation:toggle-navigation")]</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
    [template("slideout-right-toggle")]
    <ul class="nav navbar-nav navbar-right">
        <li>[template("searchbar")]</li>
        <li>[template("contact")]</li>
        <li>[template("login")]</li>
    </ul>
</div>

Default Article HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Article. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="hg-article">
    <div class="hg-article-header">
        <h1 class="hg-article-title">[article("title")][article("action_icons")]</h1>
        <div class="metadata">
            [article("required_reading_flag")]
            [translation("article:last-modified-on-label")] 
            [article("date_modified")]
        </div>
    </div>
    <div class="hg-article-body">
        [article("body")]
        [article("required_reading_acknowledgement")]
    </div>
    <div class="hg-article-footer clear-both">
        <div class="ko-related-articles text-center">
            <h3>[translation("article:related-articles-heading")]</h3>
            [template("related")]
        </div>
        [template("rating")]
        [template("comments")]
    </div>
</div>

Default Article Version HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Article Version. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="hg-article">
    <div class="hg-article-header">
        <h1 class="hg-article-title">[article("title")][article("action_icons")]</h1>
        <div class="version-metadata">
            <div class="version-number">[translation("article:version-number")] [article("version")]</div>
            <div class="version-author">[translation("article:version-author")] [article("version_author")]</div>
            <div class="version-creation-date">[translation("article:version-date-created")] [article("version_created")]</div>
            <div class="version-activation-date">[translation("article:version-date-activated")] [article("version_activated")]</div>
            <div class="version-activation-author">[translation("article:version-activating-author")] [article("version_activated_by")]</div>
            <div class="version-deactivation-date">[translation("article:version-date-deactivated")] [article("version_deactivated")]</div>
            <div class="version-deactivation-author">[translation("article:version-deactivating-author")] [article("version_deactivated_by")]</div>
        </div>
    </div>
    <div class="hg-article-body">
        [article("body")]
    </div>
    <div class="hg-article-footer">
        <div class="ko-related-articles text-center">
            <h3>[translation("article:related-articles-heading")]</h3>
            [template("related")]
        </div>
    </div>
</div>

Default Login HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Login Page. You can use it for reference or copy/paste it in and resave to return to the original default state.

Login page only
This is for the Login Page. Default HTML to add a login link back to your Top Navigation is in Default Top Navigation HTML.

<div class="container login-container">
 [template("login-page")]
</div>

Default Manage Reader Subscriptions HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Manage Reader Subscriptions. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="container reader-subscriptions-container">
	[template("readersubscriptions-page")]
</div>

Default 404 Error Page HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > 404 Error Page. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="documentation-article">
    <div class="ko-content-cntr">
        <div class="hg-article">
            <div class="error-page-top text-center">
                <h1 class="top-marginless">Uh oh! We’re sorry.</h1>
                <h2>We weren't able to find that page.</h2>
                <h3>Try a search or let us take you <a href="/[template("rootpath")]">home</a>.</h3>
                [template("large-search")]
            </div>
            <div class="homepage-widgets">
                <div class="col-md-4">
                    <h3>[translation("article-lists:popular-articles")]</h3>
                    [template("pop-articles")]
                </div>
                <div class="col-md-4">
                    <h3>[translation("article-lists:updated-articles")]</h3>
                    [template("up-articles")]
                </div>
                <div class="col-md-4">
                    <h3>[translation("article-lists:new-articles")]</h3>
                    [template("new-articles")]
                </div>
            </div>
        </div>
    </div>
</div>

Default Restricted Access Page HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Login. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="hg-site-login">
    <div class="alert alert-danger text-center">
        <h4><i class="fa fa-exclamation-triangle"></i> You do not have access to view this content.</h4>
    </div>
</div>

Default Right Column HTML

This is the default HTML for Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Right Column. You can use it for reference or copy/paste it in and resave to return to the original default state.

<div class="panel panel-default right-col-panel art-info-panel">
    <div class="panel-heading">About this Article</div>
      <ul class="list-unstyled stat-list">
        <li>Created: [article("date_created")]</li>
        <li>Last updated: [article("date_modified")]</li>
        <li class="hg-article-controls-right">
            [article("action_icons")]
        </li>
    </ul>
</div>

Default Homepage Article HTML (deprecated)

This is the default HTML for the Customize > Homepage content editor used in older knowledge bases. You can use it for reference or copy/paste it in and resave to return an older knowledge base to the original default state.

For the default HTML in Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Homepage, refer to Default Homepage HTML.

Only for older knowledge bases
This default HTML was used in knowledge bases created before 14 December 2022. New knowledge bases created after that date do not use Homepage and instead store all their HTML in Customize > Style (HTML & CSS) > Customize HTML, CSS, and JS > Custom HTML > Homepage. Only use the HTML below if you're restoring the theme on an older knowledge base.

<div>[template("icon-cats")]</div>
<div class="homepage-widgets">
<div class="col-md-4 col-sm-6">
    <h3>[translation("article-lists:popular-articles")]</h3>
    [template("pop-articles")]</div>
<div class="col-md-4 col-sm-6">
    <h3>[translation("article-lists:new-articles")]</h3>
    [template("new-articles")]</div>
<div class="visible-sm clear-both"></div>
<div class="col-md-4 col-sm-6">
    <h3>[translation("article-lists:updated-articles"]</h3>
    [template("up-articles")]</div>
</div>

Was this article helpful?

Knowledge 1 Knowledge 2 Knowledge From

Default HTML

Default Homepage HTML