This is the default HTML for Settings > Style > Custom HTML > Home Page. 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 > Home Page for older knowledge bases that use that HTML, see Default Home Page 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("'", "\'");
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 Knowledge Base > Home Page, 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 > Home Page, see Default Home Page 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>
— Drew E on 07/12/2023
Do you also have the default Custom CSS?