Ubud Ghost Theme Documentation

Table of Contents

Install the theme

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 Site > Theme.
4. Click Change theme.
5. Click Upload theme.
6. Select the ubud.zip theme file.
7. When the upload finishes, click Activate theme. Some Ghost versions label this button Activate.

Upload routes.yaml (⚑ Required)

The routes.yaml file sets up the homepage, Blog, and Archive pages.

1. Unzip the ubud.zip theme file.
2. In Ghost Admin, go to Settings → Advanced → Labs.
3. Select Open.
4. Select Beta features.
5. In Routes, open the … menu and select Upload file. If your Ghost version shows Upload routes file directly, select that button instead.
6. Select and upload the routes.yaml file from the extracted theme folder.

If the homepage shows 404 Page Not Found, check that you have published a page with the slug home. Follow Homepage setup, then reload your site.

Homepage

The homepage will show a list of content sections.

• Your content and image from a custom Ghost Page
• Featured posts, if they exist
• Recent three posts
• All Posts → link to the blog page
• Subscription box

Homepage Content

➀ In Ghost admin, create a new Page.

➁ In Page settings, set the Page URL as home.

➂ Add your content, Excerpt, upload your feature image.

Above the title in the Ghost editor, click the + Add feature image to upload your image.

The introduction shows the page’s content and image, without its title. Name the page Home or choose another name to find it in the dashboard.

➃ Click Publish.

Open your homepage to check the content in the default layout.

Leave the feature image empty to show only the page content in the homepage introduction, as in this example.

Homepage Default Style

The theme file for the home default style is partials/home/style-image-left.hbs if you want to make any changes.

Homepage Default Style Image Size

The image size is 540px wide.

When uploading the Featured image, try to upload an image with a double size to look sharp in retina displays. The 540px wide size is the one that is visible on the screen. But behind the scenes, the theme will crop the image to be 1080px wide if the uploaded image is broader than that. Again, I use this method so the image looks good on retina screens.

Homepage Image Right Style

The theme file for the home image right style is partials/home/style-image-right.hbs if you want to make any changes.

To activate the Image Right style:

1. Go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Homepage
2. Choose Image Right from the Homepage layout style option
3. Click Save

Homepage Image Right Style Image Size

The image size is 540px wide.

When uploading the Featured image, try to upload an image with a double size to look sharp on retina displays.

The 540px wide size is the one that is visible on the screen. But behind the scenes, the theme will crop the image to be 1080px wide if the uploaded image is broader than that.

Again, I use this method so the image looks good on retina screens.

Homepage Image Circle Style

The theme file for the home image circle style is partials/home/style-image-circle.hbs if you want to make any changes.

To activate the Image Circle style:

1. Go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Homepage
2. Choose Image Circle Small/Medium/Large/xLarge from the Homepage layout style option
3. Click Save

Homepage Image Circle Style Image Sizes

The image circle style comes with four different image sizes.

• Small → 96px × 96px
• Medium → 128px × 128px
• Large → 192px × 192px
• xLarge → 256px × 256px

When uploading the Featured image, try to upload an image with a double size to look sharp on retina displays.

The previous sizes are the ones that are visible on the screens. But behind the scenes, the theme will use the actual image size.

Again, I use this method so the image looks good on retina screens.

• Small → 192px × 192px
• Medium → 256px × 256px
• Large → 384px × 384px
• xLarge → 512px × 512px

The theme and Ghost will do the image crop and generate those sizes when you upload an image. I want to give you an overview of the dimensions.

Homepage Image Center Style

The theme file for the home image center style is partials/home/style-image-center.hbs if you want to make any changes.

To activate the Image Center style:

1. Go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Homepage
2. Choose Image Center from the Homepage layout style option
3. Click Save

Homepage Image Center Style Image Size

The image size is 731px wide.

When uploading the Featured image, try to upload an image with a double size to look sharp on retina displays.

The 731px wide size is the one that is visible on the screen. But behind the scenes, the theme will crop the image to be 1462px wide if the uploaded image is broader than that.

Again, I use this method so the image looks good on retina screens.

