Default HTML and CSS

This is the default HTML for Settings > Style > 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 Knowledge Base > Homepage for older knowledge bases that use that HTML, see 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">
 [homepage("body")]
 </div>
</div>

This is the default HTML for Settings > Style > 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")]
  

</div>
<div class="row ko-site-footer text-center xsize">
    <div>Copyright © 2023 – 2024 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 Settings > Style > 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")]" alt="Logo" title="Your site">[template("project-logo")]</a>
 <h1 class="hg-project-name">[template("project-name")]</h1>
 <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">Table of Contents</span>
 <span class="browse">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">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 Settings > Style > 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")]
            <span class="ko-article-actions">
                <span class="pdf">[article("pdf_download_tool")]</span>
                <a href="#" class="ko-js-print">
                    <i class="fa fa-print fa-fw"></i>
                </a>
                <script>
                function sendEmail() { 
                    var title = '[article("title")]'.replace("'", "\'").replace("&#039;", "\'"); 
                    window.location = 'mailto:?subject=' + title + '&body=' + window.location; 
                    }
                </script>
                <a href="#" onclick="sendEmail()">
                    <i class="fa fa-envelope-o fa-fw"></i>
                </a>
            </span>
        </h1>
        <div class="metadata">Last Modified on [article("date_modified")]</div>
    </div>
    <div class="hg-article-body">
        [article("body")]
    </div>
    <div class="hg-article-footer">
        <div class="ko-related-articles text-center">
            <h3>Related Articles</h3>
            [template("related")]
        </div>
        [template("rating")]
        [template("comments")]
    </div>
</div>

This is the default HTML for Settings > Style > 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 Settings > Style > 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 Settings > Style > 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 Settings > Style > 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="/help">home</a>.</h3>
                [template("large-search")]
            </div>
            <div class="homepage-widgets">
                <div class="col-md-4">
                    <h3>Popular Articles</h3>
                    [template("pop-articles")]
                </div>
                <div class="col-md-4">
                    <h3>Recently Updated Articles</h3>
                    [template("up-articles")]
                </div>
                <div class="col-md-4">
                    <h3>New Articles</h3>
                    [template("new-articles")]
                </div>
            </div>
        </div>
    </div>
</div>

This is the default HTML for Settings > Style > 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 Settings > Style > 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">
 <a href="#" class="js-print"><i class="fa fa-print fa-fw"></i></a>
 <a href="#">[article("pdf_download_tool")]</a>
 <a href="#" onclick="javascript:window.location='mailto:?subject=[article("title")]&body=' + window.location;"><i class="fa fa-envelope-o fa-fw"></i></a>
 </li>
 </ul>
</div>
<div class="panel panel-default right-col-panel related-panel">
 <div class="panel-heading">Related Articles</div>
 [template("related")]
</div>
<div class="panel panel-default right-col-panel feedback-panel">
 <div class="panel-heading">Was this article helpful? </div>
 [template("rating")]
</div>
<div class="panel panel-default right-col-panel pop-panel">
 <div class="panel-heading">Most Popular</div>
 [template("pop-articles")]
</div>
<div class="panel panel-default right-col-panel new-panel">
 <div class="panel-heading">Newest</div>
 [template("new-articles")]
</div>
<div class="panel panel-default right-col-panel recent-panel">
 <div class="panel-heading">Recently Updated </div>
 [template("up-articles")]
</div>

This is the default HTML for Settings > Style > Custom CSS. You can use it for reference or copy/paste it in and resave to return to the original default state.

/******************************************************** General structure ****************************/
/* smooth article resizing on TOC open/close */ 
.hg-minimalist-theme #ko-article-cntr {
  transition: all 300ms ease-in-out;
  width: 100%;
}
/* hide right col when TOC open */
.hg-minimalist-theme #ko-article-cntr.slideout-panel-left.open+.col-lg-3.visible-lg.right-column {
  opacity: 0;
  visibility: hidden;
}
/* size and position right column if in use */
.hg-minimalist-theme.hg-3column-layout .right-column {
  top: 65px;
  padding-right: 35px;
  z-index: 2;
  max-width: calc((100vw - 920px) / 2);
  transition: all 200ms ease-in-out;
  opacity: 1;
}
/* make sure footer is full width */
.hg-minimalist-theme.hg-3column-layout .ko-site-footer {
  width: 100%;
}
/* self clear page contents */
.documentation-body::after {
  content: "";
  display: table;
}
/* make site background white */
.hg-minimalist-theme .documentation-body {
  background: #ffffff;
}
.hg-site {
  background: #ffffff;
}

/******************************************************** Font overrides *************************/
/* color for h1 */
.hg-minimalist-theme .documentation-article h1 {
  color: #1d284f;
}
/* article content h2 size */
.documentation-article h2 {
  font-size: 28px;
}
/* article content h3 size */
.documentation-article h3 {
  font-size: 24px;
}
/* article content h4 size */
.documentation-article h4 {
  font-size: 18px;
}
/* default color of a text (links) */
.hg-minimalist-theme a:not(.btn),
a:not(.btn) {
  color: #3C80BA;
}
/* remove bottom margin from paragraphs in article content */
.documentation-article p {
  margin-bottom: 0;
}
/* force default font size for blockquote */
blockquote {
  font-size: inherit;
}
/* override default font size for home page search bar */
.hg-minimalist-theme .ko-large-search input.form-control {
  font-size: 15px;
}

/******************************************************** Topic Category styles **********************/
/* remove top border, bottom margin from title container */
.hg-minimalist-theme .topics-top-wrapper {
  border-bottom: none;
  margin-bottom: 0px;
}
/* remove border, add padding for topic articles */
.hg-minimalist-theme .topics-articles .hg-article-body,
.hg-minimalist-theme .hg-category-page .hg-article-body {
  border-bottom: none;
  padding-bottom: 40px;
}
/* remove padding between topic articles */
.hg-minimalist-theme .topics-articles .hg-article-body {
  padding-bottom: 0px;
}
/* topic aricle h2 size */
.documentation-article .topics-articles h2.hg-article-title {
  font-size: 24px;
}
/* topic aricle h3 size */
.documentation-article .topics-articles h3 {
  font-size: 18px;
}
/* topic aricle h4 size */
.documentation-article .topics-articles h4 {
  font-size: 16px;
}

/******************************************************** Default Category Styles *********************/
/* add top and bottom margin to category panels */
.hg-minimalist-theme .category-list {
  margin-bottom: 40px;
  margin-top: 40px;
}
/* remove bottom border from title */
.hg-minimalist-theme .faq-header {
  border-bottom: none;
}
/* remove right margin from category description */
.hg-minimalist-theme .faq-top-description {
  margin-right: 0;
}
/* change category panels into 2x2 grid */
.hg-minimalist-theme .faq-nav-content .category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  grid-auto-rows: 1fr;
}
/* get rid of psuedo html elements */
.hg-minimalist-theme .faq-nav-content .category-list .clear-left,
.hg-minimalist-theme .faq-nav-content .category-list .clear-both {
  display: none !important;
}
/* style category panels */
.hg-minimalist-theme .faq-nav-content .faq-cat-container {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  transition: all .2s ease-in-out;
  backface-visibility: hidden;
}
/* hover effect for category panels */
.hg-minimalist-theme .faq-nav-content .faq-cat-container:hover {
  background-color: #fff;
  box-shadow: 2px 4px 4px #aeaeae;
  transform: scale(1.01) translateZ(0);
}
/* add bottom margin to list of articles */
.hg-minimalist-theme .faq-nav-content {
  margin-bottom: 40px;
}
/* remove right margin from category title */
.hg-minimalist-theme .faq-header {
  margin-right: 0;
}
/* hide h2 Articles from default categories */
.hg-minimalist-theme .faq-nav-content h2 {
  display: none;
}
/* Force main area to be full width */
.hg-minimalist-theme .hg-category-page .category-list .col-md-6.col-lg-4 {
  width: 100% !important;
}
/* adjust position of subscribe button */
.hg-minimalist-theme .ko-cat-sub-cntr {
  margin-top: 12px;
  margin-right: 0;
}
/* apply hover effects to subscribe button */
.hg-minimalist-theme .btn.btn-default.ko-cat-sub {
  border: 1px solid #b3b3b3;
  transition: all .1s ease-in-out;
  backface-visibility: hidden;
}
.hg-minimalist-theme .btn.btn-default.ko-cat-sub:hover {
  box-shadow: 1px 2px 2px #aeaeae;
  transform: scale(1.01) translateZ(0);
}
/* subcategory panel display tweaks */
.hg-minimalist-theme .faq-nav-content .faq-cat-panel-container {
  padding: 0;
}
.hg-minimalist-theme .faq-nav-content .faq-cat-panel {
  border: none;
  box-shadow: none;
  border-radius: 4px;
}
/* subcategory content-list display tweaks */
.hg-minimalist-theme .category-list.faq-content-list {
  margin-bottom: 0;
}
.hg-minimalist-theme .faq-content-list-container {
  width: auto;
  padding: 0;
}
.hg-minimalist-theme .faq-content-list-container .category-header {
  border-bottom: none;
  margin-bottom: 10px;
}
.hg-minimalist-theme .faq-nav-content .article-block div {
  margin-left: 0;
}

/******************************************************** Table of Contents ***********/
/* add border and box-shadow to TOC */
.hg-minimalist-theme.hg-2column-layout .slideout-menu {
  display: block;
  padding: 0;
  box-shadow: none;
  border: 1px solid #ddd;
  border-radius: 0 4px 0 0;
  background-color: #F8F4F1;
  left: -360px;
  transition: all 300ms ease-in-out;
}
/* remove TOC padding */
.hg-minimalist-theme .hg-site-body .documentation-outter-list {
  padding: 0;
}
/* style top level content */
.hg-minimalist-theme .documentation-categories li.level-0,
.hg-minimalist-theme .documentation-outter-list > .article-container {
  border-bottom: 0;
  padding: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
/* style child content containers */
.hg-minimalist-theme .documentation-categories li {
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.hg-minimalist-theme .documentation-categories li.level-0 > .category-link-container,
.hg-minimalist-theme .documentation-outter-list > .article-container {
  padding: 5px 10px;
}
/* style top level articles */
.hg-minimalist-theme .documentation-outter-list > .article-container .article-link {
  padding: 0 5px;
  line-height: 33px;
}
/* background color for active and hovered child content */
.hg-minimalist-theme .documentation-categories li.active,
.hg-minimalist-theme .category-link-container.active,
.hg-minimalist-theme .documentation-categories .article-container:hover,
.hg-minimalist-theme .documentation-categories li a:hover,
.hg-minimalist-theme .category-link-container:hover {
  background-color: #e8e8e8;
}
/* background color for active and hovered top level content */
.hg-minimalist-theme .level-0 > .category-link-container:hover,
.hg-minimalist-theme .level-0 > .category-link-container.active,
.hg-minimalist-theme .documentation-outter-list > .article-container:hover,
.hg-minimalist-theme .documentation-outter-list > .article-container.active,
.hg-minimalist-theme .documentation-outter-list > .article-container .article-link:hover,
.hg-minimalist-theme .documentation-outter-list > .article-container .article-link.active {
  background-color: #f2e9e3;
  border-radius: 0;
}
.hg-minimalist-theme .documentation-categories .level-0 > .category-link-container a:hover {
  background-color: #f2e9e3;
}
/* override default toc slideout behavior */
.hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
  transform: translateX(360px);
  width: calc(100% - 360px);
}
/* Change TOC chevron-right to plus-square */
.hg-minimalist-theme .documentation-categories .fa-chevron-right:before {
  content: "\f0fe" !important;
}
/* Change TOC chevron-down to minus-square */
.hg-minimalist-theme .documentation-categories .fa-chevron-down:before {
  content: "\f146" !important;
}
/* make icons slightly larger */
.hg-minimalist-theme .cat-icon, .hg-minimalist-theme .home-icon, .hg-minimalist-theme .alt-icon {
  padding: 8px 0 0 6px;
  font-size: 18px;
}
/* override default box shadow when side TOC is open */
.hg-minimalist-theme .documentation-categories.slideout-menu.open {
  box-shadow: 2px 4px 4px #aeaeae;
  left: 0;
}

/********************************************************* Modals ********************/
/* adjust input border width in modals */
.hg-minimalist-theme .modal .form-control {
  border-width: 1px;
}

/********************************************************* PDF Adjustments ***********/
/* hide .pdf-header outside of actual PDFs */
.hg-minimalist-theme .pdf-header {
  display: none;
}
/* show .pdf-header in actual PDFs */
.hg-minimalist-theme .hg-pdf .pdf-header {
  display: block;
}
/* height of image in .pdf-header */
.hg-minimalist-theme .hg-pdf .pdf-header img {
  height: 80px;
}

/******************************************************** Home Page Top and General */
/* get rid of background banner and add some padding to top of home page */
.hg-minimalist-theme .ko-homepage-top {
  background: none;
  padding-top: 2em;
  padding-bottom: 0em;
}
/* make sure category title is clickable */
.hg-minimalist-theme .hg-home-page .category-header {
  z-index: 2;
}
/* change default color for home page title */
.hg-minimalist-theme .ko-homepage-top .hg-article-title {
  color: #1d284f;
}

/******************************************************** Content Lists */
/* tweak padding and line heights */
.hg-minimalist-theme .stat-list {
  line-height: 1.3;
  font-size: 14px;
  margin-left: 1px;
}
.hg-minimalist-theme .stat-list li {
  padding: 4px 0;
}
/* remove bottom border from page title */
.hg-minimalist-theme .page-header {
  border-bottom: none;
}
/* remove border above "see more..." */
.hg-minimalist-theme .list-action {
  border-top: none;
}
/* correct margin and padding for content lists on homepage */
.hg-minimalist-theme .homepage-widgets {
  margin: 2em -15px;
}
.hg-minimalist-theme .homepage-widgets .col-md-4.col-sm-6 {
  padding-left: 15px;
}

/******************************************************** Search Bar */
/* remove border from individual search bar elements */
.hg-minimalist-theme .hg-search-bar input.form-control,
.hg-minimalist-theme .input-group-btn .btn,
.hg-minimalist-theme .input-group-btn .btn:hover,
.hg-minimalist-theme .hg-search-bar input.form-control:focus,
.hg-minimalist-theme .input-group-btn .btn:focus,
.hg-minimalist-theme .input-group-btn .btn-default.dropdown-toggle:active,
.hg-minimalist-theme .input-group-btn .btn-default.dropdown-toggle:focus {
  border: none;
}
/* add border to outer search bar */
.hg-minimalist-theme .hg-search-bar .input-group {
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  transition: border .25s linear,color .25s linear,background-color .25s linear;
}
/* change border color on focus/active */
.hg-minimalist-theme .hg-search-bar .input-group:active,
.hg-minimalist-theme .hg-search-bar .input-group:focus,
.hg-minimalist-theme .hg-search-bar .input-group:focus-within {
  border: 1px solid #f8b88b;
}
/* remove background color from search button */
.hg-minimalist-theme .input-group-btn .btn {
  background: none;
}
/* adjust color and sizing for the refine button */
.hg-minimalist-theme .input-group-btn .btn-default.dropdown-toggle {
  color: #1d284f;
  font-size: 16px;
  border: none;
}
/* restyle the dropdown caret */
.hg-search-bar .category-dropdown .dropdown-toggle .caret {
  border: none;
  display: inline;
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  font-size: 14px;
}
.hg-search-bar .category-dropdown .dropdown-toggle .caret::before {
  content: "\f0d7";
}
/* change font color and remove border for search button */
.hg-minimalist-theme span.input-group-btn .btn-default,
.hg-minimalist-theme span.input-group-btn .btn-default:hover {
  color: #E6E6E6;
  border-left: none;
}
.hg-minimalist-theme .ko-large-search input.form-control,
.hg-minimalist-theme .hg-search-bar input.form-control {
  border-right: none;
}
/* add box-shadow to search bar */
.hg-minimalist-theme .input-group {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
}
/* remove box shadow from type-ahead suggestion box */
.hg-minimalist-theme .navbar-collapse.in .input-group,
.hg-minimalist-theme .navbar-collapse.collapsing .input-group {
  box-shadow: none;
}
/* handle styles for showing/hiding type-ahead suggestion box */
.hg-minimalist-theme #navbar-collapse.in,
.hg-minimalist-theme #navbar-collapse.collapsing {
  margin-bottom: 0;
  padding: 10px;
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 10px 20px -8px #ccc;
}

/******************************************************** Search Pages */
/* adjust bottom spacing page titles and containers */
.hg-minimalist-theme .recommended-container h2,
.hg-minimalist-theme .hg-contact-form-container h2,
.hg-minimalist-theme .hg-article-search {
  margin-bottom: 40px;
}
/* add bottom margin to search controls */
.hg-minimalist-theme .ko-srch-meta-cntr {
  margin-bottom: 20px;
}
/* add more top margin to full search results */
.hg-minimalist-theme #homepage-search-form .hg-article-search {
  margin-top: 20px;
}
/* remove bottom spacing from recommended article titles */
.hg-minimalist-theme .hg-article-search h4 {
  margin-bottom: 0;
}
/* increase space between article results */
.hg-minimalist-theme .hg-article-search li {
  margin-bottom: 25px;
}
/* adjust size/spacing of article meta data */
.hg-minimalist-theme .hg-article-info {
  font-size: 12px;
  margin-bottom: 5px;
}
/* add spacing after article blurbs */
.hg-minimalist-theme .hg-article-blurb {
  margin-bottom: 25px;
}
/* make last modified text for recommended articles smaller */
.hg-minimalist-theme .hg-article-search .hg-date {
  font-size: 14px;
}
/* adjust font size and line height for contact form labels */
.hg-minimalist-theme .hg-contact-form-container label {
  font-size: 18px;
  line-height: 1.3;
}
/* decrease width of contact form field borders */
.hg-minimalist-theme .hg-contact-form-container .form-control {
  border: 1px solid #bdc3c7;
}
/* update colors for the results paging buttons */
.hg-minimalist-theme .ko-search-pager li.current {
  background: #1d284f;
}
.hg-minimalist-theme div.ko-search-pager .pull-left:not(.current) a:not(.btn) {
  color: #1d284f;
}
.hg-minimalist-theme div.ko-search-pager .pull-left:not(.current) a:not(.btn):hover {
  color: #f8b88b;
}

/******************************************************** Tables ***************************************/
/* adjust table header cell styles */
.table-bordered > thead > tr > th {
  background-color: #1d284f;
  color: #ffffff;
  padding-left: 1em;
}
/* give left aligned cells some left padding */
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td,
table.table-bordered tr td[style*="text-align: left"] {
  padding-left: 1em;
}

