Tiny Support Documentation

Thank you for purchasing this theme. This guide outlines how to get set up, how to manage content, and how to customise the theme. We assume you are familiar with Ghost so we’ve only outlined steps specific to the theme. For more general Ghost help please check Ghost’s website.

Uploading the theme

1. In Ghost Admin go to Settings → Design & Branding → Customize → Change thtme (bottom right)
2. Click Upload theme in top right
3. Upload the theme-name.zip folder, then select the theme and click Activate

More details can be found on Ghost’s website if needed.

Initial Setup

This theme requires a few initial steps to make Ghost perfect for use as a knowledge base. After this setup, managing content will be straightforward to anyone familiar with Ghost.

Routes (required)

You must do this for the theme to function correctly.

1. In Ghost Amin to to Settings → Labs (under 'Advanced' heading) → Open
2. Click Upload routes file . Note: uploading a new routes file will overwrite your existing routes. We recommend clicking Download current routes first to make a backup.
3. Upload the included routes.yaml file

Creating a Topics page (optional but highly recommended)

1. Create a new page (not post). Call it ‘Topics’.
2. In the sidebar, choose Template → Topics Page. Ensure the Page URL is also ‘topics’.
3. Add this page to the navigation at Settings → Navigation → Customize → Primary

Creating an FAQs page (optional)

First create some FAQ posts:

1. Create a new post. Set the title to a question, e.g. ‘How do I upgrade my account’. Set the body to the answer. We recommend keeping this short and simple.

In the sidebar, tag this post as #faq. The hash makes this tag internal only so users won’t see it.

Now create the FAQ listing page:

1. Create a new page (not post). Give it any title, but we recommend ‘FAQs’.
2. In the sidebar, choose Template → FAQs Page
3. Add this page to the navigation at Settings → Navigation → Customize → Primary

This page will now display any posts tagged #faq. The homepage will also display an FAQs block with 6 posts.

Populating the homepage

The homepage is made up of blocks which pull content from various places, outlined below.

Signposts

Use this to highlight three main topics.

At Settings → Design & branding → Theme → Signposts, enter 3 tag slugs separated by commas. If left blank, this block won’t appear.

Each tag should have a Tag image (SVG icon), Color and Description (recommend max 80 characters) set at Tags → [Tag Name] → Edit tag.

Featured articles

This displays any posts which have been marked as featured at Post → [Post Title] → Sidebar → Feature this post.

Recommend approx 6 posts. If left blank, this block won’t appear.

Popular topics

This displays a card for each topic, with up to 6 posts for each topic.

At Settings → Design & branding → Theme → Popular Topics, enter 3 tag slugs separated by commas. If left blank, this block won’t appear.

Adding a call to action

This displays a call to action at the bottom of most pages.

Content is entered at Settings → Design & branding → Customize → Theme → CTA heading/text/button etc. If no CTA heading is provided, this block won’t appear.

Creating topics

Each ‘topic’ is a tag in Ghost. Use these to create groups of articles. E.g. ‘Account and Billing’ and ‘Getting Started’.

We recommend only adding one tag to each post, but you can add multiple tags if needed. Only one tag will be output in breadcrumb navigation, so you should make the first tag the ‘main’ tag.

Adding a table of contents sidebar to articles

When creating a post, in the sidebar choose Template → Default for a standard single-column post.

Choose Template → Post – Sidebar to add a sidebar with a table of contents. This automatically inserts a table of contents with in-page links to each of your Heading 2 and Heading 3 headings.

Adding a contact page with support ticket form

Add a contact page so users can submit a support request ticket form. You need to have an account with a form endpoint service like Getform, Formspree, Kwes or Formkeep.

First, add your form endpoint:

1. Generate your endpoint. You do this within your form endpoint service by creating a new form (don’t add any fields). E.g. instructions for Getform and Formspree. I till look something like https://formspree.io/f/abcdxyz
2. Paste this endpoint (e.g. into Settings → Design & branding → Customize → Site-wide → Contact form endpoint and hit save.

Now, add a contact page

1. Create a new page (not post). You can call it anything, e.g. ‘Contact’ or ‘New Support Ticket’
2. In the sidebar, choose Template → Contact Page
3. Add this page to the navigation at Settings → Navigation → Customize → Primary
4. Optional: If you want this to appear as a button in the navigation, go to Settings → Design & branding → Customize → Site-wide and enable Last nav item is button

Optional: add a confirmation page

Most endpoint services allow you to redirect to a custom URL after form submission. We recommend creating a page using the Default template, calling it something like ‘Thank You’, and setting your endpoint service to point at this after submission.

Customising the theme

The theme provides a range of carefully selected options more which can totally transform them look & feel of the site, without being overwhelming.

In Ghost Admin, open Settings → Design & branding → Customize. In the Brand tab you will see Ghost’s default customisation settings. In the Theme tab you will find settings specific to the theme. Some of these relate to content and are explained above. Others relate to design:

Changing colors

1. Open Settings → Design & branding → Customize
2. In the Brand tab, choose an Accent color. This is used for buttons and other accents.
3. In the Theme tab, choose which Grays to use. Either Warm or Cool

Changing header design

A few changes to the header can totally transform he feel of the theme.

1. Open Settings → Design & branding → Customize → Theme
2. Choose a Header layout - Full Width or Contained (works well with rounded corner options, see below)
3. Choose a Header background color. We recommend doing this even if using a background image, as a fallback.
4. Choose a Header background image (optional). We have provided some examples in the header-backgrounds folder for inspiration. See tip below if you need to customise image sizing.
5. If your header background is dark, enable the Header is dark option. This will make text and buttons white to ensure legibility.

Changing border-radius rounding

1. Open Settings → Design & branding → Customize → Theme
2. Button rounding controls the border-radius of buttons
3. Other rounding controls the border-radius of topic cards, search inputs, and the header (if its Header layout is set to Contained)

Changing fonts

1. Open Settings → Design & branding → Customize Either:
2. In the Brand tab, use the Heading font and Body font fields to choose from Ghost’s fonts.
3. Or in the Theme tab, use the Heading font and Body font fields to choose from a wider selection of carefully curated fonts. All these fonts are free to use and served via Bunny so they are GDPR compliant

Tip: changing the logo size

1. Go to Settings → Code injection (under advanced) → Open
2. In the Site header field, enter the below code. Replace {value} with your width, e.g. 120px
3. Click Save in top right

<style>
:root {
   --site-logo-width: {value};
}
</style>

Tip: adjusting the header background image

1. Go to Settings → Code injection (under advanced) → Open
2. In the Site header field, enter custom CSS to rules for the .site-header element. For example, you could control the size and position using the code below.
3. Click Save in top right

<style>
.site-header {
  background-size: 150% auto;
  background-position: top left;
}
</style>

Tip: adjusting the navigation breakpoint

If you have lots of navigation items, you might need to adjust when the navigation switches to the hamburger off-canvas panel.

1. Go to Settings → Code injection (under advanced) → Open
2. In the Site header field, enter the below code. Replace {value} with your width, e.g.1024px
3. Click Save in top right

<style>
:root {
   --breakpoint-nav: {value};
}
</style>

Tip: adjusting syntax highlighting

Code highlighting is handled using the Prism.js library. In partials/prism.hbs you can choose which Prism.js theme to use.