Glass 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 ( /ghost/#/settings/design/ )
3. Click Change theme ( /ghost/#/settings/design/change-theme )
4. Click Upload theme and select the glass.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 ( /ghost/#/settings/labs )
3. In the Routes section, click Upload routes file and select the routes.yaml from the root directory of the theme.

The zip’s routes.yaml matches how this theme expects URLs to behave. If you want the full picture of what you can do with routing in Ghost—collections, channels, taxonomies, and static routes—see the blog overview Ghost CMS dynamic routing & routes.yaml.

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 in home.hbs and consists of several sections, all customizable from the design settings and the editor:

• Hero
• Featured article
• Tag list
• Latest posts

Hero

The hero is implemented in partials/hero.hbs. It appears on the first page of the homepage.

By default, the hero shows a centered headline. The headline uses the Hero headline design setting if it is set, otherwise it uses your publication description (@site.description). The headline field supports HTML.

If the section-hero page has a feature image, the hero becomes a split glass panel: content on one side, image on the other. Without a feature image, the page content stays centered.

If Hero headline is also set, it is rendered as the heading inside the page content.

Featured article

When Show featured article is enabled in the homepage design settings, the latest featured post is shown as a wider card between the hero and the latest posts. It only appears on the first page of the homepage.

If that post also appears in the latest-posts list, it is hidden there so it is not shown twice.

Tag list

The tag list is implemented in partials/tag-list.hbs. It appears on the homepage and on tag pages.

To activate it, create a page with the slug section-tags and add the tags you want to display to that page. An All link is always shown first, followed by the tags from the page.

The layout is controlled from the design settings with the Tag list style option:

• pills — frosted buttons
• pills-with-images — the same pills, with each tag’s feature image when one is set
• text — plain text links with an underline on the active item

Latest posts

The latest posts are rendered as a stacked list of glass cards (partials/post-card.hbs). Each card shows the title, byline, excerpt, up to three tags, and a Read button.

The number of posts per page is set by posts_per_page in package.json (the default is 6). Pagination follows below the list.

Header

The header is defined in partials/header.hbs and it renders:

• publication logo (or publication title if no logo is set)
• search button (if enabled in the design settings), with a ⌘K shortcut
• call-to-action button (if Header CTA text and Header CTA link are both set)
• member avatar (for logged-in members, opens Portal account)
• menu button, which opens the menu drawer

Menu drawer

The menu drawer is defined in partials/menu-drawer.hbs. It opens from the header menu button and contains:

• search
• primary navigation (with support for dropdown menus)
• a compact subscribe form for visitors, when membership is enabled
• social links

The drawer is keyboard-operable. Escape closes it, and focus moves to the close button when it opens.

Subscribe section

The subscribe section is defined in partials/subscribe.hbs and sits above the footer. It is shown to visitors when membership is enabled, and hidden for logged-in members.

To customize the copy, create a page with the slug section-subscribe. The page content is shown above the signup form. If that page does not exist, the section uses your publication title and description.

Footer

The footer is defined in partials/footer.hbs and it has the following parts:

• the copyright notice with the year, the publication name, and the theme name (Glass)
• social links

Post templates

Glass includes 2 post templates in addition to the default. You can select them from the Post Settings menu, under Template:

• default template — follows Default post template in the Post design settings (narrow or wide)
• custom-post-narrow.hbs — a narrower reading column
• custom-post-wide.hbs — a wider reading column

Both layouts use a frosted tall panel (glass-panel-tall) over the site background. The post header shows the first tag, title, author, date, and reading time. A reading progress bar is fixed to the top of the viewport.

Below the article: social sharing, comments when enabled, and up to three related posts from the same primary tag.

Custom templates

The theme includes several custom page templates. You can select them from the Page Settings menu, under Template:

• custom-template-authors.hbs — a template to create an authors page. Add authors to the page to limit the list; otherwise all authors are shown
• custom-template-blank.hbs — a template to create pages without header, footer, and subscribe, like landing pages
• custom-template-membership.hbs — membership page with free and paid tiers, plus the page content below
• custom-template-newsletters.hbs — newsletters page for choosing which lists to follow
• custom-template-signin.hbs — a template to create a sign in page
• custom-template-signup.hbs — a template to create a sign up page
• custom-template-tags.hbs — a template to create a tags page. Add tags to the page to limit the list; otherwise all tags are shown

Color customization

You can change the main accent color from Settings > Design > Brand. The most important CSS configurations of the theme are defined as custom CSS properties, so you can easily overwrite them from Code Injection to change background colors, text colors, glass opacity, and more.

Glass does not include a light/dark color-scheme toggle. The look of the site is controlled by Site background and Site background overlay in Settings > Design > Site-wide.

The included backgrounds:

• cover-image — publication cover from Design → Brand (default)
• brand-color — Ghost accent color, with contrast-aware text
• graphite — near-black (#0C0C0C)
• cream — warm light (#FFFAF3) with dark text

The overlay options are none, light, medium (default), and heavy. They control the pattern and gradient strength over the background.

You can change the colors by overriding the CSS properties. Add the following in Code Injection and adjust the values.

<style>
  :root {
    --color-typ: oklch(100% 0 0);
    --color-typ-tone: oklch(100% 0 0 / 0.86);
    --color-typ-content: oklch(100% 0 0 / 0.94);
    --color-bgr: oklch(12% 0.01 250);
    --color-bgr-tone: oklch(100% 0 0 / 0.12);
    --color-brd: oklch(100% 0 0 / 0.18);
    --color-glass: oklch(100% 0 0 / 0.14);
    --color-glass-strong: oklch(100% 0 0 / 0.22);
    --blur-glass: 28px;
  }
</style>

The cream background already switches text to dark. If you use cream and want to tweak it further:

<style>
  [data-site-background="cream"] {
    --color-bgr: #FFFAF3;
    --color-typ: #0C0C0C;
    --color-typ-tone: color-mix(in oklch, var(--color-typ) 70%, transparent 30%);
    --color-brd: color-mix(in oklch, var(--color-typ) 15%, var(--color-bgr) 85%);
  }
</style>

Some useful tools for choosing colors and gradients:

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

Typography

By default the theme uses Instrument Serif for headings and Geist for body. You can change the fonts from Settings > Design > Brand > Typography, with several options for both body and headings.

If you want to use a custom font, you can check out this guide on how to add custom fonts.

In addition, you can change the font family for the UI (header, footer, buttons, etc.) from Settings > Design > Theme > UI font family, as well as the font weight for the headings from Settings > Design > Theme > Headings font weight.

The theme comes with some additional fonts you can use, for this you have to set the Theme default option in the Ghost custom font settings.

For fonts that are not covered by Admin (for example @font-face files in the theme or CSS via Code Injection), the walkthrough custom fonts in Ghost matches how most Bright Themes handle typography in code.

Dropdown menus

glass comes with a custom feature to create dropdown menus easily for your header navigation. All you have to do is add the minus sign (-) in front of the items in Settings > Navigation

Items having the - sign will be added as subitems to the previous navigation item. For example:

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

The theme supports all social platforms that Ghost supports. You can find these in your Ghost Admin under Settings > General settings > Social accounts.

In addition, the theme also comes with additional social platforms, like:

• discord
• github
• pinterest
• reddit
• telegram
• tiktok
• whatsapp

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

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

Social sharing

Social sharing is part of the post layout and the following is included:

• X(Twitter)
• Bluesky
• Facebook
• Linkedin
• Email
• Copy to clipboard

To add other social sharing options you need to edit the partials/social-share.hbs file.

Translations

By default, everything is in English (en.json). Glass ships with that locale only; it is translation-ready if you want to add another language.

The files are stored in the locales directory (inside the theme zip).

|__ locales
|   |__ en.json

If the language file for your language doesn't exist, you have to create it (make sure to use the correct language code). The best way is to copy the en.json file into your new language file, then change the translations.

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 Ghost Admin › Settings › [Code Injection](/blog/ghost-code-injection/) and in the Site Header add the following, changing the values as needed:

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

How to hide "published with" from the footer?

Go to Ghost Admin › Settings › Code Injection and in the Site Header add:

<style>[data-footer-ghost],[data-footer-theme]{display:none;}</style>

How to change the glass blur?

Go to Ghost Admin › Settings › Code Injection and in the Site Header add:

<style>
:root {
  --blur-glass: 40px;
  --color-glass: oklch(100% 0 0 / 0.18);
}
</style>