/******************************************************** Article HTML ***************************************/
/* add some padding to line items */
.hg-article-body ol li {
  padding: 10px 0;
}
/* first level - use regular numeric decimals  */
.hg-article-body ol {
  list-style-type: decimal;
}
/* second level - use lowercase alphabetic */
.hg-article-body ol > li > ol {
  list-style-type: lower-alpha;
}
/* third level - use lowercase Roman numerals */
.hg-article-body ol > li > ol > li > ol {
  list-style-type: lower-roman;
}
/* optional .article-block styles */
.article-block div {
  margin-left: 20px;
  font-size: 15px;
  line-height: 1.2;
}
/* default margin for p in lists */
.hg-article-body ul p,
.hg-article-body ol p {
  margin: 20px 0 0;
}
/* give more top space to article ratings */
.hg-minimalist-theme .hg-ratings {
  margin-top: 15px;
}
/* space out the article rating thumbs */
.hg-minimalist-theme .hg-ratings .hg-helpful {
  margin-right: 20px;
}
/* styles for check-list bullet points */
ul.check-list {
  list-style: none;
  padding-left: 0;
}
ul.check-list li {
  position: relative;
  padding-left: 1.5em;
}
ul.check-list li:before {
  font-family: 'FontAwesome';
  content: "\f00c" !important;
  padding-right: 0.5em;
  font-size: smaller;
  color: green;
}
/* remove top border from comment form */
.hg-minimalist-theme #hg-comment-form {
  border-top: none;
}

/******************************************************** List pages ************/
/* remove top border from glossary page */
.hg-minimalist-theme .glossary-letter ~ .glossary-letter {
  border-top: none;
}
/* left align article lists */
.hg-minimalist-theme .hg-widget-page .ko-content-cntr ol {
  padding-inline-start: 20px;
}

/******************************************************** Alert boxes ***********/
/* give alerts, wells, pre some top margin */
.alert, .well, pre {
  margin-top: 20px;
}
/* icon styling for all alerts */
.alert::before {
  display: block;
  width: 65px;
  height: 60px;
  float: left;
  margin-top: 0px;
  font-size: 48px;
  font-weight: 900;
  font-family: 'Font Awesome 6 Pro';
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  line-height: 60px;
  text-rendering: auto;
}
/* danger alert styling */
.alert.alert-danger {
  background: #F4E2E2;
  border: 1px solid #E6ADA9;
}
.alert.alert-danger:before {
  content: "\f071";
  color: #f8918b;
}
/* info alert styling */
.alert.alert-info {
  background: #F0F7FD;
  border: 1px solid #69B2F0;
}
.alert.alert-info:before {
  content: "\f05a";
  color: #97c4ed;
}
/* success alert styling */
.alert.alert-success {
  background: #F8FBF9;
  border: 1px solid #BDDCBC;
}
.alert.alert-success:before {
  content: "\f058";
  color: #9bdbae;
}
/* warning alert styling */
.alert.alert-warning {
  background: #FDF9E6;
  border: 1px solid #FBD9A4;
}
.alert.alert-warning:before {
  content: "\f8fa";
  color: #ffcc7a;
}
/* remove top margin from p tags in alerts */
.alert.alert-info p,
.alert.alert-success p,
.alert.alert-warning p,
.well p {
  margin-top: 0;
}
/* make sure there is vertical room icons in alerts */
.alert.alert-info,
.alert.alert-success,
.alert.alert-danger,
.alert.alert-warning {
  min-height: 90px;
}
/* Offset lists that are within alert divs */
.alert ul,
.alert ol {
  margin-left: 75px;
}

/******************************************************************************* Image Captions *****/
/* Set dark background for captions */
.hg-minimalist-theme .documentation-article .fr-img-caption .fr-img-wrap>span {
  background: #1d284f;
}
/* Remove border for image captions */
.hg-minimalist-theme .documentation-article span.fr-img-caption {
  border: none;
}
/* Fix hyperlinks in image captions, now that we have the dark background */
.hg-minimalist-theme span.fr-inner a {
  color: #F6A267;
  text-decoration: none;
}
/* Image caption hyperlinks should be a different color and underlined on-hover */
.hg-minimalist-theme .fr-inner a:hover {
  color: #F8B88B;
  text-decoration: underline;
}

/********************************************* Back to top snippet styling */
/* basic styles */
.back-to-top {
  background-color: #fff;
  margin: 0;
  position: fixed;
  bottom: 100px;
  right: 45px;
  width: 55px;
  height: 45px;
  z-index: 100;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #acacac;
  box-shadow: 1px 3px 3px #aeaeae;
  visibility: hidden;
  opacity: 0;
  transition: all .2s ease-in-out;
}
/* make visible when scrolled down on page */
.back-to-top.visible {
  visibility: visible;
  opacity: 1;
}
/* icon styles */
.back-to-top i {
  font-size: 45px;
  color: #3a3a3a;
}
/* mouse effect styles */
.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus {
  color: #ffffff;
}

/********************************************* Miscellaneous */
/* optional .margin-top-20 class */
.hg-minimalist-theme .margin-top-20 {
  margin-top: 20px;
}
/* panels within the right column */
.hg-minimalist-theme .right-col-panel {
  border-radius: 4px;
}
.hg-minimalist-theme .right-col-panel .panel-heading {
  color: #fff;
  background: #1d284f;
  border-radius: 4px 4px 0 0;
}
/* Add styles for in article TOC snippet to work*/
.hg-minimalist-theme .toc-top {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  margin-bottom: 20px;
  min-height: 20px;
  padding: 5px 30px;
}
/* In article TOC snippet style */
.hg-minimalist-theme .toc-anchor {
  display: block;
  height: 140px;
  margin-top: -140px;
  visibility: hidden;
}
/* remove bottom border for articles */
.hg-minimalist-theme .hg-article-body {
  border-bottom: none;
}
.ko-content-cntr .pager {
  margin-top: 40px;
} 

/********************************************************************* 404 page ***********************/
/* remove top border */
.hg-minimalist-theme .error-page-top {
  border: none;
}

/********************************************************************* No access page *****************/
/* vertically center h4 */
.hg-site-login .alert h4 {
  margin-top: 10px;
}
/* remove duplicate icon */
.hg-site-login .alert h4 i {
  display: none;
}

/********************************************************************* Screen size specific adjustments ***************/
/* will apply to screen widths narrower than 1474px */
@media (max-width: 1473px) {
  /* shrink main content area */
  .hg-minimalist-theme.hg-3column-layout:not(.hg-home-page) .ko-content-cntr {
    max-width: 700px;
  }
  /* expand right col size */
  .hg-minimalist-theme.hg-3column-layout .right-column {
    max-width: calc((100vw - 720px) / 2);
  }
}
/* will apply to screen widths narrower than 992px */
@media (max-width: 991px) {
  .hg-minimalist-theme #ko-article-cntr.slideout-panel.open {
    width: 100%;
  }
}
/* will apply to screen widths wider than 575px, not narrower */
@media (min-width: 576px) {
  .hg-minimalist-theme .hg-home-page .category-list>div {
    width: 50%;
    float: left;
  }
  .hg-minimalist-theme .category-img {
    max-width: 50%;
  }
}
/* will apply to screen widths wider than 767px */
@media(min-width:768px) {
  .hg-minimalist-theme .lead,
  .hg-minimalist-theme .lead p {
    font-size: 30.01px !important
  }
}
/* will apply to screen widths wider than 991px */
@media (min-width: 992px) {
  .hg-minimalist-theme .hg-home-page .category-list>div {
    width: 25%;
  }
  .hg-minimalist-theme .category-img {
    max-width: 50%;
  }
}

This is the default HTML for the top-level Homepage content editor, used as the default for knowledge bases created before 14 December 2022. You can use it for reference or copy/paste it in and resave to return to the original default state.

For the default HTML in Settings > Style > 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>Popular Articles</h3>
    [template("pop-articles")]</div>
<div class="col-md-4 col-sm-6">
    <h3>New Articles</h3>
    [template("new-articles")]</div>
<div class="visible-sm clear-both"></div>
<div class="col-md-4 col-sm-6">
    <h3>Updated Articles</h3>
    [template("up-articles")]</div>
</div>