Documentation

Vincent Docs

This documentation guides installing, customizing, and leveraging the Vincent theme for your Ghost blog or newsletter.
Trong @ Themex

Trong @ Themex

Introduction

The theme's core concept is for content-first creators who want to build a subscriber-based publication around deep, research-driven content in arts, culture, history, tech, lifestyle. This is a solid, professional theme with strong editorial design, strong visual hierarchy. This is also a highly customizable Ghost theme.

Since this is a Ghost theme documentation, you are assumed to have a basic knowledge of the Ghost CMS. 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

Vincent is built on a simple philosophy: your content deserves to be presented like it matters. This theme gives you the structure of a professional magazine with the flexibility to make it unmistakably yours. Change colors, swap fonts, adjust imagery—the foundation remains solid: organized, readable, and designed to build an audience.

The theme offers these key features:

  • Customizable homepage with multiple section components easily added from Ghost admin panel
  • Custom hero intro with subscription form or social links
  • Category navigation bar to show different tags/categories for better exploring experience
  • Featured posts with card background color auto-generated from feature image
  • Flexible content display - featured posts, posts with specific tags, or pages filtered by tags
  • Define number of featured posts on homepage
  • Latest posts section with customizable title
  • Posts by category for organized content presentation
  • Logo wall for showcasing partners or clients
  • Testimonials slide for social proof
  • Static text cards for custom messaging
  • Custom content blocks showing a page's content as a section on homepage
  • Post/page hero with beautiful background generated from feature image
  • Light and dark mode (4 options: light, dark, system, user-defined)
  • Beautiful color presets (8 options: Default, Pure, Onyx, Rust, Fossil, Mint, Ember, Ice)
  • Multiple blog layouts with table of content support
  • Two header layout options (default overlay menu with carousel slider, alternative horizontal menu)
  • 9 post layout options including split layouts with color-generated backgrounds
  • Support for all built-in Ghost features

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 Vincent folder, you will find the Vincent.zip theme files.

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 > Theme > Change theme.
  4. Click Upload theme and select the Vincent.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. Tags/Categories

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

Step-by-Step to Upload the routes file:
  1. Unzip the Vincent.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.

General settings

Colors

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

Set accent color

The Accent color is the primary color used throughout your publication theme in buttons, social sharing hovers, links, and other interactive elements. 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.

Accent color settings

Preset color combinations

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

  • Default - Classic and versatile color scheme
  • Pure - Clean, minimalist black and white
  • Onyx - Deep, sophisticated dark tones
  • Rust - Warm, earthy palette
  • Fossil - Natural, muted tones
  • Mint - Fresh, cool greens
  • Ember - Warm, energetic oranges
  • Ice - Cool, crisp blues
Step-by-Step to Choose Your Preferred Color Combination:
  1. Go to the admin Settings > Design & Branding > Customize > Theme.
  2. Click on Color combinations and select your color combination.
  3. Preview and Save.
Theme color combinations

Light / dark mode

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

The theme supports:

  • Light - Always display light mode
  • Dark - Always display dark mode
  • System - Automatically match the user's operating system preference
  • User defined - Allow users to toggle between light and dark mode with their preference saved
Light and dark mode settings
Step-by-Step to Customize
  1. Go to Settings > Design & branding > Theme from the admin menu
  2. Choose a preferred mode by clicking on Appearance
  3. Click Save
Note: When set to "User defined", a theme toggle button appears in the header allowing visitors to switch between light and dark modes. Their preference is saved locally.

Typography

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

Custom fonts

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

Step-by-Step to Change Fonts:
  1. Go to Settings > Design & branding > Customize > Brand
  2. Under Typography, select:
    • Title font for headings
    • Body font for main text
  3. Click Save
Typography settings

Host your own fonts

You can change any font from the Ghost admin interface using Code Injection and Google Fonts, or your own font. 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.

Check out the detailed guide to add your own fonts

Header navigation

The Vincent theme offers two distinct header layout options to suit different design preferences.

Default header layout (overlay menu)

The default header features a minimal design with a hamburger menu that opens an overlay navigation with a featured posts carousel.

Default header layout with overlay menu
Overlay navigation with carousel

Alternative header layout (horizontal menu)

The alternative header displays navigation links horizontally across the header.

Alternative header layout with horizontal menu
Step-by-Step to Enable Alternative Header:
  1. Go to Settings > Design & branding > Theme
  2. Find Header layout alternative
  3. Toggle on to enable horizontal navigation
  4. Click Save
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.

Header profile displays Publication logo from Settings → Design & branding → Brand

Header logo settings

The logo appears in the center of the header on both desktop and mobile views. If no logo is uploaded, the site title will display instead.

Header call-to-action button

You can add your own CTA text and link in the header. If you leave it empty, the button will be hidden.

Header call-to-action button
Step-by-Step to Add Header CTA:
  1. Go to Settings > Design & branding > Theme
  2. Scroll to Header action text:
    • Add the text to Header action text. Leave it empty if you want to hide it.
    • Add link to Header action link
  3. Click Save

Example configurations:

  • Contact button:
    • Text: "Contact Us"
    • Link: "/contact"
  • External link:
    • Text: "Get Started"
    • Link: "https://example.com/start"

When using the default header layout with overlay menu, you can customize the featured posts carousel that appears in the navigation overlay.

Carousel slider in navigation overlay
  1. Go to Settings > Design & branding > Theme
  2. Find Header slider posts
  3. Enter a tag slug to show posts with that specific tag (e.g., featured or design)
  4. Leave empty to show all featured posts
  5. Click Save
Header slider posts settings
Note: The carousel displays up to 7 posts and is only visible when using the default header layout (not the alternative horizontal menu).

You can create dropdown sub-menus in your Ghost site navigation to organize your content more effectively and improve site navigation. This feature helps visitors quickly find specific pages under broader categories.

Navigation dropdown menus

Follow these steps to set up dropdown navigation menus:

  1. In your Ghost Admin panel, go to Settings → Navigation
  2. Add your main menu items normally
  3. To create submenu items, add them with a dash (-) prefix before the child item
  4. Arrange items in the order you want them to appear
Navigation settings with dropdown structure

Example Settings:

Home          /
About         /about
- Team        /team
- Contact     /contact
Blog          /blog

White logo on dark mode

If you use a black logo image and enable dark mode, you would need your logo visible when users enable dark mode.

You can use Code injection and insert this CSS to support different logo color on light/dark mode

<style>
:root[data-theme=dark] .head-logo-wrap img {
    filter: invert(100%);
}
</style>
Footer section

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

To group footer items into different groups, add # before the name.

Footer navigation groups

Example configuration:

#Company
About Us      /about
Careers       /careers
#Legal
Privacy       /privacy
Terms         /terms

The Vincent theme includes a comprehensive global social links system that automatically detects and displays social media icons from URLs you provide. The social links appear in the hero section (when enabled) and in the footer, providing consistent social presence across your site.

Supported platforms

The theme automatically recognizes and displays icons for 40 platforms, including:

  • Social media: Instagram, Threads, Facebook, Twitter/X, LinkedIn, TikTok, Bluesky, Mastodon, Pinterest, Reddit, Snapchat, WeChat
  • Professional: GitHub, Dribbble, Behance, Medium, Stack Overflow, CodePen
  • Media: YouTube, Vimeo, Spotify, Apple Podcasts, SoundCloud, Twitch
  • Communication: Email, Phone, WhatsApp, Telegram, Discord, Slack
  • Business: Etsy, Amazon, Ko-fi, Patreon, Trustpilot, Yelp, TripAdvisor, Google Maps
  • And more... The system automatically detects the platform from your URL and displays the appropriate icon.
  1. Go to Settings > Design & branding > Theme
  2. Find the Social links field in the theme settings
  3. Add your social media profile URLs separated by commas
  4. Example: https://twitter.com/yourusername, https://instagram.com/yourusername, https://github.com/yourusername
  5. Click Save

Email links:

Phone links:

  • Add tel:+1234567890 or just +1234567890
  • The theme will automatically display a phone icon

Host requires all themes available on the marketplace to include the text “Published with Ghost” in the footer. If you want to hide it, you can use Code Injection to hide it.

<style>
	/* hide Published with Ghost */
	.footer-signature {
		display: none;
	}
	/* hide the whole copyright line */
	.footer-copyright {
		display: none;
	}
</style>

Homepage

Homepage overview

The Vincent theme homepage is designed for flexibility and easy customization. You can build a dynamic homepage using Ghost's built-in features, managing sections directly from the Ghost admin interface—no coding required!

The homepage consists of several key sections:

  1. Hero Section - Introduction with site title/description or custom content
  2. Category Navigation - Tag-based navigation bar for content exploration
  3. Featured Posts - Highlighted content with auto-generated color backgrounds
  4. Latest Posts - Recent articles feed
  5. Posts by Category - Tag-filtered content sections
  6. Additional Sections - Logos, testimonials, authors, static text, custom content

All sections are fully customizable through the Ghost admin panel.

Hero section

The hero section is the first thing visitors see on your homepage. Vincent supports both simple and extensive hero content with optional reveal animations.

Hero section with site title
Hero section with extensive content

Default hero option

By default, the theme shows the Site title and description from General settings in the hero.

Step-by-Step to change default option
  1. Log in to your Ghost Admin dashboard.
  2. Go to Settings → General settings → Title & description → Edit
  3. Edit Site title and Site description to change the content.
  4. Save and refresh the homepage
Site title and description settings

Extensive hero option

For more extensive hero text with formatting options and reveal animation on scroll.

Step-by-Step to use Extensive option
  1. Log in to your Ghost Admin dashboard.
  2. Click on Pages in the left sidebar.
  3. Click New page to create a new page.
  4. Add your hero text content in the editor. You can:
    • Format text with bold, italic, or other styles
    • Add multiple paragraphs, headings, images, etc.
    • Include links or other content elements
  5. Add the tag #home-hero to the "Tags" input (important!)
  6. Publish the page when you're done.
Creating extensive hero content page
☝️
Tips
Add the tag #text-left to align hero text to the left instead of center.

Hide hero section

If you don’t want to show the Hero section at all, you can hide it in Code Injection with this CSS

<style>
	.hero-home-wrapper, .custom-hero-intro {
	    display: none;
	}
</style>

Hero actions

Choose to show social links, subscription box, or nothing below the hero content.

Step-by-Step to set hero action
  1. Log in to your Ghost Admin dashboard.
  2. Go to Settings → Site → Design & branding → Customize
  3. Go to Theme tab and find the Homepage section.
  4. Locate the Hero actions dropdown, select the option you want:
    • Social links: show the author's Social Links
    • Subscription form: show the subscription box
    • None: No action shown
  5. Save and refresh the homepage
Hero actions settings
Edit subscription box text

Refer to Email signup customization

Refer to Footer social links

Category navigation

Display a horizontal navigation bar showcasing your main content categories, making it easy for visitors to explore different topics. You can customize both the section title and which categories appear.

Category navigation bar
Step-by-step to add category navigation
  1. Go to Settings > Design & branding > Theme
  2. Find Category navigation setting
  3. Enter tag slugs separated by commas (e.g., design,technology,lifestyle)
  4. (Optional) Find Category title setting to customize the section heading
    • Enter a custom title like "Explore topics" or "Browse categories"
    • Leave empty to hide the section title completely
  5. Click Save
Category navigation settings
Tip: To find the exact tag slug, go to Tags in the Ghost admin, click on the tag name, then copy the text in the Slug field.

The category navigation automatically displays tag names, featured images (if available), and post counts for each category, creating an engaging way for visitors to discover your content by topic.

The featured posts section displays prominent content cards with background colors automatically generated from the post's feature image. This creates a visually stunning presentation that adapts to your content.

Featured posts section with color backgrounds

Vincent offers three options for the featured posts section:

  1. Featured posts - Show posts marked as featured in Ghost
  2. Posts-by-Tag - Show posts filtered by a specific tag
  3. Pages-by-Tag - Show pages filtered by a specific tag
  1. Go to Settings > Design & branding > Theme > Homepage
  2. Find Feature feed type and select your preferred option:
    • Featured posts - automatically shows posts marked as featured
    • Posts-by-Tag - requires entering a tag slug
    • Pages-by-Tag - requires entering a tag slug
  3. If you selected Posts-by-Tag or Pages-by-Tag, enter the tag slug in Feature feed tag
  4. Set Number of featured posts (default is 3)
  5. Click Save
Featured posts configuration
Note: The background color of each featured post card is automatically generated from the dominant color of the post's feature image, creating a unique and cohesive visual presentation.

Latest posts section

Display your most recent blog posts with a customizable section title.

Latest posts section
Step-by-Step to Configure Latest Posts
  1. Go to Settings > Design & branding > Theme > Homepage
  2. Find Home feed title and enter your desired title (default is "Latest posts")
  3. To hide this section completely, leave the field empty
  4. Click Save
Home feed title settings

The latest posts section displays posts in a grid layout with the number of posts per page defined in your theme configuration (default is 9 posts per page).

Feed image orientation

Control the aspect ratio of post card images throughout your site.

Step-by-Step to Set Image Orientation
  1. Go to Settings > Design & branding > Theme > Homepage
  2. Find Feed image orientation
  3. Select your preferred option:
    • Landscape - Horizontal rectangular images
    • Square - Equal width and height
    • Portrait - Vertical rectangular images
    • Free - Original aspect ratio maintained
  4. Click Save
Feed image orientation settings
Note: This setting applies to post cards throughout the site, including homepage, blog page, tag pages, and related posts.

Posts by category

Display multiple sections of posts, each filtered by a different tag. This is perfect for organizing content by topic or category.

Posts by category sections
Step-by-Step to Add Posts by Category
  1. Go to Settings > Design & branding > Theme > Homepage
  2. Find Home tag sections
  3. Enter tag slugs separated by commas (e.g., design,technology,lifestyle)
  4. Click Save

Each tag will create a separate section showing up to 3 posts with that tag. The section title will be the tag name, and each section includes a "View all" link to the tag page.

Home tag sections settings

Logo wall section

Sometimes you want to show some kind of social proof, and a logo board can help achieve that. Display partner logos, client logos, or featured brands.

Step-by-Step to Add Logo Wall
  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 as images in the page content.
    • Important: Don't add any line breaks above, between, or after the images. It will create odd alignment.
  4. In the Page Setting sidebar, add a tag named: #section-logos.
  5. Publish and check your homepage.
Tip: If you want to hide the section title, add #no-title tag to the page.

Testimonials section

Display testimonials from your users, clients, or partners in a rotating slider format.

Testimonials section
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. Add #section-testimonials to the Tags field.
  4. 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.
  5. On the product card, fill in the details:
    • Title - The testimonial main text
    • Description - Person's name and job title
    • Image - Profile picture
    • Stars - Rating (1-5 stars)
  6. Add more Product cards to add more testimonials.
  7. Publish.
Testimonials page settings
Note: The testimonials automatically rotate in a slider format. Visitors can also navigate between testimonials manually.

Static text section

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

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. Add #section-static-text to the Tags field.
  4. 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.
  5. On the product card, fill in the title, description, image, and link (optional).
  6. Add more Product cards to add more static text cards.
  7. Publish.
Tip: If you want to hide the section title, add #no-title tag.

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

Custom content section

This section allows you to display any custom content of a specific page on the homepage. Use this for adding rich formatted content, HTML, or any special content blocks.

Custom content section
Step-by-Step to Add Custom Content Section
  1. In Ghost admin, create a new Page.
  2. Give it a title; this title won't be shown on the homepage.
  3. Add your custom content in the page editor (text, images, galleries, HTML cards, etc.).
  4. Add #section-custom-content to the Tags input.
  5. Publish.
Custom content page settings

The entire content of this page will be rendered as a section on the homepage, giving you complete flexibility to add any type of content.

Authors section

Display your site's authors and contributors in a professional grid layout. Each author card shows their profile photo, name, bio, and post count.

Authors section
Step-by-Step to Add Authors Section
  1. In Ghost admin, create a new Page.
  2. Give it a title; this title will be the section title on the homepage (e.g., "Our Writers" or "Contributors").
  3. Add #section-authors to the Tags input.
  4. (Optional) To add a separate page for Authors, in Template dropdown, select Zpage Authors.
  5. Publish.
Authors section page settings

The section will automatically display the top 4 authors on your site, sorted by post count (authors with the most posts appear first).

Note: If you want to hide the section title, add #no-title tag to the page.

Reordering homepage sections

By default, homepage sections appear in a predefined order. However, you can customize the order of sections without editing theme files by using CSS flexbox order property through Code Injection.

Understanding section classes

Each homepage section has a unique CSS class that you can target for reordering:

Section CSS Class
Hero Section .hero-intro
Category Navigation .cat-nav
Featured Posts .featured-posts-section
Latest Posts .latest-posts-section
Posts by Category .tag-posts-section
Logo Wall .section-logo-board
Testimonials .section-testimonials
Static Text .section-static-text
Custom Posts .section-custom-posts
Authors .section-authors
Custom Content .section-custom-content

How flexbox order works

The parent container .site-layout uses flexbox, allowing you to control the order of child sections using the order property. Sections with lower order values appear first, while sections with higher values appear later.

  • Default order value: 0
  • Lower numbers (e.g., -1, -2) move sections earlier
  • Higher numbers (e.g., 1, 2, 3) move sections later
Step-by-Step to Reorder Sections
  1. Go to Settings > Code injection in Ghost Admin
  2. Add CSS code to the Site Header section
  3. Use the order property to rearrange sections

Click Save

Code injection for section reordering

Example: Basic reordering

This example moves the Latest Posts section before the Featured Posts section:

<style>
/* Reorder sections */
.hero-intro { order: 1; }
.cat-nav { order: 2; }
.latest-posts-section { order: 3; }  /* Move latest posts up */
.featured-posts-section { order: 4; } /* Move featured posts down */
.tag-posts-section { order: 5; }
.section-container { order: 6; }
</style>

Example: Advanced reordering

Move testimonials and logo wall to appear right after the hero section:

<style>
/* Hero stays at top */
.hero-intro { order: 1; }

/* Move testimonials and logos early */
.section-testimonials { order: 2; }
.section-logo-board { order: 3; }

/* Category nav and posts sections follow */
.cat-nav { order: 4; }
.featured-posts-section { order: 5; }
.latest-posts-section { order: 6; }
.tag-posts-section { order: 7; }

/* Other sections at the end */
.section-static-text { order: 8; }
.section-custom-posts { order: 9; }
.section-custom-content { order: 10; }
</style>

Other templates

Post templates

The theme provides 9 different post layout options to showcase your content in unique ways.

Post templates overview

Available post templates:

  1. No feature image - Clean text-focused layout without feature image
  2. Wide feature image - Feature image spanning content width
  3. Wide feature image with color - Wide image with color-generated background
  4. Full feature image - Feature image spanning full viewport width
  5. Full feature image with color - Full-width image with color-generated background
  6. Split - Content and image in two-column layout
  7. Split with color - Split layout with color-generated background
  8. Split reverse - Split layout with image on left
  9. Split reverse with color - Reverse split with color-generated background

Setting default post layout

You can set a default post layout that applies to all new posts.

Step-by-Step to Set Default Post Layout:
  1. Go to Settings > Design & branding > Theme > Post
  2. Find Default post hero layout
  3. Select your preferred default layout
  4. Click Save
Default post hero layout settings

Choosing layout for individual posts

To choose which template to use when you publish a specific 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.
  3. Publish or update your post.
Template selector in post settings
Note: Layouts with "color" generate a unique background color based on the dominant color of your feature image, creating a cohesive visual experience.

Manual background color override

For posts and pages using color-based layouts, you can manually set a specific background color instead of using the auto-generated color from the feature image. This is useful when you want precise control over the color scheme.

Step-by-Step to set manual background color:
  1. In the post or page editor, click the settings icon in the top right corner to open Post/Page settings
  2. Go to the Tags section
  3. Add an internal tag with the format: #color-HEXCODE (without the # symbol in the hex code)
  4. Examples:
    • #color-FF5733 for a vibrant orange
    • #color-2C3E50 for a dark blue-gray
    • #color-27AE60 for a green
  5. Publish or update your post/page
Manual background color tag example

The theme will automatically:

  • Apply your custom color as the background
  • Calculate appropriate text color (black or white) based on contrast
  • Override the auto-generated color from the feature image
🗒️
Note
This manual color override works for posts, pages, and post cards throughout your site, including the homepage featured posts section.

Adding videos to posts and pages hero

You can add videos to your posts and pages to create engaging, dynamic content. Videos will autoplay when visitors scroll to them and pause when scrolled out of view. This feature works on post hero sections, homepage post cards, and collection pages.

Step-by-step to add a video
  1. Create or edit a post or page in Ghost admin
  2. Add a feature image (this will be used as the video poster frame)
  3. Click the settings icon (⚙️) in the top right corner to open Post/Page settings
  4. Scroll to the Meta data section
  5. In the Facebook description field, paste the direct URL to your video file (e.g., https://example.com/video.mp4)
  6. Update or publish your post/page

Note: The Facebook description field (og_description) is repurposed for video URLs. Your actual meta description should be set in the Excerpt field instead.

Post options

The theme supports additional post customizations to control what appears on post pages.

Step-by-Step to Customize Post Options
  1. Go to Settings > Design & branding > Theme > Post
  2. Toggle options:
    • Show author - Display author card with bio and social links
    • Show social share - Display social sharing buttons (Twitter, Facebook, LinkedIn)
  3. Click Save
Post options settings

Email signup customization

Customize the email subscription box that appears at the bottom of posts and on the homepage.

Step-by-Step to Customize Email Signup
  1. Go to Settings > Design & branding > Theme > Post
  2. Edit the following fields:
    • Email signup text - Main heading (default: "Subscribe to my newsletter")
    • Email signup description - Supporting text (default: "Subscribe to my newsletter to get the latest updates and news")
  3. Click Save
Email signup customization settings

Tags template

The tags template displays all tags used on your site in an organized grid layout.

Tags template page

This page is automatically available at /tags/ after uploading the routes.yaml file. It shows:

  • Tag name
  • Number of posts for each tag
  • Link to individual tag pages

Individual tag pages

Each tag has its own page showing all posts with that tag.

Individual tag page
Step-by-Step to Customize Tag Information:
  1. Go to Tags in Ghost admin
  2. Click on the tag you want to edit
  3. Add or edit:
    • Tag name
    • Tag description
    • Tag image
  4. Click Save

Author pages

Each author has their own page showing their profile and posts.

Author page

Author pages include:

  • Author photo
  • Author name and bio
  • Social links
  • Grid of author's posts
  • Pagination
Step-by-Step to Customize Author Information:
  1. Go to Settings > Staff in Ghost admin
  2. Click on the author you want to edit
  3. Add or edit:
    • Profile photo
    • Name
    • Bio
    • Location
    • Website
    • Social media links (Twitter, Facebook, LinkedIn, etc.)
  4. Click Save

Authors page template

Create a dedicated page to showcase all your site's authors and contributors using the Authors page template.

Authors page template

This custom template displays authors in a 4-column grid layout, showing up to 8 authors sorted by post count (most prolific authors first).

Step-by-Step to Create Authors Page:
  1. Go to Pages in Ghost admin
  2. Click New page
  3. Add a title (e.g., "Our Authors" or "Contributors")
  4. (Optional) Add a feature image
  5. In the Page settings sidebar (click the settings icon), find the Template dropdown
  6. Select Zpage Authors from the template options
  7. Publish
Creating authors page

The page will automatically populate with author cards showing:

  • Author profile photo
  • Author name
  • Number of posts
  • Author bio
  • Link to individual author page
Note: The page content area is not used for this template—all author information is automatically pulled from your Ghost author settings.

Collection page template

Create curated collection pages that display posts filtered by specific tags. This template is perfect for creating topic-based collections, featured content galleries, or any custom grouping of posts.

Collection page template

The Collection page template allows you to:

  • Add custom introductory content at the top of the page
  • Display posts filtered by one or more tags
  • Show up to 100 posts in a grid layout
  • Use the tag's accent color as the section background
Step-by-Step to Create Collection Page:
  1. Go to Pages in Ghost admin
  2. Click New page
  3. Add a title for your collection (e.g., "Featured Articles" or "Design Resources")
  4. (Optional) Add introductory content in the page editor—this appears above the filtered posts
  5. (Optional) Add a feature image
  6. In the Page settings sidebar (click the settings icon), find the Template dropdown
  7. Select Zpage Collection from the template options
  8. In the Twitter description field, enter the tag slug(s) you want to filter posts by
    • Single tag: design
    • Multiple tags: design,technology
  9. Publish
Collection page settings

Other custom settings

Table of contents

You can add a table of contents (TOC) to any post for better navigation through long-form content. The TOC automatically generates from h2 and h3 headings in your post.

Table of contents in post
Step-by-Step to Add Table of Contents
  1. Create a new post and write your post using h2 and h3 headings
  2. Right under the title, add an HTML card
  3. Insert the following code:
<aside class="toc-container">
    <div class="toc-sidebar">
        <h4>On this page</h4>
        <div class="toc"></div>
    </div>
</aside>
  1. Publish and review it
Adding table of contents HTML card

Note: You can save this Table of content HTML and reuse in other pages by clicking on Save as snippet.

Saving TOC as snippet

Customizing Table of Contents heading levels

By default, the table of contents displays only h2. If you want to show specific heading levels (for example, h2 and h3 headings), you can customize this using Code Injection.

Step-by-step to customize TOC headings
  1. Go to Settings > Code injection in Ghost Admin
  2. Add the following code to the Site Header section:
<script>
window.tocbotConfig = {
    headingSelector: 'h2'
};
</script>
  1. Modify the headingSelector value to match your needs:
    • 'h2' - Only h2 headings
    • 'h2, h3' - Both h2 and h3 headings (default)
    • 'h2, h3, h4' - h2, h3, and h4 headings
  2. Click Save

Note: This code must be added to the Site Header section (not Site Footer) so it loads before the theme's TOC initialization script.

Posts per page

By default, the homepage and other listing pages display a maximum of 9 posts per page, but you can change this number.

Step-by-Step to Change Posts Per Page
  1. You'll need to open the theme's package.json file in your code editor and find the following:
"config": {
    ...
    "posts_per_page": 9
    ...
}
  1. Change the value of 9 to your expected value.
  2. Save your package.json file in the root folder.
  3. Re-zip the theme and upload it to Ghost.

Google analytics

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

This official integration allows you to:

  • Add your Google Analytics tracking ID
  • Track pageviews automatically
  • Monitor user behavior
  • No code editing required

Syntax highlighting

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

Basic code block (no highlighting)

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

This will produce a gray code block without syntax highlighting.

Highlighted code block

To highlight a code block, add a language alias like css or js after the opening backticks. For example:

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

This will produce a colored, syntax-highlighted code block.

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 to Add Responsive Table
  1. In your post or page editor, add a Markdown card.
  2. Add the markdown to create a table. To generate a table, you can use the tool Markdown Tables Generator. 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    |
  1. Publish your post or page.

Member comments

The theme comes with Ghost Native Comments integration.

Step-by-Step to Enable Comments:
  1. Go to Settings > Membership > Access
  2. Click Edit next to your membership settings
  3. Find the Commenting section
  4. Choose who can comment:
    • All members
    • Paid members only
    • Nobody (disable comments)
  5. Click Save

Comments will appear at the bottom of post pages when enabled.

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 to Add Translation
  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. ISO 639-1 language 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",
    "Browse": "Browse",
    ...
}
  1. Edit to translate into your target language (French example for fr.json):
{
    "Subscribe": "S'abonner",
    "Sign in": "Se connecter",
    "Account": "Compte",
    "Browse": "Parcourir",
    ...
}
  1. Upload the theme with the new language file.
  2. Go to the General settings in the Ghost Admin.
  3. At the top of the page, you'll see the Publication info section.
  4. Enter the correct language code into your Publication language settings menu.
  5. Finally, click Save to activate.
Note: 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 settings

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/Handlebars files

Step-by-Step to Edit Theme Files
  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.
Recommended Code Editors: You can edit files using applications 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.
  1. After changing the theme code, re-zip the theme directory to upload it back to Ghost.
Creating Zip Archives: To create a zip archive on 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.
  1. To upload the modified theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
  2. Click the Upload theme button in the upper right corner.
  3. Once uploaded, click Activate to activate the theme on your site.

Edit CSS

The best way to make minor CSS changes is to use Ghost's built-in Code injection. The change will be applied right after you save.

If you need more powerful CSS customization, you can edit CSS files in the theme directory. This requires a more technical setup.

Follow this guide: How to apply CSS changes in your Ghost theme

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

Code injection

Code injection is a powerful feature for customization without editing theme files directly.

For a CSS example, you can use the code in the Site Header section to change colors and styling.

Example: Change title color and size
  1. Go to Settings > Code injection
  2. Add this code to the Site Header section:
<style>
  .head-logo-wrap .logo-text {
    color: #4550E5;
    font-size: 3.2rem;
  }
</style>
  1. Click Save
Code injection example

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

Theme deploy with GitHub Actions

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

This allows you to:

  • Edit theme files locally
  • Push changes to GitHub
  • Automatically deploy to your Ghost site
  • Version control your theme customizations

Follow this guide to set up GitHub Actions: Streamline the deployment of your Ghost theme using GitHub Action

Congratulations on setting up your Vincent theme! We hope this documentation has been helpful in getting you started with creating a beautiful and functional website.

Vincent is designed to be flexible and easy to customize, offering a wide range of options to make your site unique. With its customizable homepage sections, multiple post layouts, and extensive customization options, you have everything you need to create a professional online presence that showcases your content like it matters.

If you need additional support or have questions, please visit Themex Studio or consult the Ghost Help Center.

The Ultimate Theme Bundle
Lifetime Access
The Ultimate Theme Bundle
Every Themex theme you'll ever need. 8 themes now + all future releases. Unlimited sites for $289.
See what's included
Subscribe to our newsletter.

Become a subscriber receive the latest updates in your inbox.