Homepage Image Wide Style

The theme file for the home image wide style is partials/home/style-image-wide.hbs if you want to make any changes.

To activate the Image Wide style:

1. Go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Homepage
2. Choose Image Wide from the Homepage layout style option
3. Click Save

Homepage Image Wide Style Image Size

The image size is 1120px × 630px.

When uploading the Featured image, try to upload an image with a double size to look sharp on retina displays.

The 1120px × 630px size is the one that is visible on the screen. But behind the scenes, the theme will crop the image to be 2240px wide if the uploaded image is larger than that.

Again, I use this method so the image looks good on retina screens.

Homepage Image Full Style

The theme file for the home image full style is partials/home/style-image-full.hbs if you want to make any changes.

To activate the Image Full style:

1. Go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Homepage
2. Choose Image Full from the Homepage layout style option
3. Click Save

Homepage Image Full Style Image Size

The wider the image, the better. An image height of 676px will be perfect.

Homepage Number of Featured and Recent Posts

To control how many Featured or Recent posts to show, go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Homepage

You will find two input settings:

• Number of featured posts default value is all, showing featured posts up to Ghost’s query limit (normally 100).
• Number of recent posts default value is 3, which will only show the recent three posts.

Input values you can use:

1. Number, 1, 2 or 3 or any number you want to include
2. all to show posts up to Ghost’s query limit (normally 100)
3. none to show nothing

Homepage Change Featured and Recent Posts Titles

To change the Featured Posts title, open the partials/home/featured-posts.hbs theme file using a code editor and change it in line 8.

To change the Recent Posts title, open the partials/home/recent-posts.hbs theme file and change it in line 8.

Homepage Styles and File Names

Below are the homepage styles and theme file names for a quick overview.

• Homepage Default Style → partials/home/style-image-left.hbs
• Homepage Image Right Style → partials/home/style-image-right.hbs
• Homepage Image Circle Style → partials/home/style-image-circle.hbs
• Homepage Image Center Style → partials/home/style-image-center.hbs
• Homepage Image Wide Style → partials/home/style-image-wide.hbs
• Homepage Image Full Style → partials/home/style-image-full.hbs

Homepage Replace the Content Subscribe Form With a Button

You may want to replace the homepage content subscribe form with a button that links to another page or website.

Open the theme file for the homepage style you are using. Replace the following line of code for the subscribe form, which will be similar to:

{{> home/subscribe-form }}

With the following line of code.

<a href='#/portal/signup' class='c-btn c-btn--full' style='color:#fff; text-decoration:none;'>Subscribe</a>

Notice that I used the #/portal/signup as a value to the Portal. You can change this value to another website or internal website page.

Once you finish, zip the theme files, and upload the final zip file to your Ghost website.

Homepage Remove the All Posts → Link

If you set the Recent Posts setting value to all or none, the All Posts → button will be invisible.

Another option to hide is to add the following CSS code in the Ghost admin Code Injection Site Header.

<style>
  .home-template .c-pagination { display: none; }
</style>

Homepage Remove the Bottom Subscribe Box

Add the following CSS code in the Ghost admin Code Injection Site Header.

<style>
  .home-template .c-subscribe { display: none; }
</style>

Changing Colors

Learn how to change the site accent color and adjust the theme color scheme using CSS variables, with examples.

Set Accent Color

Ubud uses the accent color throughout the theme (e.g., buttons, header Membership link text, and link hover states).

Change the accent color in Ghost admin: Settings → Site → Design & branding → Customize → Brand → Accent color.

Changing Colors with CSS Variables

Use the Ghost admin Code Injection Site Header to change other theme colors using CSS variables.

<style>
  :root {
    --color-text-primary:   #181818;
    --color-text-secondary: #646F82;

    --color-white:   #FFFFFF;

    --background-primary:   #FFFFFF;
    --background-secondary: #F6F6F6;

    --background-hero: var(--background-secondary);
  }
</style>

Watch the following video for an overview of the color scheme feature and how to use it.

Theme Colors Explained

If you’re not technical, don’t worry—change one value to see results immediately.

You can try the ready-made nine color schemes below.

:root {
  // Primary text is the main text color for site content.
  --color-text-primary: #181818;

  // Secondary text is used for elements like post dates, footer nav, input placeholders, content captions for images and gallery, and author info icons/metadata.
  --color-text-secondary: #687385;

  // White is used for buttons with brand colors as background.
  --color-white: #FFFFFF;

  // Border color separates post cards on the homepage and styles form input borders.
  --color-border: #ECECEC;

  // Primary background is the site background. Also used for the subscribe box icon color.
  --background-primary: #FFFFFF;

  // Secondary background is used for homepage content, subscribe box, plans, author info block, and comments.
  --background-secondary: #F6F6F6;

  // The hero background inherits from `--background-secondary`. Use this to set a unique hero color if needed.
  --background-hero: var(--background-secondary);
}

Color Scheme Examples

Below are nine accessible color scheme examples.

1. Every color scheme has an accent color — set it first.
2. Copy and paste the scheme code in the Ghost admin Code Injection Site Header.

All the color schemes are accessible colors for better reading and accessibility experience.

➊ Dark

Accent color → DC514D

<style>
  :root {
    --color-text-primary:   #FFFFFF;
    --color-text-secondary: #9BAAC1;

    --color-white:   #FFF;
    --color-border:  #292622;

    --background-primary: #000;
    --background-secondary: #241F21;

    --background-hero: var(--background-secondary);
  }
</style>

➋ Monza

Accent color → D6001C

<style>
  :root {
    --color-text-primary:   #D6001C;
    --color-text-secondary: #D6001C;

    --color-border:  #D6001C;

    --background-primary: #FFFFFF;
    --background-secondary: #FFF3CC;

    --background-hero: var(--background-primary);
  }
</style>

➌ Soft Peach

Accent color → 905656

<style>
  :root {
    --color-text-primary:   #241616;
    --color-text-secondary: #412727;

    --color-border:  #e9dbdb;

    --background-primary: #F6F0F0;
    --background-secondary: #f2e9e9;

    --background-hero: var(--background-primary);
  }
</style>

➍ Cinnamon

Accent color → 805b00

<style>
  :root {
    --color-text-primary:   #000;
    --color-text-secondary: #374c6d;

    --color-border:  #807D67;

    --background-primary: #F4F6EF;
    --background-secondary: #e4e6e0;

    --background-hero: var(--background-secondary);
  }
</style>

➎ Bright Gray

Accent color → 373f48

<style>
  :root {
    --color-text-primary:   #3C434C;
    --color-text-secondary: #647180;

    --color-border:  #DFE3E9;

    --background-primary: #FFFFFF;
    --background-secondary: #E7EBF0;

    --background-hero: var(--background-secondary);
  }
</style>

➏ Iron

Accent color → 000000

<style>
  :root {
    --color-text-primary:   #212121;
    --color-text-secondary: #404040;

    --color-border:  #bdbec2;

    --background-primary: #d6d7d9;
    --background-secondary: #f2f2f3;

    --background-hero: var(--background-secondary);
  }
</style>

➐ Linen

Accent color → b95d0e

<style>
  :root {
    --color-text-primary:   #000;
    --color-text-secondary: #374c6d;

    --color-border:  #ece3dc;

    --background-primary: #FFFFFF;
    --background-secondary: #FCF3ED;

    --background-hero: var(--background-secondary);
  }
</style>

➑ Turbo

Accent color → 000000

<style>
  :root {
    --color-text-primary:   #000000;
    --color-text-secondary: #000000;

    --color-border:  #000000;

    --background-primary: #FEE900;
    --background-secondary: #fff14a;

    --background-hero: var(--background-primary);
  }
</style>

➒ Pampas

Accent color → c31118

<style>
  :root {
    --color-text-primary:   #292a2c;
    --color-text-secondary: #65605E;

    --color-border:  #b2b2b2;

    --background-primary: #F6F4F2;
    --background-secondary: #eeedeb;

    --background-hero: var(--background-primary);
  }
</style>

If you have any schemes you would like to share, please let me know :)

Make Content Links Have the Same Brand Color

Content links inherit the text color and switch to the brand color on hover.

To make links use the brand color by default, add this in the Ghost admin Code Injection Site Header:

<style>
  .c-content a:not([class]) {
    color: var(--ghost-accent-color);
  }
</style>

Color Tools

The following are some online websites and tools to help with color inspiration. Please make sure you choose an accessible color scheme; this is important for readers.

• https://www.fffuel.co/cccolor/
• https://coolors.co/
• https://mdigi.tools/color-shades/
• http://web-accessibility.carnegiemuseums.org/design/color/
• http://colorsafe.co/
• https://clrs.cc/a11y/

Change Color of Specific Elements

To add a color not covered by existing variables, create a new CSS variable and assign it a value.

For example, extend the previous snippet to add a new logo color and apply it to .c-logo__link:

<style>
  :root {
    --color-logo: blue;
  }

  .c-logo__link {
    color: var(--color-logo);
  }
</style>

The logo link will then be blue.

Members / Subscriptions

Ubud includes several membership UI components:

• Log in and Membership links in the header
• Homepage subscription boxes
• A post subscription box
• Call to action section on the post page to encourage visitors to subscribe if the post is for members only

If a member is already logged in, subscription forms are hidden.

Turn off membership

To remove sign-in and signup links and forms, turn off membership access in Ghost Admin.

1. Go to Settings → Membership → Access.
2. Select Nobody.
3. Click Save.

Remove ‘Log in’ and ‘Membership’ links from Header

If you want to keep membership enabled and forms visible but remove the header links only:

Add the following CSS in the Ghost admin Code Injection Site Header.

<style>
  .c-header .is-membership { display: none; }
</style>

Click Save.

This will also remove the Account link, visible if logged in.

Remove ‘Public’, ‘Members’ and ‘Paid’ Labels from Post Card

Add the following CSS in the Ghost admin Code Injection Site Header.

<style>
  .c-post-card__visibility { display: none; }
</style>

Click Save.

Remove Subscribe Form from the Homepage Content

Add the following CSS in the Ghost admin Code Injection Site Header.

<style>
  [class^='c-home'] .c-subscribe-form { display: none; }
</style>

Click Save.

Remove Subscribe Form from the Homepage Bottom

Add the following CSS in the Ghost admin Code Injection Site Header.

<style>
  .home-template .c-subscribe { display: none; }
</style>

Click Save.

Remove Subscribe Form from the Post Page

Add the following CSS in the Ghost admin Code Injection Site Header.

<style>
  .c-post .c-subscribe { display: none; }
</style>

Click Save.

Hide the Portal button

The floating Portal button is separate from your site’s membership links. Open Settings → Membership → Signup portal → Customize, then turn off Show portal button under Look & feel. Portal links still work when the button is hidden. See Ghost’s Portal settings.

Change Subscribe Box Text

Change the subscribe box text in /partials/subscribe-box.hbs. Open the file using a code editor.

Once you finish, zip the theme files, and upload the final zip file to your Ghost website.

Add Name to the Subscribe Form

Open /partials/subscribe-form.hbs in a code editor. Add the following lines immediately after <div class='c-form-group'>:

<label for='{{ nameLabel }}' class='u-hidden-visually'>{{t 'Your name' }}</label>
<input type='text' name='name' class='c-form-group__input' id='{{ nameLabel }}' placeholder='Your name' required data-members-name>

Once you finish, zip the theme files, and upload the final zip file to your Ghost website.

See the official Ghost membership guide for member setup, Stripe connections, and subscription prices.

Navigation

You can add, edit, delete, and reorder the navigation menu in Ghost Admin from the Settings → Site → Navigation.

To include a static page on your navigation menu, follow these steps.

First, type the page’s name in the label field as you’d like it to appear on your menu.

Next, click on the item’s URL. The blog URL will already be auto-populated. Add the page slug after the final /. When satisfied with your page configurations, click the Save button.

Dropdown

Add a Hyphen (-) followed by a space before the navigation Label to add a dropdown menu.

In this example, Contact will be the parent item with Blog and Archive as child items.

Footer links

Add footer links under Settings → Site → Navigation → Customize → Secondary. Publishing a page does not add it to this menu automatically.

Social Media Icons

Ghost supports adding Facebook and Twitter profile URLs from the admin panel. Go to Settings → General → Social accounts and add your URLs. The theme will automatically add them to the site navigation.

Ubud also supports adding Instagram, YouTube, LinkedIn, Mastodon, Discord, and Telegram URLs. Go to Settings → Site → Design & branding → Customize → Theme → Site wide.

Search

Ubud uses the Ghost Native Search.

Ghost search uses post titles and excerpts from the 10,000 most recent posts. It does not search the full body of every post.

To remove search:

1. Go to your Ghost admin Settings → Site → Design & branding → Customize → Theme → Site wide
2. Toggle the Show search option off
3. Click Save

Pages

Manage the Archive, Blog, and Contact pages.

Archive Page

The Archive page lists all posts by month and displays up to 100 site tags. Items per load follow your site’s Posts per page setting.

The Archive page template is archive.hbs.

To add Archive to the site navigation, add a new item pointing to /archive/, as shown below.

Blog Page

The Blog page shows your 10 most recent posts with a Load more button.

Change the number of posts via the Posts per page setting.

The Blog page template is index.hbs.

To add Blog to the site navigation, add a new item pointing to /blog/, as shown below.

Contact Page

To create the Contact page:

1. Create a Formspree form and copy its endpoint from the Integration page.
2. In Ghost Admin, create a new page titled “Contact”.
3. Add an HTML card and paste the code below. Replace {form_id} with the ID from your Formspree endpoint.
4. Publish the page.
5. Optionally add the page to your site menu (see Navigation).

<form action="https://formspree.io/f/{form_id}" method="POST">
  <label for="contact-name">Name</label>
  <input id="contact-name" type="text" name="name" required>

  <label for="contact-email">Email</label>
  <input id="contact-email" type="email" name="email" required>

  <label for="contact-message">Message</label>
  <textarea id="contact-message" name="message" required></textarea>

  <button class='c-btn' type="submit">Send</button>
</form>

Check out How to Add a Contact Form to Your Ghost Blog for more information.

Languages

Ubud includes multiple languages. You can add your own too.

Theme Translation

Ubud supports Ghost i18n and comes with Arabic, Hebrew, German, Italian, Spanish, French, Finnish, Portuguese, Dutch, Turkish, and Danish translations.

To use a language other than English, go to Settings → General → Publication language and enter the ISO code into the Publication Language field.

The following is a list of the available theme languages with the code to use.

• he for Hebrew
• ar for Arabic
• da for Danish
• de for German
• en for English
• es for Spanish
• fi for Finnish
• fr for French
• it for Italian
• nl for Dutch
• pt for Portuguese
• tr for Turkish

Add a New Language Translation

If the theme does not have a translation for your language, follow these steps to add a new language translation.

1. Create a new file using a code editor in the theme’s locales folder with the ISO Language Codes code. For example, if the new language is Japanese, the ISO code will be ja and the file name will be ja.json.
2. In the same locales folder, open the en.json file and copy its content into your new language file.
3. Start translating, as shown in the following Edit Translation section.

Once you finish, zip the theme files, and upload the final zip file to your Ghost website.

Now, go to your Ghost admin Settings → General → Publication language and enter your language ISO code into the Publication Language field. For example, ja.

Click Save settings.

You may want to restart Ghost or deactivate and activate the theme again to make the new changes effective.

Edit Translation

To edit an included translation, open its file in the theme’s /locales/ folder with a code editor:

|____locales
| |____he.json
| |____ar.json
| |____da.json
| |____de.json
| |____en.json
| |____es.json
| |____fi.json
| |____fr.json
| |____it.json
| |____nl.json
| |____pt.json
| |____tr.json

For example, the German translation file — de.json — looks like this:

{
  "Skip to content": "Zum Inhalt springen",
  "Table of Contents": "Inhaltsverzeichnis",

  "Search": "Suche",

  "Comments": "Kommentare",

  "Loading": "Wird geladen",
  "More Posts ↓": "Weitere Artikel ↓",
  "All Posts →": "Alle Artikel →",

  "Recent Posts": "kürzliche Artikel",
  "Featured Posts": "Beliebte Beiträge",
  "Related Posts": "zusammenhängende Posts",
  "Page Not Found": "Seite nicht gefunden",
  "Published with {ghostLink} & {themeLink}": "Veröffentlicht mit {ghostLink} & {themeLink}",

  "Share on Twitter": "Auf Twitter teilen",
  "Share on Facebook": "Auf Facebook teilen",
  "Share on LinkedIn": "Auf LinkedIn teilen",
  "Share on Pinterest": "Auf Pinterest teilen",
  "Share via Email": "Per E-Mail teilen",
  "Copy link": "Link kopieren",
  "Link copied to clipboard": "Link in die Zwischenablage kopiert",

  "Archive": "Archiv",
  "Tags": "Stichworte",
  "1 min read": "1 minuten gelesen",
  "% min read": "% minuten gelesen",

  "Paid": "Bezahlt",
  "Members": "Mitglieder",
  "Public": "Öffentlichkeit",

  "Account": "Konto",
  "Log in": "Einloggen",
  "Subscribe": "Abonnieren",
  "Membership": "Mitgliedschaft",
  "Your email address": "Deine E-Mail-Adresse",
  "{siteTitle} Newsletter": "{siteTitle} Newsletter",
  "Please check your inbox and click the link to complete the login.": "Bitte überprüfen Sie Ihren Posteingang und klicken Sie auf den Link, um die Anmeldung abzuschließen.",
  "Please check your inbox and click the link to confirm your subscription.": "Bitte überprüfen Sie Ihren Posteingang und klicken Sie auf den Link, um Ihr Abonnement zu bestätigen.",
  "Please enter a valid email address!": "Bitte geben Sie eine gültige E-Mail-Adresse ein!",
  "An error occurred, please try again later.": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.",

  "Already have an account?": "Hast du schon ein Konto?",
  "Don't have an account yet?": "Sie haben noch keinen Account?",

  "This content is for Members": "Dieser Inhalt ist für Mitglieder",
  "This content is for Paid Members": "Dieser Inhalt ist für bezahlte Mitglieder",
  "This content is for Subscribers on the ": "This content is for Subscribers on the ",
  "Upgrade your account": "Aktualisieren Sie Ihr Konto",
  "Join the newsletter to receive the latest updates in your inbox.": "Treten Sie dem Newsletter bei, um die neuesten Updates in Ihrem Posteingang zu erhalten"
}

Each line has a left key ("Loading") and a right value ("Wird geladen").

The key is plain English used across all translation files and should not be changed. Update only the value.

If you have any suggestions to improve a current translation or add a new language, please contact me.

RTL

RTL means right to left. Turning on RTL makes the theme readable for languages written from right to left, like Arabic or Hebrew.

To enable RTL:

1. Go to Settings → Site → Theme.
2. Open the … menu beside your active theme and select Edit code.
3. Open partials/head.hbs and replace {{> compiled/inline-css }} with {{> compiled/inline-css-rtl }}.
4. Click Save, then Replace theme to apply the change.

Once you finish, zip the theme files, and upload the final zip file to your Ghost website.

Comments

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

Learn more about Ghost comments.

Typography Drop Caps

The theme comes with different styles of typography drop caps. A drop cap applies to the first letter of the first word in a paragraph.

To add a drop cap style to a paragraph:

1. Add an HTML card to your post or page content editor.
2. In that HTML card, add a <p></p> HTML element with the drop cap CSS class. For example, <p class='u-drop-cap'></p>. See below for the available classes for each style.
3. Add your paragraph text within that <p></p> HTML element.

There are currently four styles available.

➊ Small Drop Cap

• CSS class → u-drop-cap
• Example ↓

<p class='u-drop-cap'>TEXT HERE</p>

Result:

➋ Large Drop Cap

• CSS class → u-drop-cap-large
• Example ↓

<p class='u-drop-cap-large'>TEXT HERE</p>

Result:

➌ Block/Small Drop Cap

• CSS class → u-drop-cap--block-small
• Example ↓

<p class='u-drop-cap--block-small'>TEXT HERE</p>

Result:

➍ Block/Large Drop Cap

• CSS class → u-drop-cap--block-large
• Example ↓

<p class='u-drop-cap--block-large'>TEXT HERE</p>

Result:

Table of Contents

Add a table of contents to your posts and pages automatically.

The table of contents lists H2 and H3 headings. If no H2/H3 headings are present in the content, the section is hidden.

Activate on All Posts & Pages

The table of contents block is hidden by default. Go to Settings → Site → Design & branding → Customize → Theme → Post to activate it. You have two options:

1. Show table of contents on all posts
2. Show table of contents on all pages

Activate on Individual Posts & Pages

Create a new Internal tag from the admin Tags page and set the Name to #table-of-content.

Assign the #table-of-content tag to a post or page; the table of contents will only be visible on that item.

Posts Per Page

The theme displays 10 posts per page by default. To change this in Ghost Admin:

1. Go to Settings → Site → Theme.
2. Open the … menu next to your active theme and select Edit code.
3. Open package.json and find posts_per_page inside config.
4. Replace 10 with the number of posts you want per page.
5. Click Save, then Replace theme to apply the change.

"config": {
  "posts_per_page": 10
}

Related Posts

Related posts section will be visible at the bottom of a post if other posts share the same tags as the current post.

RSS Feed URL

Since Ubud uses /blog/ for posts, the RSS feed is at site.com/blog/rss/ instead of site.com/rss/. Example: ubud.aspirethemes.com/blog/rss/.

Publication icon

You can change the favicon from the Ghost admin Settings → Site → Design & branding → Customize → Brand → Publication icon.

Syntax Highlighting

Add a fenced code block by wrapping your code with triple backticks. For example:

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

This renders as a plain code block:

To enable syntax highlighting, add a language alias (e.g., css or js) after the opening backticks. For example:

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

This renders with syntax highlighting:

For inline code, wrap text in single backticks.

Prism

The theme uses Prism.js to highlight code blocks.

The initial Prism package 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. To do this, add the following script to the website admin Code Injection (Site Footer).

<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.

Theme Deploy with GitHub Actions

Ubud 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.

I have written about this in How to Deploy Your Ghost Theme Using GitHub Actions. All you need to do is follow steps 1 and 2.

Footnotes

Ghost has limited support for footnotes, which means it doesn’t support footnotes outside of the editor Markdown card. So, if your article content is in Markdown, this will work fine for you.

To create a footnote, check out the Markdown Guide – Footnotes for more information about the syntax. You can see how the theme renders footnotes in the demo. In the editor, add a new Markdown card and place your footnote inside it.

The theme renders whatever the editor supports; there is no additional footnote support beyond what Ghost provides.

Check out this Forum discussion for more information and probably some ideas and workarounds.

The theme does not add any footnotes functionality beyond Ghost’s Markdown implementation.

Code injection

You can also customize the theme through Code injection in Ghost Admin.

1. Open Settings → Advanced → Code injection.
2. Select Open.
3. Choose Site header or Site footer, as directed by the example.

Paste this CSS into Code Injection → Site header to change the logo color and font size.

<style>
  .c-logo__link {
    color: #4550E5;
    font-size: 32px;
  }
</style>

Select Save to apply the code.

The video shows how Ghost Code Injection works and how to use it.

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

Blockquote Styles

Copy the code of any examples below in the Ghost admin Code Injection Site Header, then click Save.

➊ Example One

<style>
  .c-content blockquote {
    padding: 64px 40px;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    position: relative;
    font-family: Georgia,serif;
    border-left: 0;
    border: .25px solid var(--ghost-accent-color);
  }

  .c-content blockquote:before,
  .c-content blockquote:after {
    position: absolute;
    font-size: 48px;
    color: var(--ghost-accent-color);
  }

  .c-content blockquote:before {
    content: '“';
    top: 24px;
    left: 24px;
  }

  .c-content blockquote:after {
    content: '”';
    bottom: 24px;
    right: 24px;
    line-height: 0;
  }
</style>

➋ Example Two

<style>
  .c-content blockquote {
    padding: 24px 0;
    font-size: 24px;
    line-height: 40px;
    border-left: 0;
    border-top: 8px solid var(--ghost-accent-color);
    box-shadow: 0 1px 0 0 var(--ghost-accent-color);
    -webkit-box-shadow: 0 1px 0 0 var(--ghost-accent-color);
  }
</style>

Customize Logo Size

If you are using an image as a logo (instead of the site name) and want to change the logo size, use the following code in Code Injection.

<style>
  .c-logo__img { max-height: 40px; }
</style>

The default value is 40px, so you can increase this value to match your preference.

Footer Copyright

To change the footer copyright text:

1. Go to Settings → Site → Theme.
2. Open the … menu beside your active theme and select Edit code.
3. Open partials/footer.hbs and edit the copyright text.
4. Click Save, then Replace theme.

If you just want to remove the Published with Ghost… part, copy and paste the following code into the Ghost admin Code Injection Site Footer.

<script>
  var footer_copy = document.querySelector('.c-footer-copy'),
  footer_copy_visible_part = footer_copy.innerText.split('-')[0];
  footer_copy.innerText = footer_copy_visible_part;
</script>

Remove Dates

To remove the dates from the theme homepage and listing pages, add the following CSS code in the Ghost admin Code Injection Site Header.

<style>
  .c-post-card__meta {
    display: none;
  }

  .c-post-card {
    grid-template-areas: 'content content content content content content content content content media media media';
  }

  .c-post-card--no-image {
    grid-template-areas: 'content content content content content content content content content content content content';
  }
</style>

To remove only the date and keep the Public, Members, and Paid labels, use the following:

<style>
  .c-post-card__date { display: none; }
</style>

To remove the date from the post page, use the following:

<style>
  .c-post-header__date { display: none; }
</style>

Remove Author Elements

To remove the author elements from the post page, add the following CSS code in the Ghost admin Code Injection Site Header.

<style>
  .c-card-author,
  .c-post-header__author_name,
  .c-post-header__author_media { display: none; }
</style>

This will remove the author name, image and the author bio under each post.

Remove Post Feature Image

If you want to remove the feature image from showing on the single post page, copy and paste the following CSS code in the Ghost admin Code Injection Site Header.

<style>
.c-post-media { display: none; }
</style>

This will apply to a Post or a Page.

Remove Homepage Feature Image

Not uploading a feature image will do this. But if you already uploaded images and want to keep them for the article page and social media previews when you share your post, add the following CSS code in the Ghost admin Code Injection Site Header.

<style>
  .c-post-card__media { display: none; }
  .c-post-card { grid-template-areas: "meta meta meta content content content content content content content content content"; }
</style>

Make Post Card Feature Image Bigger

The Just Looking website use a more prominent image size for the homepage feature image. To do the same, add the following CSS code in the Ghost admin Code Injection Site Header.

<style>
  .c-post-card {
    grid-template-areas: 'meta meta content content content content content media media media media media';
  }
</style>

Post Card Feature Image Ratio

A post card may crop the edges of its feature image. To show the complete image within the frame, set object-fit to contain. Paste this CSS into Code Injection → Site Header.

<style>
  .c-post-card__image { object-fit: contain; }
</style>

You may then want to remove the gray background.

<style>
  .c-post-card__image-wrap { background-color: var(--background-primary); }
</style>

Open Post Links in a New Tab

To open the post links in a new tab, add the following script in the Code Injection Site Footer section.

<script>
  document.querySelectorAll('.c-post a').forEach(function (e) {
    if (e.hostname !== window.location.hostname) {
      e.target = '_blank';
    }
  });
</script>

Thanks, Taylor.N, for sharing this snippet!

Zip Theme Files

You can compress it as a standard folder like any other folder on your computer. If you are on Mac, right-click on the theme folder to view the context menu. Then, click the Compress option.