ghostcms/basho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
upstream
basho/documentation/version/2-6-3-basho/index.html
Tom Vines f5c75186aa
docs: basho 2.6.3
2025-06-11 23:00:42 +10:00

1202 lines
78 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="auto-dark-mode">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Basho [2.6.3] — User Documentation</title>
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex nofollow">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
<script data-host="https://app.microanalytics.io" data-dnt="false" src="https://app.microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
<style>@font-face {
font-family: 'Lausanne';
font-style: normal;
font-weight: 300;
font-display: block;
src: url("https://fueko.net/assets/fonts/TWKLausanne-300.woff2") format('woff2');
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("https://fueko.net/assets/fonts/RobotoMono-Regular.ttf") format('truetype');
}
</style>
<link rel="stylesheet" type="text/css" href="https://fueko.net/assets/css/screen.css">
<style>/* //////////////////////////////////////////////////////////////////////////
Docs
//////////////////////////////////////////////////////////////////////////
I. Customize
|
├─ Light version
└─ Dark version
II. Theme
|
├─ 1.Release
├─ 2.Header
├─ 3.Sidebar
├─ 4.Docs
├─ 5.Changelog
├─ 6.Third-party materials
└─ 7.GScan
//////////////////////////////////////////////////////////////////////////
I. Customize
////////////////////////////////////////////////////////////////////////// */
:root {
/* Light version
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
--color-border: #ebebec;
--color-code-inline: #edeef0;
--color-blue: #1b58ff;
--color-red: #ff362a;
--ghost-accent-color: #96ff65;
}
/* Dark version
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
.dark-mode {
--color-border: #3c3e48;
--color-code-inline: #323345;
}
/* Automatic dark version [duplicate dark version]
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme:dark) {
.auto-dark-mode {
--color-border: #3c3e48;
--color-code-inline: #323345;
}
}
/* //////////////////////////////////////////////////////////////////////////
II. Theme
////////////////////////////////////////////////////////////////////////// */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
1.Release
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.release-wrap {
display: grid;
width: 100%;
gap: var(--gap);
grid-auto-columns: 1fr;
grid-gap: var(--gap);
grid-template-columns: repeat(3, 1fr);
}
/* Item
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.release-item {
font-family: var(--font-family-monospace);
font-size: 7rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 1;
box-sizing: border-box;
width: 100%;
padding: .4em;
transition: transform .2s ease;
background-color: var(--color-two);
will-change: transform;
}
.release-item:hover {
transform: translateY(-3px);
}
.release-item small {
font-size: 2rem;
line-height: 1.3;
display: block;
margin: 1.2em 0 0 2px;
color: var(--color-font-two);
}
.release-item:first-child {
background-color: var(--ghost-accent-color);
}
.release-item:first-child,
.release-item:first-child small {
color: var(--color-font-black);
}
/* RWD — Release
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
.release-wrap {
grid-template-columns: repeat(1, 1fr);
}
.release-item {
font-size: 4rem;
}
.release-item small {
font-size: 1.4rem;
}
}
@media (max-width:480px) {
.release-wrap {
gap: calc(var(--gap) * 3);
grid-gap: calc(var(--gap) * 3);
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
2.Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
header nav.is-back {
margin-right: auto;
margin-left: 0;
}
header nav.is-back a {
line-height: 38px;
box-sizing: border-box;
width: 42px;
height: 42px;
margin-left: -4px;
transition: color .15s ease;
text-align: center;
color: var(--color-font-two);
border: 2px solid;
border-radius: 100px;
background-color: var(--color-body);
}
header nav.is-back a:hover {
color: var(--color-font-one);
}
header nav a.is-version {
pointer-events: none;
}
header nav a.is-version span {
font-family: var(--font-family-monospace);
font-weight: var(--font-weight-monospace-regular);
}
body.is-scroll-nav header nav.is-back a {
transform: translateY(0);
opacity: 1;
}
/* RWD — Header
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
header nav.is-back a {
display: block;
margin-left: 0px;
}
body.is-scroll-nav header nav a.is-see-themes {
transform: translateY(-30px);
opacity: 0;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
3.Sidebar
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar-section {
flex: 0 0 24%;
min-width: 280px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.sidebar-section > ul {
position: fixed;
top: 0;
overflow-y: auto;
width: 100%;
max-width: 280px;
height: 100%;
margin: 0;
padding: 0;
}
/* Wrap
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar-wrap:first-child {
margin-top: 15vh;
}
/* Title
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar-title {
font-size: 2.4rem;
display: inline-block;
margin: 0 0 1.5vh;
}
/* List
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar-wrap:not(.active) .sidebar-list {
display: none;
}
.sidebar-list {
margin: .5vh 0 1.8vh 0;
padding: 0;
}
.sidebar-list li {
font-size: 1.8rem;
line-height: 1.2;
position: relative;
display: block;
margin: 0 0 0 17px;
padding: 0 0 1.4vh;
list-style: none;
pointer-events: none;
}
.sidebar-list li a {
pointer-events: auto;
color: var(--color-font-two);
}
.sidebar-list li.active a,
.sidebar-list li:hover a {
color: var(--color-font-one);
}
/* Active dot
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar-list li.active::before {
position: absolute;
top: 5px;
left: -15px;
display: block;
width: 8px;
height: 8px;
content: '';
border-radius: 100px;
background-color: var(--ghost-accent-color);
}
/* RWD — Sidebar
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
.sidebar-section {
display: none;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
4.Docs
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.docs-section {
display: flex;
flex-wrap: wrap;
}
.docs-wrap {
flex: 1 0 50%;
max-width: 860px;
}
.docs-content small,
.docs-content h6 {
font-family: var(--font-family-monospace);
font-size: 1.8rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 1.4;
}
/* Margins
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.docs-content .kg-image-card,
.docs-content pre,
.docs-content .kg-code-card,
.docs-content .kg-code-card figcaption,
.docs-content blockquote,
.docs-content mark,
.docs-content ol {
margin: 0 0 5vh;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.docs-content {
margin-bottom: 16vh;
}
.docs-wrap div:last-child .docs-content:last-child {
margin-bottom: 0;
}
.docs-content::before {
display: block;
visibility: hidden;
height: 15vh;
margin-top: -15vh;
content: '';
}
/* Links */
.docs-content a {
text-decoration: var(--underline);
color: var(--color-link);
}
.docs-content a:hover {
text-decoration: var(--underline-hover);
color: var(--color-link-hover);
}
/* Paragraphs */
.docs-content small {
color: var(--color-font-two);
}
.docs-content p {
font-size: 2rem;
line-height: 1.6;
width: 100%;
margin: 0 0 20px;
padding: 0;
}
/* Headers */
.docs-content h2 {
font-size: 7.8rem;
line-height: 1.1;
margin: 0;
}
.docs-content h3,
.docs-content h4 {
font-size: 4rem;
}
.docs-content h6 {
display: inline-block;
width: 100%;
margin: 0 0 20px;
padding: 5vh 0 10px;
color: var(--color-font-one);
border-bottom: 1px solid var(--color-border);
}
/* Images */
.docs-content img {
line-height: 1;
width: 100%;
height: auto;
box-shadow: 0 10px 45px 0 rgba(0, 0, 0, .13);
}
/* Code */
.docs-content code {
font-family: var(--font-family-monospace);
font-size: 80%;
font-weight: var(--font-weight-monospace-regular);
padding: 1px 6px 3px;
color: var(--color-font-one);
border-radius: 5px;
background-color: var(--color-code-inline);
}
.docs-content pre code {
font-size: 80%;
display: block;
margin: 0 0 10px;
padding: 25px 30px;
white-space: pre-wrap;
background-color: var(--color-two);
}
.docs-content .kg-code-card pre {
margin: 0;
}
/* Figcaption */
.docs-content figcaption,
.docs-content figcaption p {
font-size: 1.6rem;
color: var(--color-font-two);
}
/* Alerts */
.docs-content blockquote,
.docs-content mark {
font-size: 2rem;
display: block;
box-sizing: border-box;
width: 100%;
max-width: 90%;
padding: 12px 20px;
border-left: 3px solid;
background-color: var(--color-body);
}
.docs-content blockquote {
border-color: var(--color-blue);
}
.docs-content mark {
color: var(--color-font-one);
border-color: var(--color-red);
}
/* Lists */
.docs-content ol {
font-size: 1.7rem;
display: block;
box-sizing: border-box;
width: 100%;
padding-left: 43px;
counter-reset: li;
}
.docs-content ol li {
font-size: 2rem;
line-height: 1.6;
position: relative;
z-index: 1;
box-sizing: border-box;
width: 100%;
padding-bottom: 20px;
list-style: none;
counter-increment: li;
}
.docs-content ol li:last-of-type {
padding-bottom: 0;
}
.docs-content ol li::before {
font-family: var(--font-family-monospace);
font-size: 1.6rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 32px;
position: absolute;
z-index: -1;
top: 14px;
left: -45px;
display: block;
width: 32px;
height: 32px;
margin-top: 2px;
content: counter(li);
transform: translate(0, -50%);
text-align: center;
color: var(--color-white);
border-radius: 50%;
background-color: var(--color-blue);
}
.docs-content ol.alert {
margin-top: 40px;
}
.docs-content ol.alert li::before {
content: '!';
background-color: var(--color-red);
}
/* Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.docs-content h6 + .colors {
margin-top: 10px;
}
.docs-content section {
position: relative;
display: flex;
align-content: center;
flex: 1 0 calc(50% - 40px);
flex-wrap: wrap;
box-sizing: border-box;
min-width: 315px;
max-width: calc(45% - 40px);
height: 100px;
margin: 0 40px 30px 0;
padding: 15px;
border: 1px solid var(--color-border);
border-radius: 100px;
}
.docs-content section h3 {
font-size: 2rem;
line-height: 1;
display: block;
width: 100%;
margin: -2px 0 12px 90px;
}
.docs-content section.default h3::after {
font-family: var(--font-family-monospace);
font-size: 1.3rem;
font-weight: var(--font-weight-monospace-regular);
line-height: 1.6;
position: absolute;
margin-left: 10px;
padding-right: 5px;
padding-left: 7px;
content: 'Default';
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-white);
border-radius: 4px;
background-color: var(--color-blue);
}
.docs-content section h3::before {
position: absolute;
top: 14px;
left: 15px;
width: 70px;
height: 70px;
content: '';
border-radius: 50%;
}
.docs-content section code {
font-size: 1.7rem;
line-height: 1;
margin-left: 90px;
}
/* RWD — Docs
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1280px) {
.docs-content h2 {
font-size: 5rem;
}
.docs-content h3,
.docs-content h4 {
font-size: 3rem;
}
.docs-content {
margin-bottom: 10vh;
}
}
@media (max-width:480px) {
.docs-content h2 {
font-size: 4rem;
}
.docs-content h3,
.docs-content h4 {
font-size: 2.6rem;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
5.Changelog
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.changelog-item h3,
.changelog-item code {
font-family: var(--font-family-monospace);
font-weight: var(--font-weight-monospace-regular);
}
.changelog-item h3 {
font-size: 7.8rem;
margin: 0;
}
.changelog-item code {
font-size: 75%;
padding: 1px 6px 3px;
border-radius: 5px;
background-color: var(--color-code-inline);
}
.changelog-item span {
font-family: var(--font-family-one);
font-weight: var(--font-weight-one-light);
color: var(--color-font-two);
}
.changelog-item ul {
margin: 3vh 0 9vh;
padding: 0;
}
.changelog-item ul li {
font-size: 2.4rem;
display: block;
align-items: baseline;
width: 100%;
padding-bottom: 8px;
list-style: none;
}
.changelog-item ul li strong {
font-size: 1.3rem;
display: inline-block;
margin-right: 10px;
padding: 3px 6px;
transform: translateY(-3px);
letter-spacing: 1.5px;
word-break: normal;
border: 1px solid var(--color-four);
border-radius: 100px;
}
/* RWD — Changelog
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
.changelog-item h3 {
font-size: 6rem;
}
.changelog-item span {
line-height: 1;
display: block;
}
}
@media (max-width:480px) {
.changelog-item h3 {
font-size: 4rem;
}
.changelog-item ul {
margin-bottom: 5vh;
}
.changelog-item ul li {
font-size: 1.8rem;
}
.changelog-item ul li strong {
font-size: 1rem;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
6.Third-party materials
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.third-party-section a {
font-size: 6rem;
display: inline-block;
margin-right: 1vw;
pointer-events: none;
}
.third-party-section a span {
pointer-events: auto;
}
.third-party-section a sup {
font-size: 65%;
margin-left: 3px;
transition: color .1s ease;
color: var(--color-font-two);
}
.third-party-section a:hover,
.third-party-section a:hover sup {
color: var(--ghost-accent-color);
}
/* RWD — Third-party materials
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
.third-party-section a {
font-size: 3.6rem;
}
}
@media (max-width:480px) {
.third-party-section a {
font-size: 3rem;
display: block;
}
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
7.GScan
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.kg-width-wide,.kg-width-full,.kg-gallery-container,.kg-gallery-row,.kg-gallery-image,.kg-bookmark-card,.kg-bookmark-container,.kg-bookmark-content,.kg-bookmark-metadata,.kg-bookmark-title,.kg-bookmark-description,.kg-bookmark-icon,.kg-bookmark-author,.kg-bookmark-publisher,.kg-bookmark-thumbnail,.kg-callout-card,.kg-callout-card-emoji,.kg-callout-card-text,.kg-callout-card-background-grey,.kg-callout-card-background-white,.kg-callout-card-background-blue,.kg-callout-card-background-green,.kg-callout-card-background-yellow,.kg-callout-card-background-red,.kg-callout-card-background-pink,.kg-callout-card-background-purple,.kg-callout-card-background-accent,.kg-nft-card,.kg-nft-card-container,.kg-nft-metadata,.kg-nft-image,.kg-nft-header,.kg-nft-title,.kg-nft-logo,.kg-nft-creator,.kg-nft-description,.kg-toggle-card,.kg-toggle-heading,.kg-toggle-heading-text,.kg-toggle-card-icon,.kg-toggle-content,.kg-audio-card,.kg-audio-thumbnail,.kg-audio-thumbnail.placeholder,.kg-audio-player-container,.kg-audio-title,.kg-audio-player,.kg-audio-current-time,.kg-audio-time,.kg-audio-duration,.kg-audio-play-icon,.kg-audio-pause-icon,.kg-audio-seek-slider,.kg-audio-playback-rate,.kg-audio-mute-icon,.kg-audio-unmute-icon,.kg-audio-volume-slider,.kg-video-card,.kg-video-hide,.kg-video-container,.kg-video-overlay,.kg-video-large-play-icon,.kg-video-thumbnail,.kg-video-thumbnail.placeholder,.kg-video-player-container,.kg-video-title,.kg-video-player,.kg-video-current-time,.kg-video-time,.kg-video-duration,.kg-video-play-icon,.kg-video-pause-icon,.kg-video-seek-slider,.kg-video-playback-rate,.kg-video-mute-icon,.kg-video-unmute-icon,.kg-video-volume-slider,.kg-button-card,.kg-button-card.kg-align-left,.kg-button-card.kg-align-center,.kg-btn,.kg-btn-accent,.kg-product-card,.kg-product-card-btn-accent,.kg-product-card-button,.kg-product-card-container,.kg-product-card-description,.kg-product-card-image,.kg-product-card-rating,.kg-product-card-rating-active,.kg-product-card-rating-star,.kg-product-card-title,.kg-product-card-title-container,.kg-before-after-card,.kg-before-after-card-image-before,.kg-before-after-card-image-after,.kg-file-card,.kg-file-card-container,.kg-file-card-contents,.kg-file-card-title,.kg-file-card-caption,.kg-file-card-filename,.kg-file-card-filesize,.kg-file-card-medium,.kg-file-card-small,.kg-blockquote-alt{display:none}
</style>
<script>
(function(){if(window.location.href.search(new RegExp("\.zip[\\/]","i"))>=0){alert("It looks like you are in the preview mode of the zip archive. The documentation files are not displayed correctly. Please extract the zip archive (right-click on the archive downloaded from Themeforest and select 'Extract All'). Then reopen the index.html file from new location.");}})();
</script>
</head> <body>
<header>
<nav class="is-back">
<ul><li><a href="../../index.html" aria-label="back">←</a></li></ul>
</nav>
<nav>
<ul>
<li><a href="../../index.html" class="is-version">Basho <span>[2.6.3]</span> — User Documentation</a></li>
<li><a href="https://fueko.net/themes/" class="global-button is-accent-color is-see-themes">See Themes</a></li>
</ul>
</nav>
</header>
<main>
<div class="docs-section global-padding">
<div class="sidebar-section" id="sidebar">
<ul>
<li class="sidebar-wrap">
<a href="#getting-started" class="sidebar-title">Getting Started</a>
<ul class="sidebar-list">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#uploading-a-theme">Uploading a theme</a></li>
</ul>
</li>
<li class="sidebar-wrap">
<a href="#activation" class="sidebar-title">Activation</a>
<ul class="sidebar-list">
<li><a href="#dark-color-partial-version">Dark, color &amp; partial version</a></li>
<li><a href="#search-function">Search function</a></li>
<li><a href="#slider">Slider</a></li>
<li><a href="#social-accounts-2">Social accounts</a></li>
<li><a href="#authors-page">Authors page</a></li>
<li><a href="#tags-page">Tags page</a></li>
<li><a href="#contact-page-2">Contact page</a></li>
</ul>
</li>
<li class="sidebar-wrap">
<a href="#customization" class="sidebar-title">Customization</a>
<ul class="sidebar-list">
<li><a href="#logo">Logo</a></li>
<li><a href="#navigation-3">Navigation</a></li>
<li><a href="#accent-color">Accent color</a></li>
<li><a href="#accent-color-buttons">Accent color buttons</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#hero-section-3">Hero section</a></li>
<li><a href="#special-section">Special section</a></li>
<li><a href="#hide-author">Hide author</a></li>
<li><a href="#images-orientation-2">Images orientation</a></li>
<li><a href="#post-header-layouts-2">Post header layouts</a></li>
<li><a href="#responsive-tables">Responsive tables</a></li>
<li><a href="#footer-copyright">Footer copyright</a></li>
</ul>
</li>
<li class="sidebar-wrap">
<a href="#members" class="sidebar-title">Members</a>
<ul class="sidebar-list">
<li><a href="#custom-pages-2">Custom pages</a></li>
<li><a href="#login-panel">Login panel</a></li>
<li><a href="#account-page">Account page</a></li>
<li><a href="#signup-signin-pages">Signup &amp; Signin pages</a></li>
<li><a href="#membership-page">Membership page</a></li>
<li><a href="#subscribe-page">Subscribe page</a></li>
<li><a href="#comments-2">Comments</a></li>
</ul>
</li>
<li class="sidebar-wrap">
<a href="#advanced" class="sidebar-title">Advanced</a>
<ul class="sidebar-list">
<li><a href="#editing-a-theme">Editing a theme</a></li>
<li><a href="#updating-a-theme">Updating a theme</a></li>
<li><a href="#theme-translation">Theme translation</a></li>
<li><a href="#posts-per-page">Posts per page</a></li>
</ul>
</li>
</ul>
</div>
<div class="docs-wrap">
<div id="getting-started"id="getting-started">
<div class="docs-content" id="introduction">
<small>Getting Started</small>
<h2>Introduction</h2>
<h3 id="the-following-documentation-serves-as-your-guide-to-the-new-theme-since-this-is-ghost-theme-documentation-it-is-assumed-that-you-have-a-basic-knowledge-of-the-ghost">The following documentation serves as your guide to the new theme. Since this is Ghost theme documentation, it is assumed that you have a basic knowledge of the Ghost.</h3><h3 id="if-you%E2%80%99re-new-to-ghost-it%E2%80%99s-recommended-to-explore-the-guides-in-the-official-ghost-help-center-checking-these-resources-will-provide-you-with-all-the-available-information">If you’re new to Ghost, it’s recommended to explore the guides in the official <a href="https://ghost.org/help/">Ghost Help Center</a>. Checking these resources will provide you with all the available information.</h3>
</div>
<div class="docs-content" id="uploading-a-theme">
<small>Getting Started</small>
<h2>Uploading a theme</h2>
<h3 id="this-is-where-the-magic-happens-you-are-able-to-upload-activate-and-delete-a-theme-in-the-ghost-admin-of-your-publication">This is where the magic happens! You are able to upload, activate and delete a theme in the Ghost Admin of your publication.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To upload a theme, go to the 'Theme' settings in the Ghost Admin and click 'Change theme' button.</li><li>Then click the 'Upload theme' button in the upper right corner.</li><li>Once uploaded, click 'Activate' to activate the theme on your site.</li></ol>
</div>
</div>
<div id="activation"id="activation"id="activation"id="activation"id="activation"id="activation"id="activation">
<div class="docs-content" id="dark-color-partial-version">
<small>Activation</small>
<h2>Dark, color &amp; partial version</h2>
<h3 id="the-dark-color-or-partial-version-introduces-a-fresh-and-distinctive-appearance-for-your-website-bringing-a-modern-and-stylish-aesthetic-that-enhances-the-visual-experience-for-your-visitors">The dark, color or partial version introduces a fresh and distinctive appearance for your website, bringing a modern and stylish aesthetic that enhances the visual experience for your visitors.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Color scheme' position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-add-a-global-partial-background-color">Tip: How to add a global partial background color?</h6><ol><li>To add the global partial background color, go to the&nbsp;'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the&nbsp;'Global background color in hex string'<strong>&nbsp;</strong>position.</li><li>Paste your color – color must be a valid hexadecimal string, e.g.&nbsp;<code>#ffd9e0</code> – you can generate the color on the site&nbsp;<a href="https://htmlcolorcodes.com/">htmlcolorcodes.com</a>.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-dark-color-partial-version-depending-on-operating-system-preferences">Tip: Dark, color &amp; partial version depending on operating system preferences</h6><blockquote>Modern operating systems (Windows, macOS, iOS, etc.) allow users to choose their preference for light or dark system themes. The below feature is used to detect if the user has requested the system to use a light or dark color theme.</blockquote><ol><li>To activate an auto dark version based on user operating system preferences, select the 'Auto' option.</li><li>Click 'Save' to activate.</li></ol>
</div>
<div class="docs-content" id="search-function">
<small>Activation</small>
<h2>Search function</h2>
<h3 id="by-default-the-theme-uses-a-native-search-option-you-can-also-use-the-search-function-specially-designed-for-this-theme-%E2%80%94-to-do-this-you-must-set-the-content-api-key">By default, the theme uses a native search option. You can also use the search function specially designed for this theme — to do this, you must set the Content API key.</h3><h6 id="step-1-generating-content-api-key">Step 1: Generating Content API key</h6><ol><li>To generate&nbsp;'Content API key', go to the&nbsp;'Integrations'&nbsp;settings in the Ghost Admin.</li><li>Click&nbsp;'Add custom integration',&nbsp;then give the new integration a name, like 'Search', and click the&nbsp;'Add'&nbsp;button.</li><li>Copy your&nbsp;'Content API key'&nbsp;and click&nbsp;'Save &amp; close'.</li></ol><h6 id="step-2-activate-the-search-function">Step 2: Activate the search function</h6><ol><li>Go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the&nbsp;'Content API key for search'&nbsp;position.</li><li>Paste your&nbsp;'Content API key'.</li><li>Finally, click&nbsp;'Save'&nbsp;to activate.</li></ol>
</div>
<div class="docs-content" id="slider">
<small>Activation</small>
<h2>Slider</h2>
<h3 id="select-which-posts-you-want-to-appear-at-the-top-of-your-site-in-the-slider">Select which posts you want to appear at the top of your site in the slider.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Open the post you would like to add to the slider.</li><li>Then, go to the 'Post settings' panel using the icon in the top right of the screen.</li><li>At the bottom of the panel, you'll find a switch labeled 'Feature this post.'</li><li>Click the switch and close the panel.</li></ol><p><mark>A post must have a feature image to appear in the slider.</mark></p>
<h6 id="tip-how-to-resize-the-slider">Tip: How to resize the slider?</h6><ol><li>To change size the&nbsp;slider, go to the&nbsp;'Design &amp; branding'&nbsp;settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Homepage' – expand this settings list and go to the&nbsp;'Slider size'&nbsp;position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-change-images-orientation">Tip: How to change images orientation?</h6><ol><li>To change images orintation, go to the&nbsp;'Design &amp; branding'&nbsp;settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Homepage' – expand this settings list and go to the&nbsp;'Slider images orintation'&nbsp;position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-remove-featured-posts-from-the-main-collection-for-advanced-users">Tip: How to remove featured posts from the main collection? (For advanced users)</h6><ol><li>Go to the 'Labs' settings in the Ghost Admin, click on 'Beta features' tab and you will find the 'Routes' section.</li><li>Upload the&nbsp;<code>routes.yaml</code>&nbsp;file with these settings:</li></ol><figure class="kg-card kg-code-card"><pre><code>routes:
collections:
/:
permalink: /{slug}/
filter: featured:false
template: index
/featured/:
permalink: /featured/{slug}/
filter: featured:true
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/</code></pre><figcaption><p><span style="white-space: pre-wrap;">This would set an additional </span><code spellcheck="false" style="white-space: pre-wrap;"><span>/featured/</span></code><span style="white-space: pre-wrap;"> URL address for all posts that has been marked as featured. This change is required to remove those posts from the main collection.</span></p></figcaption></figure>
</div>
<div class="docs-content" id="social-accounts-2">
<small>Activation</small>
<h2>Social accounts</h2>
<h3 id="link-your-social-accounts-to-have-them-displayed-in-the-footer-of-your-publication">Link your social accounts to have them displayed in the footer of your publication.</h3><h6 id="facebook-and-x">Facebook and X</h6><ol><li>To add Facebook and X account to your publication, go to the 'Social accounts' settings in the Ghost Admin.</li><li>Once adding social accounts, click 'Save' to activate.</li></ol><h6 id="tip-adding-other-social-accounts-to-the-footer-requires-theme-editing">Tip: Adding other social accounts to the footer (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>Open <code>../partials/footer_icons.hbs</code> file in your code editor.</li><li>Then, uncomment the block – remove the lines which contains <code>{{!--</code> and <code>--}}</code> for the chosen profile icon.</li><li>Now replace the <code>#</code> for each <code>href</code> value with your own profile links.</li><li>Save your <code>footer_icons.hbs</code> file in <code>../partials/</code> folder.</li></ol>
</div>
<div class="docs-content" id="authors-page">
<small>Activation</small>
<h2>Authors page</h2>
<h3 id="to-present-all-authors-from-your-publication-in-an-elegant-way-you-can-add-a-custom-authors-page">To present all authors from your publication in an elegant way, you can add a custom authors page. </h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Authors' template, close the panel.</li><li>Finally, click 'Publish'.</li></ol>
</div>
<div class="docs-content" id="tags-page">
<small>Activation</small>
<h2>Tags page</h2>
<h3 id="to-present-all-tags-from-your-publication-in-an-elegant-way-you-can-add-a-custom-tags-page">To present all tags from your publication in an elegant way, you can add a custom tags page. </h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Tags' template, close the panel.</li><li>Finally, click 'Publish'.</li></ol>
</div>
<div class="docs-content" id="contact-page-2">
<small>Activation</small>
<h2>Contact page</h2>
<h3 id="if-you-wish-to-have-a-direct-way-in-which-your-readers-can-contact-you-you-can-add-a-contact-page-based-on-formspree-or-getform">If you wish to have a direct way in which your readers can contact you, you can add a contact page based on <a href="https://formspree.io/">Formspree </a>or <a href="https://getform.io/">Getform</a>.</h3><h6 id="step-1-add-your-formspree-or-getform-endpoint">Step 1: Add your Formspree or Getform endpoint</h6><ol><li>Go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide'<strong> </strong>– expand this settings list and go to the 'Contact form endpoint'<strong> </strong>position.</li><li>Paste your Formspree or Getform endpoint, e.g. <code>https://formspree.io/f/xhyplkej</code></li><li>Finally, click 'Save' to activate.</li></ol><h6 id="step-2-add-a-contact-page">Step 2: Add a contact page</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Contact' template, close the panel.</li><li>Finally, click 'Publish'.</li></ol>
</div>
</div>
<div id="customization"id="customization"id="customization"id="customization"id="customization"id="customization"id="customization"id="customization"id="customization"id="customization"id="customization"id="customization">
<div class="docs-content" id="logo">
<small>Customization</small>
<h2>Logo</h2>
<h3 id="a-publication-logo-is-the-primary-logo-for-your-brand-and-is-displayed-across-your-theme">A publication logo is the primary logo for your brand and is displayed across your theme.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To upload a logo, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Brand'<strong> </strong>– expand this settings list and go to the 'Publication logo'<strong> </strong>position.</li><li>Click 'Upload logo' to upload your logo.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-change-logo-size">Tip: How to change logo size?</h6><ol><li>To change logo size go to the 'Code injection' settings in the Ghost Admin and paste this code to the 'Site header':</li></ol><figure class="kg-card kg-code-card"><pre><code>&lt;style&gt;
:root {
/* Desktop */
--height-logo-header: &lt;value&gt;;
--height-logo-footer: &lt;value&gt;;
}
&lt;/style&gt;</code></pre><figcaption><p><span style="white-space: pre-wrap;">Example code for changing the logo size for the 'Desktop' view</span></p></figcaption></figure><figure class="kg-card kg-code-card"><pre><code>&lt;style&gt;
:root {
/* Mobile */
--height-logo-mobile-header: &lt;value&gt;;
--height-logo-mobile-footer: &lt;value&gt;;
}
&lt;/style&gt;</code></pre><figcaption><p><span style="white-space: pre-wrap;">Example code for changing the logo size for the 'Mobile' view</span></p></figcaption></figure>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 1">
<li>Adjust the current <code>&lt;value&gt;</code> to match the expected value, such as <code>30px</code></li>
<li>Finally, click 'Save' to activate.</li>
</ol>
<!--kg-card-end: html-->
<h6 id="tip-uploading-an-additional-logo-for-dark-color-scheme">Tip: Uploading an additional logo for dark color scheme</h6><ol><li>To upload an additional logo, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right, you’ll see the 'Site-wide' tab – expand this settings list and go to the 'Color scheme' position – select the option related to dark color scheme to display the option to upload an additional logo below.</li><li>Click 'Upload Image' to upload your logo.</li><li>Finally, click 'Save' to activate.</li></ol>
</div>
<div class="docs-content" id="navigation-3">
<small>Customization</small>
<h2>Navigation</h2>
<h3 id="there-are-two-types-of-navigation-primary-and-secondary-the-primary-navigation-is-used-in-the-theme-header-while-the-secondary-navigation-is-used-in-the-footer">There are two types of navigation: 'Primary' and 'Secondary'. The primary navigation is used in the theme header, while the secondary navigation is used in the footer.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To add a navigation, go to the 'Navigation' settings in the Ghost Admin.</li><li>Once here, you can remove any navigation items that you want by using the trash icon to the right of the item. You can add new items by just typing them in. You can change the order by clicking on the icon on the left and dragging it to the spot you want – the new columns in the 'Secondary' navigation will appear automatically after a few items.</li><li>Once your items are added, click 'OK' to activate new navigation on your site.</li></ol><h6 id="tip-how-to-change-the-number-of-items-before-chevron-element-in-the-header-navigation-requires-theme-editing">Tip: How to change the number of items before 'chevron' element in the header navigation? (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>You’ll need to open the theme’s&nbsp;<code>../partials/navigation.hbs</code>&nbsp;file in your code editor.</li><li>At the top, you’ll see the&nbsp;'Header navigation'&nbsp;section<strong>.</strong></li><li>Replace the current&nbsp;<code>to="3"</code>&nbsp;and&nbsp;<code>from="4"</code>&nbsp;value with your own, for example&nbsp;<code>to="4"</code>&nbsp;and&nbsp;<code>from="5"</code>.</li><li>Save your&nbsp;<code>navigation.hbs</code>&nbsp;file in&nbsp;<code>../partials/</code>&nbsp;folder.</li></ol><h6 id="tip-how-to-add-your-own-column-names-in-the-footer-navigation-requires-theme-editing">Tip: How to add your own column names in the footer navigation? (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>To add your own column names, you’ll need to open the theme’s&nbsp;<code>../locales/en.json</code>&nbsp;file in your code editor.</li><li>Then, add your own translations, for example:</li></ol><pre><code>{
"Column 1": "About",
"Column 2": "Features",
"Column 3": "Support",
...
}</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 2">
<li>Save your <code>en.json</code> file in <code>../locales/</code> folder.</li>
</ol>
<!--kg-card-end: html-->
<h6 id="tip-how-to-change-the-number-of-items-in-column-requires-theme-editing">Tip: How to change the number of items in column? (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>You’ll need to open the theme’s&nbsp;<code>../partials/navigation.hbs</code>&nbsp;file in your code editor.</li><li>At the middle, you’ll see the&nbsp;'Footer navigation'&nbsp;section<strong>.</strong></li><li>The columns have a&nbsp;<code>limit</code>&nbsp;and&nbsp;<code>from</code>&nbsp;parameter, that needs to be changed. For example, to change the number of items to 4 for each column:</li></ol><pre><code>{{#foreach navigation limit="4"}}
...
{{#foreach navigation limit="4" from="5"}}
...
{{#foreach navigation from="9"}}
...</code></pre><p>Another possible case is when you change elements up to e.g. 6 only for second column:</p><pre><code>{{#foreach navigation limit="5"}}
...
{{#foreach navigation limit="6" from="6"}}
...
{{#foreach navigation from="12"}}
...</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 3">
<li>Save your <code>navigation.hbs</code> file in <code>../partials/ </code> folder.</li>
</ol>
<!--kg-card-end: html-->
</div>
<div class="docs-content" id="accent-color">
<small>Customization</small>
<h2>Accent color</h2>
<h3 id="primary-color-used-in-your-publication">Primary color used in your publication.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To change the accent color in your publication, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Brand' – expand this settings list and go to the 'Accent color' position.</li><li>Choose your color.</li><li>Finally, click 'Save' to activate.</li></ol>
</div>
<div class="docs-content" id="accent-color-buttons">
<small>Customization</small>
<h2>Accent color buttons</h2>
<h3 id="by-default-the-buttons-eg-load-more-in-the-theme-are-in-accent-color-you-can-change-in-to-black-%E2%80%93-with-the-accent-color-when-hovering-the-mouse">By default, the buttons (e.g 'Load more') in the theme are in&nbsp;<a href="#accent-color" rel="noreferrer">accent color</a>. You can change in to black –&nbsp;with the accent color when hovering the mouse.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To deactivate&nbsp;accent color buttons&nbsp;in your publication, go to the&nbsp;'Design &amp; branding' in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide'&nbsp;– expand this settings list and go to the&nbsp;'Accent color buttons'&nbsp;position.</li><li>Use the switch to deactivate the option.</li><li>Finally, click&nbsp;'Save'&nbsp;to activate.</li></ol>
</div>
<div class="docs-content" id="fonts">
<small>Customization</small>
<h2>Fonts</h2>
<h3 id="you-can-change-fonts-using-the-typography-setting-in-the-design-branding-section">You can change fonts using the 'Typography' setting in the 'Design &amp; branding' section. </h3><blockquote>Using this option might not always give the best results because fonts are designed for different purposes and can vary in size. The theme doesn’t affect the list of available fonts or adjust them, so it’s a good idea to experiment and find what works best for your needs.</blockquote><h6 id="step-by-step">Step-by-Step</h6><ol><li>Go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right, you’ll see the 'Brand' tab and find the 'Typography' section.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-special-font-sets-for-the-theme">Tip: Special font sets for the theme</h6><blockquote>Unlike the above option, the theme offers an alternative specifically crafted for it: font sets from the <a href="https://fonts.google.com">Google Fonts</a> library. These fonts have been thoughtfully chosen to highlight the theme’s unique character, with their sizes and individual attributes precisely tailored to complement it. <br><br>You can also select the 'System fonts' option to use local fonts. This choice ensures the best performance for the theme.</blockquote><h6 id="step-by-step-1">Step-by-Step</h6><ol><li>Go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right, you’ll see the 'Theme' tab, expand this settings list, and find the 'Fonts' position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><p><mark>Please remember to set the option to 'Theme default' in the 'Typography' section before using the 'Fonts' settings.</mark></p>
</div>
<div class="docs-content" id="hero-section-3">
<small>Customization</small>
<h2>Hero section</h2>
<h3 id="the-hero-section-includes-a-title-subscription-form-or-button-at-the-top-of-the-homepage">The hero section includes a title, subscription form or button at the top of the homepage.</h3><h6 id="tip-how-to-add-your-own-hero-title">Tip: How to add your own hero title?</h6><ol><li>To add your own hero title, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Hero title text' position.</li><li>Enter your own hero title.</li></ol><p>If you want your text in bold, use the&nbsp;<code>&lt;span&gt;</code>&nbsp;...&nbsp;<code>&lt;/span&gt;</code>&nbsp;&nbsp;tag, like this:</p><figure class="kg-card kg-code-card"><pre><code>Your own &lt;span&gt;hero text&lt;/span&gt;</code></pre><figcaption><p><span style="white-space: pre-wrap;">You can also use&nbsp;</span><code spellcheck="false" style="white-space: pre-wrap;"><span>&lt;b&gt;</span></code><span style="white-space: pre-wrap;">&nbsp;or&nbsp;</span><code spellcheck="false" style="white-space: pre-wrap;"><span>&lt;strong&gt;</span></code><span style="white-space: pre-wrap;">&nbsp;with the same visual result</span></p></figcaption></figure><p>If you want to start the text on a new line use the&nbsp;<code>&lt;br&gt;</code>&nbsp;&nbsp;tag, like this:</p><pre><code>Your own hero text&lt;br&gt; New text line</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 3">
<li>Finally, click 'Save' to activate.</li>
</ol>
<!--kg-card-end: html-->
<h6 id="tip-how-to-add-subscription-form-or-button">Tip: How to add subscription form or button?</h6><ol><li>To add&nbsp;subsription form form&nbsp;or&nbsp;button&nbsp;to hero section, go to the&nbsp;'Design &amp; branding'&nbsp;settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Homepage'&nbsp;– expand this settings list and go to the&nbsp;'Hero title size and subscription form or button'&nbsp;position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click&nbsp;'Save'&nbsp;to activate.</li></ol><h6 id="tip-how-to-change-the-subscription-button-link-requires-theme-editing">Tip: How to change the subscription button link?&nbsp;(<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>You can easily replace the&nbsp;<code>/membership/</code>&nbsp;page with for example&nbsp;<code>/signup/</code>, for this purpose open&nbsp;<code>../partials/members/subscribe_button.hbs</code>&nbsp;file in your code editor and find:</li></ol><pre><code>&lt;a href="{{@site.url}}/membership/" ...</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 1">
<li>Then, replace with:</li>
</ol>
<!--kg-card-end: html-->
<pre><code>&lt;a href="{{@site.url}}/signup/" ...</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 2">
<li>Save your <code>subscribe_button.hbs</code> file in <code>../partials/members/</code> folder.</li>
<li>Create a 'signup' page with <code>/signup/</code> page URL.</li>
</ol>
<!--kg-card-end: html-->
</div>
<div class="docs-content" id="special-section">
<small>Customization</small>
<h2>Special section</h2>
<h3 id="you-have-the-option-to-add-a-special-section-with-posts-on-the-homepage-below-the-load-more-button">You have the option to add a special section with posts on the homepage, below the 'Load more' button.</h3><blockquote>By default, the section located on the homepage displays related posts to the most recent post if it has a 'primary tag' added.</blockquote><h6 id="tip-how-to-add-a-special-section-with-posts-for-selected-tags">Tip: How to add a special section with posts for selected tags?</h6><ol><li>Go to the&nbsp;'Design &amp; branding'&nbsp;settings in the Ghost Admin.</li><li>On the right you’ll see the tab&nbsp;'Homepage'&nbsp;– expand this settings list and go to the&nbsp;'Tags for special section'&nbsp;position.</li><li>Enter your tag (or tags) slug, e.g.&nbsp;<code>story,lifestyle,design</code></li></ol>
</div>
<div class="docs-content" id="hide-author">
<small>Customization</small>
<h2>Hide author</h2>
<h3 id="decide-whether-you-want-to-display-the-author-in-the-feed-and-on-the-post-page">Decide whether you want to display the author in the feed and on the post page.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To hide the author, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Theme' – expand this settings list and go to the 'Show author' position.</li><li>Use the toggle switch.</li><li>Finally, click 'Save' to activate.</li></ol>
</div>
<div class="docs-content" id="images-orientation-2">
<small>Customization</small>
<h2>Images orientation</h2>
<h3 id="you-can-easily-change-the-orientation-of-your-images">You can easily change the orientation of your images.</h3><h6 id="tip-how-to-change-images-orientation-in-a-slider">Tip: How to change images orientation in a 'Slider'?</h6><ol><li>To change images orintation, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Slider images orintation' position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-change-images-orientation-in-a-feed">Tip: How to change images orientation in a Feed?</h6><ol><li>To change images orintation, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Feed images orintation' position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-change-images-orientation-in-a-special-section">Tip: How to change images orientation in a 'Special' section?</h6><ol><li>To change images orintation, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Special section images orintation' position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol><h6 id="tip-how-to-change-the-orientation-of-a-featured-image-on-a-post-page">Tip: How to change the orientation of a featured image on a post page?</h6><ol><li>To change images orintation, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Post' – expand this settings list and go to the 'Feature image orintation' position.</li><li>Use the dropdown menu to select your option.</li><li>Finally, click 'Save' to activate.</li></ol>
</div>
<div class="docs-content" id="post-header-layouts-2">
<small>Customization</small>
<h2>Post header layouts</h2>
<h3 id="the-theme-includes-a-collection-of-post-header-layouts-allowing-you-to-customize-text-and-images-in-relation-to-each-other">The theme includes a collection of post header layouts, allowing you to customize text and images in relation to each other.</h3><h6 id="activate-classic-template-example">Activate 'Classic' template&nbsp;(<a href="https://basho.fueko.net/perfection-has-to-do-with-the-end-product/">example</a>)</h6><ol><li>Open the&nbsp;'Post settings'&nbsp;panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the&nbsp;'Post Classic'&nbsp;template, close the panel.</li><li>Finally, click&nbsp;'Publish'.</li></ol><h6 id="activate-center-template-example">Activate 'Center' template&nbsp;(<a href="https://basho.fueko.net/i-think-its-the-responsibility-of-a-designer-to-try-to-break-rules-and-barriers/">example</a>)</h6><ol><li>Open the&nbsp;'Post settings'&nbsp;panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the&nbsp;'Post Center'&nbsp;template, close the panel.</li><li>Finally, click&nbsp;'Publish'.</li></ol>
</div>
<div class="docs-content" id="responsive-tables">
<small>Customization</small>
<h2>Responsive tables</h2>
<h3 id="the-responsive-table-will-display-a-horizontal-scroll-bar-if-the-screen-is-too-small-to-display-the-full-content-the-following-description-applies-to-the-table-added-using-the-markdown-card">The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. The following description applies to the table added using the markdown card.</h3><blockquote>By default, the table adapts to the window width. If you have a table that is too wide, you can add a container&nbsp;<code>&lt;div class="responsive-table"&gt;</code>&nbsp;element with around the table, and it will display a horizontal scroll bar when needed.</blockquote><h6 id="step-by-step">Step-by-Step</h6><ol><li>To add a responsive table, use the&nbsp;'Markdown card'.</li><li>Add a container&nbsp;<code>&lt;div class="responsive-table"&gt;</code>&nbsp;element with around the table (in markdown there always needs to be a blank line between any&nbsp;<code>HTML</code>&nbsp;and&nbsp;<code>markdown</code>).</li></ol><figure class="kg-card kg-code-card"><pre><code>&lt;div class="responsive-table"&gt;
| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |
&lt;/div&gt;</code></pre><figcaption><p><span style="white-space: pre-wrap;">Markdown table syntax is quite simple. It does not allow row or cell spanning as well as putting multi-line text in a cell. The first row is always the header followed by an extra line with dashes&nbsp;</span><code spellcheck="false" style="white-space: pre-wrap;"><span>-</span></code><span style="white-space: pre-wrap;">&nbsp;and optional colons&nbsp;</span><code spellcheck="false" style="white-space: pre-wrap;"><span>:</span></code><span style="white-space: pre-wrap;">&nbsp;for forcing column alignment.</span></p></figcaption></figure><h6 id="tip-what-it-takes-to-generate-a-table">Tip: What it takes to generate a table?</h6><p>To generate a table, you can use the tool&nbsp;<a href="https://www.tablesgenerator.com/markdown_tables">Markdown Tables Generator</a>.</p>
</div>
<div class="docs-content" id="footer-copyright">
<small>Customization</small>
<h2>Footer copyright</h2>
<h3 id="customize-your-own-text-in-the-footer-by-replacing-the-default-value-published-with-ghost-and">Customize your own text in the footer by replacing the default value 'Published with Ghost and (...)'.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To change footer copyright text, go to the 'Design &amp; branding' settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Footer copyright' position.</li><li>Enter your own copyright text.</li><li>Finally, click 'Save' to activate.</li></ol>
</div>
</div>
<div id="members"id="members"id="members"id="members"id="members"id="members"id="members">
<div class="docs-content" id="custom-pages-2">
<small>Members</small>
<h2>Custom pages</h2>
<h3 id="the-members-feature-allows-you-to-turn-any-site-into-a-membership-business-with-member-signup-paid-subscriptions-and-email-newsletters">The members feature allows you to turn any site into a membership business with member signup, paid subscriptions and email newsletters.</h3><p><mark>The members feature is enabled by default. However, you need to create the following pages to avoid the 404 error.</mark></p>
<h6 id="step-by-step">Step-by-Step</h6><ol><li>Create an <a href="#account-page" rel="noreferrer">Account page</a>.</li><li>Create <a href="#signup-signin-pages" rel="noreferrer">Signup &amp; Signin pages</a>.</li><li>Create a <a href="#membership-page" rel="noreferrer">Membership page</a>.</li></ol><h6 id="tip-what-to-do-in-case-of-an-400-error-with-message-eg-missing-template-memberssigninhbs-for-route-signin">Tip: What to do in case of an 400 error with message e.g. 'Missing template members/signin.hbs for route /signin/'</h6><blockquote>The error indicates that there was previously used a <code>routes.yaml</code> file with another theme that required it. To solve the problem, reset the <code>routes.yaml</code> file to its default settings.</blockquote><figure class="kg-card kg-code-card"><pre><code>routes:
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/</code></pre><figcaption><p><span style="white-space: pre-wrap;">Default settings for routes.yaml file</span></p></figcaption></figure>
</div>
<div class="docs-content" id="login-panel">
<small>Members</small>
<h2>Login panel</h2>
<h3 id="the-login-panel-is-a-navigation-component-that-shows-join-button-when-a-member-is-logged-out-and-account-button-when-a-member-is-logged-in">The login panel is a navigation component that shows 'Join' button when a member is logged out, and 'Account' button when a member is logged in.</h3><h6 id="tip-replacing-join-with-memberships-requires-theme-editing">Tip: Replacing 'Join' with 'Memberships'&nbsp;(<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>You can easily replace the 'Join' page with 'Membership', for this purpose open&nbsp;<code>../partials/members/login_panel.hbs</code>&nbsp;file in your code editor and find:</li></ol><pre><code>&lt;a href="{{@site.url}}/signup/" class="global-button"&gt;{{t "Join"}}&lt;/a&gt;</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 1">
<li>Then, replace with:</li>
</ol>
<!--kg-card-end: html-->
<pre><code>&lt;a href="{{@site.url}}/memberships/" class="global-button"&gt;Membership&lt;/a&gt;</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 2">
<li>Save your <code>login_panel.hbs</code> file in <code>../partials/members/</code> folder.</li>
</ol>
<!--kg-card-end: html-->
</div>
<div class="docs-content" id="account-page">
<small>Members</small>
<h2>Account page</h2>
<h3 id="the-account-page-shows-your-members-the-type-of-account-they%E2%80%99re-having-and-gives-them-some-subscription-specific-data">The account page shows your members the type of account they’re having and gives them some subscription specific data.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>Provide the appropriate 'Page URL' as&nbsp;<code>/account/</code></li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Account' template, close the panel.</li><li>Finally, click 'Publish'.</li></ol>
</div>
<div class="docs-content" id="signup-signin-pages">
<small>Members</small>
<h2>Signup &amp; Signin pages</h2>
<h3 id="the-signup-and-signin-pages-are-allowing-your-visitors-to-sign-up-to-your-site-in-order-to-access-members-only-content">The 'Signup' and 'Signin' pages are allowing your visitors to sign up to your site in order to access members only content.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>Provide the appropriate 'Page URL' as <code>/signin/</code> for the 'Signin' page and <code>/signup/</code> for the 'Signup' page.</li><li>At the bottom of the panel, you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Signin' for the signin page and 'Signup' for the signup page.</li><li>Finally, click 'Publish'.</li></ol>
</div>
<div class="docs-content" id="membership-page">
<small>Members</small>
<h2>Membership page</h2>
<h3 id="the-membership-page-is-helping-your-visitors-to-quickly-visualize-and-compare-the-different-pricing-plans-you-offer">The 'Membership' page is helping your visitors to quickly visualize and compare the different pricing plans you offer.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Membership' template, close the panel.</li><li>Finally, click 'Publish'.</li></ol><h6 id="tip-how-to-add-premium-tier">Tip: How to add premium tier?</h6><ol><li>Go to the 'Tiers' settings in the Ghost Admin.</li><li>Click on the 'Connect with Stripe' and configure your Stripe account.</li><li>If you have Stripe connected, click '+Add tier' – add your own tier name, description, monthly and yearly prices and list of benefits.</li><li>Click 'Save &amp; close'.</li><li>Making tiers available to visitors – from the 'Portal settings', you can control which tiers appear on your site.</li></ol><h6 id="tip-how-to-add-description-and-list-of-benefits-to-free-tier">Tip: How to add description and list of benefits to free tier?</h6><ol><li>Go to the 'Tiers' settings in the Ghost Admin.</li><li>Click&nbsp;'Free'&nbsp;position and add your tier description and list of benefits.</li><li>Finally, click&nbsp;'Save &amp; close'&nbsp;to activate.</li></ol><h6 id="tip-how-to-add-position-to-faq">Tip: How to add position to FAQ?</h6><p>You can add FAQ items in your page content using the 'Toggle card' in the Ghost editor.</p><p><mark>The page content on the 'Membership' page only serves to add FAQ items, it is not designed for other types of content.</mark></p>
</div>
<div class="docs-content" id="subscribe-page">
<small>Members</small>
<h2>Subscribe page</h2>
<h3 id="the-subscribe-page-is-allowing-your-visitors-to-sign-up-to-your-site-in-order-to-access-members-only-content-and-receive-the-premium-newsletter">The subscribe page is allowing your visitors to sign up to your site in order to access members only content and receive the premium newsletter.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.</li><li>At the bottom of the panel you’ll see a dropdown menu titled 'Template'.</li><li>Use the dropdown menu to select the 'Subscribe' template, close the panel.</li><li>Finally, click 'Publish'.</li></ol>
</div>
<div class="docs-content" id="comments-2">
<small>Members</small>
<h2>Comments</h2>
<h3 id="the-native-comments-feature-in-ghost-allows-you-to-invite-members-to-join-the-discussion-and-participate-in-a-community-directly-on-your-website-alternatively-you-can-opt-for-the-disqus-option">The native comments feature in Ghost allows you to invite members to join the discussion and participate in a community directly on your website. Alternatively, you can opt for the <a href="https://disqus.com/" rel="noreferrer">Disqus</a> option.</h3><h6 id="ghost-comments">Ghost comments</h6><ol><li>To enable native comments, go to the 'Access' settings in the Ghost Admin.</li><li>Change the 'Commenting' level to 'All members' or 'Paid-members only'. </li><li>Finally, click 'Save' to activate.</li></ol><h6 id="disqus-comments">Disqus comments</h6><ol><li>Go to the&nbsp;'Design &amp; branding'&nbsp;settings in the Ghost Admin.</li><li>On the right you’ll see the tab 'Post' – expand this settings list and go to the&nbsp;'Disqus shortname'&nbsp;position.</li><li>Paste your&nbsp;'Disqus shortname', e.g. copy only&nbsp;<code>your-site</code>&nbsp;from&nbsp;<code>your-site.disqus.com</code></li><li>Finally, click&nbsp;'Save'&nbsp;to activate.</li></ol>
</div>
</div>
<div id="advanced"id="advanced"id="advanced"id="advanced">
<div class="docs-content" id="editing-a-theme">
<small>Advanced</small>
<h2>Editing a theme</h2>
<h3 id="to-edit-files-you-will-need-to-unzip-the-theme-archive-%E2%80%94-at-this-point-you-will-have-access-to-the-necessary-files-indicated-in-the-theme-documentation">To edit files, you will need to unzip the theme archive — at this point you will have access to the necessary files indicated in the theme documentation.</h3><h6 id="step-by-step">Step-by-Step</h6><ol><li>To edit your theme files, download a copy of the theme. For this purpose go to the 'Design &amp; branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner. </li><li>Use the 'Installed' tab menu in the upper right corner to download your theme, then unzip the theme locally.</li><li>Once the theme is unzipped, the files can be edited using an code editor – make the changes indicated in the theme documentation.</li></ol><blockquote>You can edit files using applications (code editor) such as <a href="https://www.sublimetext.com/" rel="noopener">Sublime Text</a>, <a href="https://code.visualstudio.com/" rel="noopener">Visual Studio Code</a> or <a href="https://brackets.io" rel="noopener">Brackets</a>. Using native text editors like TextEdit on macOS may add formatting may cause the theme to work incorrectly.</blockquote>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 3">
<li>When you’ve finished making changes to the theme code, re-zip the theme directory for uploading back to Ghost.</li>
</ol>
<!--kg-card-end: html-->
<blockquote>To create a zip archive on a macOS, right-click on the theme folder to view the context menu. Then, click the 'Compress' option. On Windows right-click on the theme folder, select 'Send to', and then select 'Compressed (zipped) folder'.</blockquote>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 4">
<li>To upload a theme, go to the 'Design & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.</li>
<li>Then click the 'Upload theme' button in the upper right corner.</li>
<li>Once uploaded, click 'Activate' to activate the theme on your site.</li>
</ol>
<!--kg-card-end: html-->
</div>
<div class="docs-content" id="updating-a-theme">
<small>Advanced</small>
<h2>Updating a theme</h2>
<h3 id="updates-to-the-theme-ensure-compatibility-with-the-latest-ghost-version-performance-improvements-and-minor-bug-fixes-so-it-is-important-that-you-use-the-latest-available-theme-version">Updates to the theme ensure compatibility with the latest Ghost version, performance improvements and minor bug fixes. So it is important that you use the latest available theme version.</h3><p><mark>If your theme features custom code, updating it with the latest versions will overwrite all your customizations.</mark></p>
<h6 id="step-by-step">Step-by-Step</h6><ol><li>Download the latest version of the theme, then unzip the archive locally.</li><li>Choose a theme version that is compatible with your Ghost version.</li><li>To upload a theme, go to the 'Design &amp; branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.</li><li>Then click the 'Upload theme' button in the upper right corner.</li><li>Once uploaded, click 'Activate' to activate the theme on your site.</li></ol><h6 id="tip-what-if-you%E2%80%99ve-already-edited-the-theme-and-want-to-update-it-without-losing-your-changes">Tip: What if you’ve already edited the theme, and want to update it without losing your changes?</h6><p>That’s a bit trickier to deal with but not impossible, as long as you can remember what the changes were, or more specifically which files you edited. Unfortunately in Ghost when updating a theme you have to re-enter your changes.</p><p>For more advanced users, it can be helpful to use a comparing files app like <a href="https://www.sublimemerge.com">Sublime Merge</a> – that way you can find your changes if you don’t remember them.</p><h6 id="tip-after-uploading-the-theme-my-settings-in-design-section-were-reset-what-should-i-do">Tip: After uploading the theme my settings in Design section were reset, what should I do?</h6><p>The best solution is to always use the same name e.g. <code>theme-name.zip</code> – that way you will not have to enter your settings again after uploading a theme.</p><blockquote>Ghost assigns the settings in the 'Design &amp; branding' section to the name of the uploaded archive. If you upload <code>theme-v1.zip</code> and <code>theme-v2.zip</code> – Ghost will recognize them as two different themes – so the settings will reset.</blockquote>
</div>
<div class="docs-content" id="theme-translation">
<small>Advanced</small>
<h2>Theme translation</h2>
<h3 id="translations-are-used-both-when-you-want-to-add-a-new-language-and-when-you-want-to-edit-current-phrases-used-in-the-theme">Translations are used both when you want to add a new language and when you want to edit current phrases used in the theme.</h3><h6 id="editing-current-phrases-used-in-the-theme-requires-theme-editing">Editing current phrases used in the theme (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>You’ll need to open the theme’s <code>../locales/en.json</code> file in your code editor.</li><li>Change the sentences used in the theme following the pattern:</li></ol><pre><code>{
"Old translate": "New translate",
...
}</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 2">
<li>After making your changes, save your file, compress the theme into a zip format, and upload it to Ghost.</li>
</ol>
<!--kg-card-end: html-->
<h6 id="translation-to-another-language-requires-theme-editing">Translation to another language (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>Inside the <code>../locales/</code> folder, add target language file for example <code>es.json</code> for Spanish and <code>pl.json</code> for Polish (a <a href="https://www.w3schools.com/tags/ref_language_codes.asp">valid language</a> code must be used).</li><li>Based on the translation from the <code>en.json</code> file, add translations for your language in your code editor. For example, for Spanish, use in the <code>es.json</code> file:</li></ol><pre><code class="language-json">{
"Back": "Volver",
"Newer Posts": "Artículos Siguientes",
"Older Posts": "Artículos Anteriores",
...
}</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 2">
<li>After making your changes, save your file, compress the theme into a zip format, and upload it to Ghost.</li>
<li>Then, go to the 'Publication Language' settings in the Ghost Admin.</li>
<li>Enter the correct language code into the 'Site language' field.</li>
<li>Finally, click 'Save' to activate.</li>
</ol>
<!--kg-card-end: html-->
</div>
<div class="docs-content" id="posts-per-page">
<small>Advanced</small>
<h2>Posts per page</h2>
<h3 id="the-number-of-posts-provided-will-depend-on-the-post-per-page-setting-which-you-can-configure-in-your-packagejson-file">The number of posts provided will depend on the 'post per page' setting which you can configure in your package.json file.</h3><h6 id="step-by-step-requires-theme-editing">Step-by-Step (<a href="#editing-a-theme" rel="noreferrer">Requires theme editing</a>)</h6><ol><li>You’ll need to open the theme’s <code>package.json</code> file in your code editor and find:</li></ol><pre><code>"config": {
...
"posts_per_page": &lt;value&gt;
...
}</code></pre>
<!--kg-card-begin: html-->
<ol style="counter-reset: li 1">
<li>Change the current value to the expected value.</li>
<li>Save your <code>package.json</code> file in root folder.</li>
</ol>
<!--kg-card-end: html-->
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="global-padding">
<div class="footer-copyright">
&copy; 2025 <a href="https://fueko.net">fueko</a>.
Made with ♥ for <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>. All Right Reserved.
</div>
<div class="footer-nav">
<nav>
<ul>
<li><a href="../../changelog-basho/index.html">Changelog</a></li>
<li><a href="../../third-party-materials-basho/index.html">Third-Party Materials</a></li>
<li><a href="https://fueko.net/privacy/">Privacy Policy</a></li>
</ul>
</nav>
</div>
<div class="global-top-button"><span>↑</span></div>
</div>
</footer> <script>
/* gumshoe
––––––––––––––––––––––––––––––––––––––––––––––––––––
Version : 5.1.1
Repo : github.com/cferdinandi/gumshoe
Author : Chris Ferdinandi
License : MIT
–––––––––––––––––––––––––––––––––––––––––––––––––––– */
!(function(t,e){"function"==typeof define&&define.amd?define([],(function(){return e(t)})):"object"==typeof exports?module.exports=e(t):t.Gumshoe=e(t)})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(t){"use strict";var e={navClass:"active",contentClass:"active",nested:!1,nestedClass:"active",offset:0,reflow:!1,events:!0},n=function(t,e,n){if(n.settings.events){var o=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n});e.dispatchEvent(o)}},o=function(t){var e=0;if(t.offsetParent)for(;t;)e+=t.offsetTop,t=t.offsetParent;return e>=0?e:0},s=function(t){t&&t.sort((function(t,e){return o(t.content)<o(e.content)?-1:1}))},c=function(e,n,o){var s=e.getBoundingClientRect(),c=(function(t){return"function"==typeof t.offset?parseFloat(t.offset()):parseFloat(t.offset)})(n);return o?parseInt(s.bottom,10)<(t.innerHeight||document.documentElement.clientHeight):parseInt(s.top,10)<=c},i=function(){return t.innerHeight+t.pageYOffset>=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},r=function(t,e){var n=t[t.length-1];if(function(t,e){return!(!i()||!c(t.content,e,!0))}(n,e))return n;for(var o=t.length-1;o>=0;o--)if(c(t[o].content,e))return t[o]},a=function(t,e){if(e.nested){var n=t.parentNode.closest("li");n&&(n.classList.remove(e.nestedClass),a(n,e))}},l=function(t,e){if(t){var o=t.nav.closest("li");o&&(o.classList.remove(e.navClass),t.content.classList.remove(e.contentClass),a(o,e),n("gumshoeDeactivate",o,{link:t.nav,content:t.content,settings:e}))}},u=function(t,e){if(e.nested){var n=t.parentNode.closest("li");n&&(n.classList.add(e.nestedClass),u(n,e))}};return function(o,c){var i,a,f,d,v,m={};m.setup=function(){i=document.querySelectorAll(o),a=[],Array.prototype.forEach.call(i,(function(t){var e=document.getElementById(decodeURIComponent(t.hash.substr(1)));e&&a.push({nav:t,content:e})})),s(a)},m.detect=function(){var t=r(a,v);t?f&&t.content===f.content||(l(f,v),(function(t,e){if(t){var o=t.nav.closest("li");o&&(o.classList.add(e.navClass),t.content.classList.add(e.contentClass),u(o,e),n("gumshoeActivate",o,{link:t.nav,content:t.content,settings:e}))}})(t,v),f=t):f&&(l(f,v),f=null)};var p=function(e){d&&t.cancelAnimationFrame(d),d=t.requestAnimationFrame(m.detect)},h=function(e){d&&t.cancelAnimationFrame(d),d=t.requestAnimationFrame((function(){s(a),m.detect()}))};m.destroy=function(){f&&l(f,v),t.removeEventListener("scroll",p,!1),v.reflow&&t.removeEventListener("resize",h,!1),a=null,i=null,f=null,d=null,v=null};return v=(function(){var t={};return Array.prototype.forEach.call(arguments,(function(e){for(var n in e){if(!e.hasOwnProperty(n))return;t[n]=e[n]}})),t})(e,c||{}),m.setup(),m.detect(),t.addEventListener("scroll",p,!1),v.reflow&&t.addEventListener("resize",h,!1),m}}));
/* Custom settings for gumshoe */
var sidebar = document.getElementById("sidebar");
if (sidebar) {var spy=new Gumshoe('.sidebar-list a',{nested:true})}
</script>
<script>document.addEventListener("DOMContentLoaded",function(){const n=document.body,g=document.querySelector(".global-top-button");window.addEventListener("scroll",function(){1500<window.scrollY?n.classList.add("is-scroll-back"):n.classList.remove("is-scroll-back")}),g.addEventListener("click",function(){window.scrollTo(0,0)});window.addEventListener("scroll",function(){50<window.scrollY?n.classList.add("is-scroll-nav"):n.classList.remove("is-scroll-nav")})});</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink