Braun Documentation

Changelog

Braun Changelog

Latest update 🚀

Themex StudioTrong Themex

Introduction

Since this is a Ghost theme documentation, you are assumed to have a basic knowledge of the Ghost app.

If you're starting with Ghost, it is best to see the guides in the official Ghost Help Center – check this out, and you'll have all the available information.

Getting Started

Welcome

Braun theme concept is built for flexibility and easy customization. It leverages existing Ghost features of tags & pages to help you customize your own Ghost site from the Ghost admin interface.

Looks like you're just getting started. Don't worry, we're here to help you build an amazing website.

To kick things off, here are some helpful guides:

1. Import internal tags or demo content (internal tags, hero, blog)
2. Crafting a compelling hero section - Make a lasting first impression with a stunning hero section.
3. Launching your Blog page - Share your thoughts, experiences, and expertise with a dedicated blog.
4. Showcasing your success stories - Highlight your achievements and inspire others with captivating case studies.
5. Curating valuable resources - Provide your visitors with a collection of useful resources.

Install Theme

Upload Zip File

To begin, unzip the downloaded package by double-clicking it on a Mac or by right-clicking and selecting "Extract All" on Windows.

Inside the new Braun folder, you will find the Kyoto.zip theme file and an online documentation file.

Step-by-Step to Upload the Theme to Your Website

1. Log in to your Ghost website admin (example.com/ghost).
2. Click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
3. Go to Design & branding > Customize > Change Theme.
4. Click Upload theme and select the Braun.zip theme file.
5. Once uploaded, click Activate now to activate the theme.

Upload Routes.yaml

The routes.yaml is required if you want to show the following pages:

1. Works
2. Blog
3. Course
4. Serie or Timeline
5. Books
6. Gallery

If you don’t want any page above, you can skip this step.

Step-by-Step to Upload the File:

1. Unzip the Braun.zip theme file.
2. In your Ghost admin, click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
3. Go to Labs and click Open.
4. Click the Upload routes YAML button.
5. Select and upload the routes.yaml file inside the theme folder.
6. Done

Import internal tags (optional)

This step is to import all the available tags we will use to create content on the homepage.

After importing tags, you can select them from Ghost admin without worrying about typo mistakes that can cause the theme to not work as expected.

1. In your Ghost admin, go to Settings > Advanced > Import/Export.
2. Under Export, click Export content. This ensures you have a full backup of your current data. Once done, proceed to the next step.
3. Under Import, click Universal import.
4. Select and upload the internal-tags.json file from the unzipped theme folder.
5. Now, navigate to the Tags page within your admin panel to view all available tags under Internal tags.
6. That's all for the theme installation!

Import demo content (optional)

Demo content accelerates your theme setup by providing a fully configured example of the theme's capabilities. Instead of building from scratch, you'll have working examples of content structures, internal tags that showcase best practices for your theme's features.

Before importing demo content, export your existing content as a backup.

To import the demo content:

1. Navigate to Settings > Advanced > Import/Export
2. Under Import, upload the demo-content.json file from your theme directory
3. The demo content includes:

• Homepage sections (hero, blog, case studies, resources)
• Internal tags for content organization
• Sample pages and layouts

To manage demo content:

1. Go to Pages
2. Filter by the Demo tag
3. Edit or replace the content with your own

The demo content provides a foundation to understand the theme's structure and capabilities. You can modify, remove, or expand upon these sections using the theme's built-in components and layouts.

Now let’s move on to creating your homepage.

Build Your Homepage

Homepage Sections

After uploading the theme and uploading the routes.yaml file, the homepage is still empty.

To get started, let’s add the two essential parts of your website: Hero section and blog section.

Let’s watch this short video to learn how to build your homepage.

[TK video]

The homepage is built around tags and pages, so you can update them from the Ghost admin UI with no coding required.

• Homepage content includes different sections, such as hero, blog, static text, testimonials…
• Each section is a page with represented internal tags you can create from Ghost admin. This gives you full flexibility to edit and customize your content.
• The sections' order is displayed in chronological order (oldest first). You can adjust the order by simply changing the "Publish date" in the Page settings.

Here are the available sections of the homepage with their represented tags.

1. Hero section #section-hero
2. Blog #section-blog
3. Logos #section-logos
4. Side projects #section-side-projects
5. Case studies #section-case-studies
6. Resource #section-resource
7. Testimonials #section-testimonials
8. Static text #section-static-text
9. Static banner #section-static-banner
10. Work experiences #section-experiences
11. Books #section-books

Hero Section

The hero section is permanently set to the top section of the homepage.

Step-by-Step to Add Hero Section

1. In Ghost admin, create a new page.
2. Add your featured photo, title, and content.
3. Open page settings, add #section-hero to Tags input.
4. Publish and open the homepage to check.

The final page content should look like the following:

Hero Section Styles

Braun supports different styles for hero sections. You can choose your favorite one at Ghost admin > Settings > Design & branding > Homepage > Hero layout.

Adding Background to Hero Section

Make your hero section stand out more with a background color.

You can add it from Ghost admin. The theme is using the accent color from the tag #section-hero for this.

Step-by-Step to Add Background Color to Hero Section

1. In Ghost admin, go to Tags.
2. Under Internal tag, click #section-hero to go to that tag detail.
3. Select a color from Color input.
4. Save and done.

Using Video in Your Hero Section

Add dynamic video backgrounds to your site's hero section with these simple steps.

Requirements

• Self-hosted video file (MP4 format recommended)
• Direct URL to your video file
• Note: YouTube/Vimeo links are not supported

Step-by-Step

Upload your video file:

• Use your Ghost site's media library, or
• Upload to any file hosting service that provides direct video URLs

Configure the hero video:

• Navigate to the Page that you created as Hero Section
• Go to Page Settings → X Card
• Paste your video URL into the "X Description" field
• Click Update

Best Practices

• Keep video file size under 10MB for optimal loading
• Use short loops (15-30 seconds)

Troubleshooting

If your video doesn't appear:

• Verify the URL is direct to the video file (.mp4, .webm, etc.)
• Check that the URL is publicly accessible

Clear your browser cache and refresh

Blog Section

The blog section will contain the latest posts that you published and a shortcut link to go to the /blog page.

Step-by-Step to Add the Blog Section

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. From the Page settings, ensure that the Page URL setting is blog.
4. Add #section-blog to Tags input.
5. Publish and open the homepage to check.

The final page content should look like the following:

Different Post Styles

Braun supports different post styles and different featured image aspect ratios.

• Card
• Expanded
• Right thumbnail
• Text-only
• Minimal

You can set your favorite style at Ghost admin > Settings > Design & branding > Homepage > Blog article layout and Blog image orientation for the post image ratio (Landscape, Square, Portrait).

The post style will be applied across the site, including the homepage, blog, and related post under the post detail page.

To create the Blog page, head to create a blog page.

Exclude Posts from Blog Feed on Homepage

Control which posts appear on your homepage feed by excluding specific tags.

Step-by-Step to Exclude Posts

1. Go to Settings > Design & branding > Homepage
2. Find Excluded tags
3. Enter tag slugs separated by commas (e.g., internal,draft,private)
4. Click Save

Posts with these tags won't appear in the homepage feed but remain accessible via direct links or tag pages.

Logos Section

Sometimes you want to show some kind of social proof, and a logo board can help achieve that.

Step-by-Step to Add Logo Board

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the homepage.
3. Upload all logos you want to show on the homepage. Note: Don’t add any break lines above, between, or after the Images. It will create some odd alignment.
4. In the Page Setting sidebar, add a tag named: #section-logos.
5. Publish and check your homepage.

The final page content should look like the following:

Side Projects Section

You can add a side project section (or a section to show any link).

Step-by-Step to Add Side Project Section on Homepage

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. Add #section-side-projects to Tags input.
4. Publish.

The final page content should look like the following:

Now the side project section is visible on the homepage. Next, to add content for that section

Step-by-Step to Add Side Project Content

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter information for this project. Page title as the title, Excerpt as the project description, X description as project subtitle. Featured photo is optional.
3. Tag the page as #content-personal-project.
4. (Optional) If you want to lead visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
5. Publish.
6. Repeat the same steps to create different content blocks for the side projects section.

The final page content should look like the following:

Case Studies Section

You can add a case study section to showcase your important projects or achievements. The case studies section is the most prominent section of the homepage.

Step-by-Step to Add Case Studies Section on Homepage

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. On the Page settings, ensure that the Page URL setting is works (This is for the purpose of creating a separate page for works. If you don’t need a separate page, you can use any URL).
4. Add #section-case-studies to Tags input.
5. Publish.

The final page content should look like the following:

Now the case study section is visible on the homepage. Next, to add content for that section.

Add Case Studies

Step-by-Step to Add a Case Study

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter information for this project. Page title as the title, Excerpt as the project description, X description as project subtitle, and featured image.
3. Tag the page as #content-case-study.
4. (Optional) If you want to lead visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
5. Publish.
6. Repeat the same steps to create different content blocks for the case studies section.

The final page content should look like the following:

Change Case Study Layout

For the case study card, the theme provides two options:

• Grid: two cards side by side.
• Full row: one card in a row.

1. Go to Ghost admin > Settings > Design & branding > Homepage > Hero layout.
2. At Case study card style, select your choice.
3. Save.

Resources Sections

When you have some resources you want to show, such as helpful tools, newsletters, or bookmark links, resource sections are ideal for that. You can add as many resource sections as you want. Each section follows the same creation flow.

First, let’s start by adding some resource content to the Ghost CMS.

Step-by-Step to Add Resource Content

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the information for this resource:

• Page title as the title
• Excerpt as the project description
• X description as the project subtitle
• Featured photo (optional)

1. Tag the page with any name you like, but it’s recommended to use internal tags that start with # (e.g., #podcast, #bookmark). We will use the tag name later.
2. (Optional) If you want to direct visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
3. Publish.
4. Repeat these steps to create different content blocks for the side projects section.

Resource card anatomy

Step-by-Step to Add Resource Section on Homepage

1. In Ghost admin, create a new Page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. In Page settings, add #section-resource to the Tags input.
4. In Template dropdown, choose Page Resource
5. Click on X Card and add the tag slug of the resource content you created in the previous step in the X description input. In this example, we’re using tools.
6. Publish and preview it on your homepage.

The final page content should look like this:

Repeat these two steps to create different resource sections on the homepage. You can have as many resource sections as you want.

Some notes:

• If you want to hide the link section, add #no-link to the Tags input.
• To create separate pages for each resource, refer to [TK resource page link].

Testimonials Section

To add a testimonials section, create a new page, give it a title, then add an internal tag #section-testimonials in the page settings.

Step-by-Step to Add Testimonial Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
4. On the product card, fill in the details:
   • Title is the testimonial main text.
   • Description shows a person's name and job title.
   • Image as a profile picture.
   • Stars as a rating.
5. Add more Product cards to add more testimonials.
6. In the Page Setting sidebar, add a tag named #section-testimonials.
7. Publish and check your homepage.

The final page content should look like this:

Static Text Section

The static text section is useful for adding custom text on the homepage, such as your services, working principles, or values.

To add a static text section, create a new page, give it a title, then add an internal tag #section-static-text in the page settings.

Step-by-Step to Add Static Text Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
4. On the product card, fill in the title, description, image, and link (optional).
5. Add more Product cards to add more static text cards.
6. In the Page Setting sidebar, add a tag named #section-static-text.
7. Publish and check your homepage.

The final page content should look like this:

If you want to create separate sections using Static text, create a new page and repeat the same steps above.

Static Banner Section

If you prefer to show static images instead of text, you can use the static banner section.

You can repeat the same steps as creating the static text section but use the internal tag #section-static-banner.

Step-by-Step to Add Static Banner Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
4. On the product card, upload the image and link (if any). Title and description are optional.
5. Add more Product cards to add more banners.
6. In the Page Setting sidebar, add a tag named #section-static-banner.
7. Publish and check your homepage.

The final page content should look like this:

Work Experiences Section

This section is to showcase your work history.

Step-by-Step to Add Work Experiences Section

1. In Ghost admin, create a new Page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. Add #section-experiences to the Tags input.
4. Publish.

The final page content should look like this:

Now the Work experiences section is visible on the homepage. Next, add content for that section.

Step-by-Step to Add Work Experience Content

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the information for this project. Refer to the screenshot below.
3. Tag the page as #content-experience.
4. Click Publish.

Edit Shortcut Button

The Edit shortcut button provides quick access to edit pages/posts directly from your site's frontend. When enabled, it appears as a buttonn next to the section on the homepage that links to the Ghost admin editor to edit that page.

Enable/Disable Edit Mode

The edit shortcut button visibility is controlled by the Edit mode setting.

Step-by-Step to Enable Edit Mode:

1. Go to Ghost Admin > Settings > Design & branding > Theme
2. Find the Edit mode toggle switch
3. Switch on to show the edit button, off to hide it
4. Click Save

Other Customizations

Section Colors

You can add custom background colors for each section on the homepage by adding an Accent color for the respective internal tags.

Hide Section Title

If you want to hide the section title, add #no-title to the Tags input.

Hide Section Link

If you want to hide the link section, add #no-link to the Tags input.

Other pages

Blog page

A blog page displays all your posts in Ghost.

If you've already [created a blog section on the homepage](TK Link), you can skip this step to create a blog page.

Step-by-Step to create the blog page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Blog').
3. Add a description or feature image for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is blog.
6. Click Publish.

Now you have a blog page with the URL yourblog.com/blog.

Blog category header

By default, the blog category header shows the top 5 tags sorted by the number of posts for each tag. You can also define which tags you want to display in the header.

Step-by-Step to add custom items on the category header

1. From Ghost admin, go to Settings > Design & Branding > Homepage.
2. In Blog category navigation, enter the slugs for each tag, separated by commas without any whitespace (e.g., design,code,mindset).
3. Click Save.

The final page content should look like this:

Add featured items to the category header

You can create a separate page to showcase all featured posts and add it to the category header.

Step-by-Step to add a featured page to the category header:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Featured Posts').
3. Add a description or feature image for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is featured-posts.
6. Click Publish.

Post styles

The theme supports different styles for the post feed. Please check [TK Different post styles for blog section].

Work or Case Study page

This page serves as your portfolio, showcasing your work experiences, side projects, testimonials, and case studies.

If you've already created a [case studies section](TK Link), you can skip this step to create the work page.

Step-by-Step to create the work page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Works').
3. Add a description for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is works.
6. Click Publish.

Now you have a work page with the URL yourblog.com/works.

All the block content of this page is the same as the options on the homepage. Refer to the homepage customization to adjust content for this page.

Books page

A page to showcase the books you're currently reading and your library.

Step-by-Step to create the books page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Books').
3. Add a description and featured image for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is books.
6. Click Publish.

Now you have a books page with the URL yourblog.com/books.

Add content for the books page:

1. Create a new post and write your content.
2. Tag it as books.
3. Click Publish.

Book card anatomy:

Add current reading section:

1. Open the post for the book you're reading.
2. In the post settings, add the tag #book-reading.
3. Click Update.

Now page

Now is a nice place for you to show what this person is focused on at this point in their life.

It’s inspired by nownownow.com projects. But we treat it differently by showing the whole history of the page, not just the latest update.

Step-to-Step to create the Now page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Now').
3. Add a description and featured image for this page (if you want to).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure that the Page URL is now.
6. Click Publish.
7. Now you have a work page with the URL yourblog.com/now.

Add content for Now page:

1. Create a new Post and write your content.
2. Tag it as Now.
3. Click Publish.

Now will show all the posts tagged as Now and sort it by created time, from latest to oldest. Also those posts are only showing on the Now page, not on the Home or Blog page.

Timeline page

This custom page is designed for a linear reading experience, suitable for showcasing milestones or timeline.

Create a timeline page with the series template

You can use this template to create multiple pages. Update the routes.yaml file to configure the URL and tag data.

Step-by-Step to create the timeline page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Timeline').
3. Add a description and featured image for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is timeline.
6. Click Publish.

Add content for the timeline page:

1. Create a new post and write your content.
2. Tag it as #timeline.
3. Click Publish.

This will display all the posts tagged as #timeline and sort them by creation time, from latest to oldest.

Series default vs. Series full

The theme provides two series options: Default and Full. The default template shows the entire post content, while the Series Full template only displays the title, excerpt, and featured photos. Choose the one that best suits your needs.

Hide "On this page" or Table of Contents section

If you don't want the Table of Contents on this page, you can hide it by tagging the page as #u-hide-overview.

Step-by-Step:

1. In the Ghost admin page, go to Pages and find the timeline page you want to hide the Table of Contents on.
2. In the page settings, add the tag #u-hide-overview.
3. Click Update.

Course page

Similar to Timeline page, but here you can create your own courses.

Create a course page with the series template

Step-by-Step to create the timeline page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Course').
3. Add a description and featured image for this page (optional).
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is course.
6. Click Publish.

Add content for the Course page:

1. Create a new post and write your content.
2. Tag it as course.
3. Click Publish.

This will display all the posts tagged as course and sort them by creation time, from latest to oldest.

Posts

The theme provides different post templates:

1. Default
2. Narrow featured image
3. Full featured image
4. No featured image

To choose which template to use when you publish a post:

1. In the post editor page, click the icon in the top right corner to open the Post settings.
2. Find the Template selector and choose the style you want for your post.

Post page options

The theme supports other customizations:

1. Hide/Show author
2. Hide/Show social sharing buttons
3. Hide/Show subscription box in the post page

Customize visual for case study page

You might want to create a special visual for some pages, like the hero header of your case study page. You can do this with Kyoto and Ghost.

Step-by-Step to create the special header for pages:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add your page's content: title, content, excerpt, featured image, etc.
3. At the top of the content area, add a Header card by clicking the plus icon or typing / and choosing Header from the list.
4. Add a custom title and upload a photo.
5. If you want to show the full photo (without cropping on different screen sizes), hover over the photo area and click the collapse arrow icon. You can also choose a custom background color for this section.
6. In Page settings, turn off Show title and feature image.
7. Click Publish.

Here's a quick guide:

Contact page

To provide a way for your readers to contact you, create a contact page using Formspree.

Step-by-Step:

1. Create a new page and give it a title (e.g., 'Contact').
2. Add a feature photo (optional) and choose a layout from the Template option.
3. Choose any template; a special template named "Page" is available under the template option. You can choose any other template as well.
4. Add your content and the contact form code using Formspree. See the code example below.
5. Click Publish.
6. To add the page to the navigation, refer to the Navigation section.

<form id="fs-from" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/{your_form_id}" method="post">
  <fieldset id="fs-from-inputs">
    <label for="full-name">Your name</label>
    <input type="text" name="name" id="full-name" placeholder="e.g. John" required>
    <label for="email-address">Email address</label>
    <input type="email" name="_replyto" id="email-address" placeholder="[email protected]" required>
    <label for="message">Message</label>
    <textarea rows="9" name="message" id="message" placeholder="Your message…" required></textarea>
    <input type="hidden" name="_subject"

 id="email-subject" value="Contact Form Submission">
  </fieldset>
  <input type="submit" class="button button-primary" value="Send">
</form>

Gallery Page

Create a dedicated page to showcase photos or artwork in a masonry grid layout.

Step-by-Step to Create Gallery Page

1. In Ghost admin, go to Pages > New page
2. Add title (e.g., 'Gallery')
3. Add content description (optional)
4. In Page settings, ensure:
   • Page URL is gallery
5. Click Publish

Add Content to Gallery

1. Create a new post
2. Add photos using the Ghost editor
3. Tag the post as #gallery
4. Publish post

The gallery page will display all posts tagged with #gallery in a masonry grid layout.

Dark page

Besides supporting a light/dark theme for the entire website, this theme allows setting specific pages to dark mode.

For instance, if your default theme is light, but you want certain pages (e.g., Gallery page) to be dark, you can achieve this.

Step-by-Step:

1. In the Ghost admin, go to any page or post you want to set to dark mode.
2. Open the Page/Post settings panel.
3. In the Tags input, add the tag #dark.
4. Click Update.

Custom settings

Colors

The theme supports changing the Accent color and offers 8 different color combinations.

Set Accent Color

The Accent color is the primary color used throughout your publication theme in buttons, social sharing hovers, etc. You can change the theme Accent color from the Ghost admin.

Change the Accent color from the admin Settings > Design & Branding > Customize > Brand > Accent color.

Preset Color Combinations

The theme provides 8 different color combinations. Choose the one that fits your style:

• Default
• Onyx
• Rust
• Fossil
• Mint
• Ember
• Ice
• Maelstrom

†Step-by-Step to choose your preferred color combination:

1. Change the Accent color from the admin Settings > Design & Branding > Customize > Site Wide.
2. Click on Color combinations and select your color combination.
3. Preview and Save.

Light / Dark Mode

(For version v1.2.2 and above)

You can easily switch between light, dark, system, or user-define modes directly from your Ghost admin panel.

The theme supports:

• Light
• Dark
• System-based
• User define

Step-by-Step to customize

1. Go to Settings > Design & branding > Site wide from the admin menu
2. Choose a preferred mode by clicking on Appearance
3. Click Save

Typography

Depending on the selected option, this setting will change the heading and body text fonts.

Custom Fonts (Beta)

(For versions 1.2.2 & above)

Ghost now provides built-in custom font functionality, allowing users to select heading and body fonts from a curated list directly in the admin interface.

Ghost will release it soon. Now, you can enable it in Labs settings to access curated heading and body fonts through the admin interface.

Step-by-Step to enable custom font

• Go to Labs section in Ghost admin
• Enable the Custom Fonts beta feature

Step-by-Step to change fonts:

1. Go to Settings > Design & branding > Customize > Site Wide
2. Under Typography, select:
   • Title font for headings
   • Body font for main text
3. Click Save

Default Font-Pairing

(For versions below 1.2.0)

Braun has two variants of font-pairing:

1. Modern sans-serif (Default): The theme uses system fonts which adapt based on the OS.
2. Elegant serif: The theme uses Cardo as the default font for an elegant style.

Step-by-Step to customize:

1. Go to Settings > Design & Branding > Customize > Site Wide.
2. Choose a font for titles/headings by clicking on Title font.
3. Choose a font for the body by clicking on Body font.
4. Click Save.

Change to Any Fonts

You can change any font from the Ghost admin interface using Code Injection and Google Fonts. For example, if you want to use "Inter" and "EB Garamond" fonts from Google Fonts, your code in Code Injection will be:

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&family=Inter:wght@400;700&display=swap" rel="stylesheet">

<style>
  :root {
    --font-base: 'Inter', sans-serif;
    --font-serif: 'EB Garamond', serif;
  }
</style>

You can also use your custom local font by including it in your theme with a code editor. This technique is more advanced but allows you to add 'your own' fonts.

Header Navigation

Step-by-Step to add an item to header navigation:

1. Go to Settings > Navigation > Primary Navigation.
2. Type the page's name in the label field as you'd like it to appear on your menu.
3. Click on the item's URL. The blog URL will already be auto-populated.
4. When satisfied with your page configurations, click the Save button.

Group Header

To group footer items into different groups, add # before group header names.

Header item icons

The theme automatically matches navigation item names with corresponding icons.

For example, if you have a navigation item named "Work", the theme will use the work icon.

Default icons and their aliases

The theme includes these default icons, along with common name for each:

• home - Use with: Home, Homepage, Main Page, Start, Dashboard
• blog - Use with: Blog, Posts, Articles, Writing, Journal, Latest Posts
• work - Use with: Work, Portfolio, Projects, Case Studies, My Work, experience, My projects, Showcase, Achievements, Career, Work history
• books - Use with: Books, Library, Reading, Bookshelf, Book Notes, Publications, My library, Reading list, Recommended books'
• tools - Use with: Tools, Resources, Utilities, Software, Tool Kit, Gear
• now - Use with: Now, Current, Updates, What's New, Status
• course - Use with: Course, Courses, Learning, Tutorials, Lessons, Education
• faq - Use with: FAQ, Help, Questions, Help Center, Support
• about - Use with: About, About Me, Biography, Info, Introduction
• contact - Use with: Contact, Social, Connect, Get in Touch
• bookmarks - Use with: Bookmarks, Favorites, Saved, Reading List, Collections
• podcasts - Use with: Podcasts, Audio, Episodes, Shows, Broadcasts
• newsletters - Use with: Newsletter, Digest, Updates, Email Updates, Subscription
• contact - Use with: Social, Connect
• gallery - Use with: Gallery, Photos, Images, Portfolio, Albums, Showcase
• Social icons: instagram, twitter, linkedin, facebook, github, shop, youtube

You can use any of these name in your navigation labels, and they will automatically use the corresponding icon. For example, "My Library" will use the books icon, "Latest Posts" will use the blog icon.

Custom icons

There is a way to add icons to nav items from the Ghost admin. It will require from you to provide a menu label/slug and SVG icon.

Step-by-Step to add custom icons

1. Go to Settings > Code Injection
2. Add the icons to the Site footer

This is an example code to add an icon to the page with label Author:

<script>
window.navIcons?.setIcon(
	'author', 
	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`
);
</script>

If you want to add multiple icons, and your navigation text is more than one word (i.e. Reading list), then the keyword should be reading-list

Here is the code:

<script>
window.navIcons?.setIcon(
	'author', 
	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`
);

window.navIcons?.setIcon(
	'reading-list', 
	`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`
);

</script>

We recommend using popular icon libraries. Here are some tested and recommended options, though you can choose any library you prefer:

• Lucide
• FontAwesome
• Untitled
• Bootstrap
• Hero Icons

Hide/Show Navigation Icons

Control the visibility of navigation menu icons from Ghost admin.

Step-by-Step to Hide Navigation Icons

1. Go to Settings > Design & branding > Site wide
2. Find Show navigation icons toggle
3. Switch off to hide icons, on to show them
4. Click Save

Header Call-to-Action Buttons

The theme supports two types of header CTA buttons:

1. Subscription buttons (default option with Subscribe and Signin actions)
2. Custom CTA button with custom text and link

Configure Header CTA

Step-by-Step to customize the header CTA:

1. Go to Settings > Design & branding >Theme
2. Scroll to Navigation buttons and choose:
   • Subscription: Shows default Ghost membership buttons (Subscribe/Sign in/Account)
   • Custom: Allows you to set custom button text and link
   • Off: Hides the CTA buttons completely

Custom CTA Button

When "Custom" is selected, you can configure:

1. Navigation buttons text: The text to display on the button (e.g., "Contact Us", "Get Started", etc.)
2. Navigation buttons link: The URL where the button should link to (e.g., "/contact", "https://example.com", etc.)

Example configurations:

• Contact button:
  • Text: "Contact Us"
  • Link: "/contact"
• External link:
  • Text: "View Pricing"
  • Link: "https://example.com/pricing"

Note: When using custom CTA, membership buttons will not be shown even if memberships are enabled on your site.

Footer

Like the header, you can add the footer navigation links from the Ghost Admin Settings > Navigation > Secondary

Table of content

You can add a table of contents (TOC) to any post. Add this HTML code to your post.

<aside class="toc-container">
    <div class="toc-sidebar">
        <h4>On this page</h4>
        <div class="toc"></div>
    </div>
</aside>

Step-by-Step

1. Create a new post and write your post
2. Insert the code above. You might want to change the TOC's header text. Maybe you call it Table of Contents.
3. Publish and review it

Right under the title, add an HTML card

Note: If you don’t want a title (e.g., On this page), remove it from the HTML code you see above.

Posts per page

By default, the homepage, author's, and tag's page display a maximum of 20 posts per page, but you can change this number.

Step-by-Step

1. You'll need to open the theme's package.json file in your code editor and find the following:

"config": {
    ...
    "posts_per_page": 20
    ...
}

2. Change the value of the 20 to the expected value.
3. Save your package.json file in root folder.

Google Analytics

To integrate Google Analytics, I recommend using the Google Analytics integration by Ghost.

Syntax Highlighting

You can add a fenced code block by placing triple backticks ``` before and after the code block. For example:

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

This will produce the following gray look:

To highlight a code block, add a language alias like css or js to the code block. For example, the CSS code in the previous example will wrap between  "css  and  ``` ` as follows:

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

This will produce the following colored look:

To add inline code, wrap the text between two backticks " ."

Prism

The theme ships with [Prism.js]](https://prismjs.com/), a lightweight, robust, and elegant syntax highlighter.

The [initial Prism package]](https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript) includes some languages, like Markup, CSS, C-like, and JavaScript.

You can add support for more languages by adding the Prism autoloader script, which will automatically load the languages you need. Add the following script to the website admin **Code Injection (Site Footer)**to do this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Click Save.

Responsive tables

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.

By default, the table adapts to the window width. If you have a table that is too wide, it will display a horizontal scroll bar when needed.

Step-by-Step

1. To add a responsive table, use the Markdown card.
2. Add the markdown to create a table. To generate a table, you can use the tool [Markdown Tables Generator]](https://www.tablesgenerator.com/markdown_tables). Below is an example

| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |

Subscription form

Subscription is placed at the bottom of the post page and on the homepage next to the Latest post area.

Change subscription form text

You can change the subscription box's title from the Ghost Admin.

Two subscription boxes use the same copy. When you change the text, it will change in both places.

Step-to-Step

1. Go to Settings > Designs & branding > Homepage in Ghost Admin
2. Change the copy in Email signup text input.
3. Finally, click Save.

Inline subscription box

You can add an inline subscription box in any place in your post with this code.

Step-to-Step

1. Create any post as usual
2. At the line you want to add the form, click + icon or type /, and select the HTML option
3. Paste the code below. (Note: the form comes with a spinner animation, so it's a bit complicated.)
4. Preview and publish the post

<form class="form-wrapper cover-form inline-form" data-members-form="">
    <input class="auth-email" type="email" data-members-email="" placeholder="Enter your email" required="true" autocomplete="false">

    <button class="button button-primary" type="submit" aria-label="Subscribe">
        <span class="default">Subscribe</span>
        <span class="loader"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
                <path opacity="0.3" fill="currentColor" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
                <path fill="currentColor" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z">
                    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
                </path>
            </svg></span>
        <span class="success">Email sent. Check your inbox!</span>
    </button>
</form>

Comment / Member discussion

The theme comes with Ghost Native Comments integration. You can turn the comments on from your Ghost admin Settings > Membership > Access > Edit > Commenting.

Languages

The theme is fully translatable by enabling a publication language in the settings of the Ghost Admin. Before that, you must prepare your language file.

Step-by-Step

1. Inside the ../locales/ folder, add target language files for each translatable language used on your site. For example, fr.json is for French, and pl.json is for Polish. [A valid language]](https://www.w3schools.com/tags/ref_language_codes.asp) code must be used.
2. Translate the sentences used in the theme inside your new language files, for example, in en.json:

{
	"Subscribe": "Subscribe",
	"Sign in ": "Sign in",
	"Account": "Account",
    ...
}

3. And edited to translate into Spanish for fr.json:

{
    "Subscribe": "S'abonner",
	"Sign in ": "Se connecter",
	"Account": "Compte",
    ...
}

4. Upload a theme with a new language file.
5. Go to the General settings in the Ghost Admin.
6. At the top of the page, you'll see the Publication info section
7. Enter the correct language code into your Publication language settings menu.
8. Finally, click Save to activate.

[!info] Reactivate the translation file If you edited the active language, you must restart Ghost to make the changes effective. Alternatively, enter another language code and click Save to activate, then switch back to your code.

Advanced setting

Editing a theme's code

You will encounter information about editing theme files in many places in this 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.

Edit HTML

Step-by-Step

1. To edit your theme files, download a copy of the theme. For this purpose, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
2. Use the Advanced dropdown menu in the upper right corner to download your theme, then unzip the theme locally.
3. Once the theme is unzipped, the files can be edited using a code editor – make the changes indicated in the theme documentation.

You can edit files using applications (code editor) such as Sublime Text, Visual Studio Code or Brackets. Using native text editors like TextEdit on macOS may add formatting that may cause the theme to work incorrectly.

4. After changing the theme code, re-zip the theme directory to upload it back to Ghost.

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.

5. To upload a theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
6. Click the Upload theme button in the upper right corner.
7. Once uploaded, click Activate to activate the theme on your site.

Edit CSS

If you need to change the CSS right in the theme file, check this guide: How to apply CSS changes in your Ghost theme

If you're only looking to make minor updates to a theme, code injection may be enough.

Code Injection

Another choice for customization is to use the Ghost Code Injection settings in Ghost admin.

For a CSS example, you can use the code in the Site Header section to change the title color and font size.

<style>
  .gh-head-title {
    color: #4550E5;
    font-size: 32px;
  }
</style>

Check out How to use Code Injection Ghost guide for more information.

Theme deploy with GitHub actions

The theme comes integrated with the Deploy Ghost Theme Github action. The purpose of the GitHub action is to take the theme from the GitHub repo and send it to your website.

Follow this guide to add GitHub actions Streamline the deployment of your Ghost theme using GitHub Action.

Loading custom font

I assume you have the font files and the initial @font-face CSS code for loading the font. Something similar to the following code.

@font-face {
  font-family: 'Atyp';
  src: local('Atyp Text Regular'), local('Atyp-Text-Regular'),
    url('AtypText-Regular.woff2') format('woff2'),
    url('AtypText-Regular.woff') format('woff'),
    url('AtypText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

Step-to-Step

1. Create a new folder in the theme under /assets and name it fonts, for example, then copy your font files there.
2. Once you finish, zip the theme files, and upload the final zip file to your Ghost website.
3. In Ghost admin Code Injection, add your @font-face code with the new font files path wrapped in the <style> element.

<style>
  @font-face {
    font-family: 'Atyp';
    src: local('/assets/fonts/Atyp Text Regular'), local('Atyp-Text-Regular'),
        url('/assets/fonts/AtypText-Regular.woff2') format('woff2'),
        url('/assets/fonts/AtypText-Regular.woff') format('woff'),
        url('/assets/fonts/AtypText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
</style>

This should load the fonts. Then, you can use the font and do your styling for the body.