Default HTML

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>

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>

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>

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>

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>

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.

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

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>

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>

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>

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>

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.

<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>