Yoffa Documentation

Install the theme

Follow the steps below to upload the theme:

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Design ( yoursite.com/ghost/#/settings/design/ )
3. Click Change theme ( yoursite.com/ghost/#/settings/design/change-theme )
4. Click Upload theme and select the yoffa.zip file.
5. After the upload is complete, under Installed themes click Activate

Routes setup

Follow the steps below to upload the routes.yaml file (this is a separate step from theme upload)

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Labs ( yoursite.com/ghost/#/settings/labs )
3. Under Beta features click on Upload routes file button and select the file from the root directory of the theme.

Custom settings

The theme comes with custom design settings, which are accessible from the Ghost Admin panel. To view and edit these settings go to Settings > Design & Branding ( yoursite.com/ghost/#/settings/design/)

Custom settings are defined in the package.json file. These settings are placed under three categories:

1. Site-wide settings
2. Homepage settings
3. Post settings

Here's a preview of the available settings:

Homepage

The homepage is defined by the home.hbs file and it has several sections based on your theme settings:

• hero
• post feed

Hero

The hero section is completely customizable from Settings > Design > Homepage, with the following options:

• Hero headline - the hero section title

  Here you can include HTML elements, so you can add links, or format texts. Example from the demo:

  Navigating the exciting world of <a href="/tag/design/">design</a>, <mark>code</mark>, and <span><em>technology</em></span>.
  

• Hero subheading - the hero section description

  Here you can also use HTML elements like links, bold text, etc.

• Hero cover image aspect ratio - the hero section cover image style, with the following options:

  • 1/1 - square aspect ratio
  • 16/3
  • 4/3
  • 3/4
  • hidden - the image is hidden

Post feed

The logic and the layout is defined in the partials/post-feed.hbs file.

The layout of the feed is starting from a single column layout on mobile and a 3-column layout on desktop.

Header

The header is defined in the partials/header.hbs and it renders your publication logo, primary navigation, the native search button.

Customizing options:

• header_subscribe_button - By default the header will include a subscribe button pointing to the native Ghost portal. This can be disabled from Settings > Design & Branding > Site-wide > Header subscribe button

Footer

The footer is defined in the partials/footer.hbs and it renders your site title, and social links.

Color customization

You can change the main accent color from Settings > Design > Brand. Additionally, under Settings > Design > Site-wide you can change three other colors:

• Background color - site wide background color
• Text color - used for most of the text
• Border color - used for elements which have border, for example the footer

With these options you can easily configure and set a custom color scheme. For specific examples and to play around with the options check out the demo https://yoffa.brightthemes.com/colors/

Some useful tools for choosing colors and gradients:

• Fuel HSL color picker
• Gradients | Components AI
• CSS Gradient Generator

Fonts

You can set the font family from the Admin section, going to Settings > Design > Site-wide. There are two options, one for the headings and another for the rest of the elements:

Headings and body font options:

• Cinzel
• Heebo
• Inter
• Instrument Sans
• Instrument Serif
• Orbit
• Plus Jakarta Sans
• Prata
• Space Mono
• Sulphur Point
• System - loads the system font (no requests to Google Fonts)

If you still want to use Google fonts and want to self-host the font files check out this guide for self-hosting Google Fonts.

Ghost config

Some configurations in Ghost themes can be defined in the package.json file, including Posts per page, Image sizes, and Custom settings.

Posts per page

The posts_per_page defines the number of posts that appear in your collections until it's paginated. For example, the value of posts_per_page is used on the home page, tag, and author templates.

You can change it in the package.json file:

"config": {
  "posts_per_page": 12
}

Image sizes

Ghost can handle responsive image sizes, and this is defined in the package.json file, under the image_sizes property. You can change the default configuration by editing this file before uploading the theme.

"image_sizes": {
  "xxs": {
    "width": 30
  },
  "xs": {
    "width": 100
  },
  "s": {
    "width": 320
  },
  "m": {
    "width": 640
  },
  "l": {
    "width": 960
  },
  "xl": {
    "width": 1280
  },
  "xxl": {
    "width": 2000
  }
}

The sizes defined will be used to generate copies of images at the specified sizes when uploading images in your Ghost Admin.

Comments

The theme uses the native Ghost comment feature. The Native Comment System requires at least Ghost v5.9.0, you have to enable it from Settings > Membership > Access > Commenting.

Here are the options you can choose from:

• All members - Logged-in members
• Paid-members only - Only logged-in members with an active subscription
• Nobody - Disable commenting completely

Icons

The icons used in the theme are from Tabler Icons, the library consists of 5000+ icons. Only the icons used in the theme are included in the partials/icons directory in separate .hbs files.

Here are the steps to add new icons:

1. Go to Tabler Icons and click on the Icon you want to add, this will copy the code to your clipboard.
2. Go into the partials/icons directory and create a new file: your-icon.hbs
3. Open the new file and paste the copied code from the clipboard.
4. Save the file.

For using the icons inside the theme files, there is a special partial file partials/icon.hbs which accepts name and size as parameters.

Let's see an example and try to add a new icon. Assuming we want to add the icon camera and by clicking on the icon on the website, we get this code:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-camera" width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#2c3e50" fill="none" strokeLinecap="round" strokeLinejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
  <circle cx="12" cy="13" r="3" />
</svg>

The next step is to create a new file: partials/icons/camera.hbs and paste the copied code in the file. The new file must be of .hbs type, so we can use it into the theme files:

{{>icon name="camera"}}

Social links

Social links are shown in the footer by default. The basic social links that Ghost comes with can be edited from Settings > General settings > Social accounts:

• Facebook
• X(Twitter)

The theme also comes with the following list of social platforms:

• bluesky
• threads
• linkedin
• discord
• github
• instagram
• pinterest
• reddit
• telegram
• tiktok
• whatsapp
• youtube

To activate any of these platforms, add the following in your Admin Settings > Code Injection > Site footer. For example to activate GitHub:

<script>
  socials.github = 'https://github.com/brightthemes'
</script>

Theme development

If you want to make more advanced changes to the theme, or you want to implement your own components, you can take advantage of the developer-friendly setup of the theme.

All the assets are combined and minified for better speed and performance. To customize the theme make sure you have Node.js installed.

The theme is built with TailwindCSS and Alpine.js. The development environment is based on Vite, the tasks can ran with npm scripts.

This guide is assuming that you have installed Ghost locally. Add the theme directory inside Ghost's content/themes/ directory then move to the theme directory in your command line. Run the npm install command to install all the dependencies.

After that is done, you have access to run the npm scripts:

1. npm run dev (vite build --watch & vite) The dev script will start the development process, watching for changes and building. The vite.config.js file contains the main configuration for Vite.

2. npm run build (vite build) The build script will start the build process.

3. npm run test (gscan . --verbose) The test will test the theme using gscan the official Ghost test tool.

4. npm run zip The zip script will create a zip file in the dist directory.

Code Snippets

Frequently asked questions and useful snippets you can use to make some quick changes to your site.

How to change the logo size?

Go to the Admin, Settings > Code Injection and in the Site Header add, changing the values as needed:

<style>
:root {
  --logo-h-mobile: 28px;
  --logo-w-mobile: auto;
  --logo-h-desktop: 32px;
  --logo-w-desktop: auto;
}
</style>