Flow Theme Documentation

Welcome to Flow! This guide helps you install, customize, and get the most out of your new Ghost theme.

If you’re new to Ghost, you might find the official Ghost documentation helpful.

Installation and Updates

Installing the Theme

Follow these steps to add Flow to your Ghost site:

Log in to your Ghost Admin.
Go to Settings > Design & branding > Customize.
Click Change theme (bottom right).
Select Upload theme and choose the Flow.zip file you downloaded.
Once uploaded, click Activate.

Removing the Theme

If you need to remove Flow:

Go to Settings > Design & branding > Customize.
Click Change theme.
Find Flow in the list. Before deleting, activate a different theme (you can’t delete an active theme).
Click the ... menu next to Flow and select Delete. Confirm the deletion.

Updating the Theme

Keep Flow up-to-date with the latest features and improvements:

Download the latest version of the Flow theme zip file.
Go to Settings > Design & branding > Customize.
Click Change theme.
Select Upload theme and choose the new Flow.zip file.
Activate the updated theme.

Important: Updating overwrites any direct code changes you’ve made to theme files. If you’ve customized the code, back up your changes before updating.

Language Support

Flow supports multiple languages through Ghost’s built-in internationalization system. The theme includes translations for:

Supported Languages:

Language	Code
Afrikaans	`af`
Albanian	`sq`
Arabic	`ar`
Bosnian	`bs`
Brazilian Portuguese	`pt-BR`
Bulgarian	`bg`
Catalan	`ca`
Chinese	`zh`
Croatian	`hr`
Czech	`cs`
Danish	`da`
Dutch	`nl`
English	`en`
Esperanto	`eo`
Finnish	`fi`
French	`fr`
German	`de`
Greek	`el`
Hungarian	`hu`
Icelandic	`is`
Indonesian	`id`
Italian	`it`
Japanese	`ja`
Korean	`ko`
Lithuanian	`lt`
Macedonian	`mk`
Malay	`ms`
Mongolian	`mn`
Norwegian	`no`
Norwegian Nynorsk	`nn`
Polish	`pl`
Portuguese	`pt`
Romanian	`ro`
Russian	`ru`
Scottish Gaelic	`gd`
Serbian	`sr`
Sinhala	`si`
Slovak	`sk`
Slovenian	`sl`
Spanish	`es`
Swedish	`sv`
Swiss German	`de-CH`
Thai	`th`
Traditional Chinese	`zh-Hant`
Turkish	`tr`
Ukrainian	`uk`
Uzbek	`uz`
Vietnamese	`vi`

Setting Your Language:

Go to your Ghost Admin panel
Navigate to Settings > General
Under Publication language, enter your language code (e.g., ru for Russian, ar for Arabic)
Save your changes

The theme will automatically display interface elements, dates, and navigation in your selected language.

Customization

Logo

Set your site’s logo for branding:

Go to Settings > Design & branding.
Under Brand, find Publication logo.
Click Upload logo and select your image file. Use a transparent background (like .png) for best results.
Click Save.

Dark Mode Logo: If you plan to use dark mode, you can add a separate logo optimized for dark backgrounds:

Go to Settings > Design & branding > Customize.
Find Logo for dark color scheme under Site-wide.
Upload your dark mode logo variant.
Click Save.

Configure your site’s navigation menus and sidebar.

Primary Navigation (Sidebar Menu): The main navigation appears in a sidebar that opens on both desktop and mobile. This is your site’s primary navigation system.

Go to Settings > Navigation.
Edit items under Primary navigation.
Add menu items with optional icons and submenus.

Navigation Item Formatting:

Basic Items:

Label: Home → Displays as “Home”
URL: / → Links to homepage

Items with Icons:

Label: [icon=home] Home → Displays with home icon + “Home”
Label: [icon=user] About → Displays with user icon + “About”

Creating Group Headers and Sub-items:

Group Header: Set URL to # (e.g., Label: Company, URL: #)
Sub-items: Add a - prefix to the label (e.g., Label: -About Us, URL: /about)
Sub-items: Add another sub-item (e.g., Label: -Contact, URL: /contact)

Example Navigation Structure:

1. Home                    (Label: "Home", URL: "/")
2. Company                 (Label: "Company", URL: "#") ← Group Header
3. -About Us              (Label: "-About Us", URL: "/about") ← Sub-item
4. -Contact               (Label: "-Contact", URL: "/contact") ← Sub-item
5. Blog                   (Label: "Blog", URL: "/blog")

This creates a grouped navigation where “About Us” and “Contact” appear as sub-items under the “Company” header in the sidebar menu.

Available Icons: Use any icon name from the Lucide icon library (e.g., home, user, mail, phone, calendar, etc.). Icons appear before the text in the navigation.

Sidebar Menu Background: Customize the sidebar appearance with a background image.

Go to Settings > Design & branding > Customize.
Under Site-wide, find Sidebar menu background image.
Upload an image for the sidebar background.
Click Save.

Secondary Navigation (Footer Menu): Displays in organized columns in your site footer.

Go to Settings > Navigation.
Edit items under Secondary navigation.
Format using the same syntax as primary navigation.
Items with URL # become column headers, items below them become column content.

Color Scheme

Choose how your site handles light and dark modes:

Go to Settings > Design & branding > Customize.
Under Site-wide, find Color scheme and choose:
- Light: Always use the light theme.
- Dark: Always use the dark theme.
- System: Automatically follow the user’s system preference.
Click Save.

Color Scheme Switcher: Allow visitors to toggle between light and dark modes:

Find Show color scheme switcher under Site-wide.
Toggle it on to display a switcher button in the header.
Click Save.

Dark Footer: Control whether the site footer uses a dark color scheme:

Find Use dark color scheme for footer under Site-wide.
Toggle it on to make the footer use dark colors regardless of the main color scheme.
Click Save.

Fonts

Flow integrates with Ghost’s native font system and also includes built-in options.

Using Ghost Native Fonts (Recommended)

Available in Ghost 5.104.0+, this method provides the best control and consistency:

Ensure you’re using a recent version of Flow and Ghost.
Go to Settings > Design & branding.
Under Brand, find the Typography section.
Select your desired heading and body fonts.
Click Save.

These settings automatically override the theme’s specific font settings.

Using Theme Font Settings

If you prefer not to use Ghost’s native system:

Go to Settings > Design & branding > Customize.
Expand the Site-wide section.
Use the Heading font family and Body font family dropdowns to select fonts.
Click Save.

Available Theme Fonts:

Heading Fonts	Body Fonts
Bitter	Bitter
Cardo	Fira Mono
Chakra Petch	Fira Sans
Della Respira	IBM Plex Serif
Fira Mono	Inter
Fira Sans	JetBrains Mono
Fraunces	Lora
IBM Plex Serif	Manrope
Inter	Merriweather
JetBrains Mono	Noto Sans
Libre Baskerville	Noto Serif
Lora	Nunito
Manrope	Poppins
Merriweather	Roboto
Noto Sans	Source Serif 4
Noto Serif	Space Mono
Nunito
Old Standard TT
Poppins
Roboto
Rufina
Source Serif 4
Space Grotesk
Space Mono
Tenor Sans

Display social media icons in your site footer:

Facebook and X (formerly Twitter):

Go to Settings > General.
Scroll to Social accounts.
Enter your Facebook page URL and X profile URL.
Click Save.

Other Platforms (Instagram, LinkedIn, etc.):

Go to Settings > Code injection.
In the Site Header box, add the following script, modifying the links and adding platforms as needed:

<script>
  // Add links for the social platforms you want to display
  window.social = {
    instagram: "https://instagram.com/your_username",
    linkedin: "https://linkedin.com/in/your_profile",
    youtube: "https://youtube.com/your_channel",
    pinterest: "https://pinterest.com/your_username",
    // Add other supported platforms below
  };
</script>

Click Save.

Supported Platforms for Code Injection:

Use the lowercase platform name as the key (e.g., instagram, linkedin).


Behance	Facebook	Pinterest
Bluesky	Flickr	Reddit
Deezer	Instagram	Snapchat
Diaspora	Kickstarter	Spotify
Discord	Line	Telegram
Dribbble	LinkedIn	Threads
Mastodon	TikTok	Weibo
OK	Twitch	WhatsApp
Patreon	Vimeo	X
Xing	YouTube	Yelp
Zhihu

Individual author profiles can display their personal social media links on author pages and in author bio sections:

Adding Social Links to Author Profiles:

Go to Settings > Staff in Ghost Admin.
Edit an author profile.
Scroll to the Social accounts section.
Fill in the relevant social platform fields.
Click Save.

Supported Platforms for Authors:

Authors can add links to these platforms directly in their Ghost profile:

Platform	Field Name	Notes
Website	Website	Any personal or professional website
Facebook	Facebook	Facebook profile/page username
X (Twitter)	Twitter	X.com username (still labeled “Twitter” in Ghost)
Instagram	Instagram	Instagram username
TikTok	TikTok	TikTok username
YouTube	YouTube	YouTube channel URL or username
LinkedIn	LinkedIn	LinkedIn profile URL
Threads	Threads	Threads username
Bluesky	Bluesky	Bluesky handle
Mastodon	Mastodon	Full Mastodon profile URL

Where Author Social Links Appear:

Author archive pages (/author/username/)
Author bio sections within posts
The Authors listing page (if using the Authors template)

Author social links appear as icons with tooltips and open in new tabs when clicked.

Content Loading (Pagination)

Flow uses automatic infinite scroll - posts load automatically as visitors scroll to the bottom of the page. A “You’re all caught up.” message appears when all posts are loaded.

Compact Posts Grid

Control the layout density of post listings:

Go to Settings > Design & branding > Customize.
Under Site-wide, find Use compact posts grid.
Toggle it on to display posts in a more compact grid layout on listing pages.
Click Save.

The compact grid displays posts in a narrower container for a more focused browsing experience.

Homepage Setup

Hero Section

Create an eye-catching hero section on your homepage to welcome visitors and highlight your key message. The hero section is highly customizable with flexible layouts, image display options, and visual styles.

Configuration

Go to Settings > Design & branding > Customize.
Expand the Homepage section.
Configure the hero section options:

Options

Hero Title:

Enter a compelling headline in the Hero title field.
HTML formatting is supported for custom styling (e.g., Welcome to <strong>Our Blog</strong>).

Hero Description:

Add supporting text in the Hero description field.
HTML formatting is supported for emphasis and styling.

Hero HTML Content:

Add custom HTML content for call-to-action buttons, forms, or any interactive elements.
Full HTML support including links, buttons, forms, and custom markup.
Examples: <a href="/subscribe" class="button">Subscribe Now</a> or custom contact forms.

Hero Layout: Choose how the image and content are arranged (image-top, image-bottom, image-left, image-right, banner, text-only).

Hero Image:

Upload a custom image for the hero section
If no image is uploaded, the site’s cover image will be used
Images are automatically optimized for different screen sizes
Only visible for layouts other than “Text Only” and “Banner”

Hero Image Display: Controls the visual style and size of your hero image (default, avatar-small, avatar-medium, avatar-large, card-small, card-medium, card-large, floating-small, floating-medium, floating-large).

Image Display Guidelines:

Default: Shows images without modification
Avatar: Creates circular cropped profile images
Card: Adds shadows and rounded corners
Floating: Adds rotation effects and shadows

Hero Text Alignment: Controls how text content is aligned (left, center, right).

Click Save to apply your changes.

Note: The hero section appears when at least one of the title, description, HTML content, or image fields has content. All settings work together - experiment with different combinations to create the perfect hero for your site.

Highlights

Display a horizontal scrolling carousel of featured tags on your homepage.

Configuration:

Go to Settings > Design & branding > Customize.
Expand the Homepage section.
Find the Highlight tags field.

Highlight Tags: Enter a comma-separated list of tag slugs to display in the highlights carousel (e.g., popular, trending).

How It Works: Creates a horizontal scrolling section showing circular tag images with names. Visitors can scroll through the tags and click to visit tag pages. Tags appear in the order you specify, making it easy to showcase your most important content categories.

Featured Posts

Control which posts appear first on your homepage with visual indicators.

How Featured Posts Work: Posts marked as “featured” in Ghost Admin will automatically appear at the top of your homepage before regular posts. Featured posts are displayed with a pin icon to indicate their special status.

Display Behavior: Featured posts appear in order of newest first, followed by regular posts in chronological order. The pin icon helps visitors identify your most important content.

Copyright Text

Customize the copyright notice shown in your site footer:

Go to Settings > Design & branding > Customize.
Find Copyright text.
Enter your desired copyright information (e.g., © 2024 Your Site Name. All rights reserved.).
Click Save.

If left empty, the default ”© [Year] Published with Ghost” will be displayed.

Post Settings

Post Layouts

Choose how a post’s feature image and content are arranged:

Edit a post in Ghost Admin.
Open the post settings .
Under Template, choose from:
- Default: Standard post layout with featured image
- No Image: Clean, text-focused layout without featured image display
- Left Image: Featured image on the left side, content on the right
- Right Image: Featured image on the right side, content on the left
- Full Screen Image: Full screen featured image with title and excerpt overlaid
- Gradient Image: Featured image with gradient overlay above content
Click Update.

Scroll Indicator

Show a circular reading progress indicator at the bottom right of the screen:

Go to Settings > Design & branding > Customize.
Under Site-wide, find Show scroll indicator.
Toggle it on or off.
Click Save.

The scroll indicator appears as a circular progress ring that fills as the user scrolls through the page and can be clicked to scroll back to the top.

Post Suggestions

Display related posts at the bottom of each article:

Go to Settings > Design & branding > Customize.
Under Post, find Show post suggestions.
Toggle it on or off.
Click Save.

Comments

Enable Ghost’s built-in commenting system:

Go to Settings > Membership.
Under Access, click Edit for Commenting.
Choose who can comment (Nobody, All members, Paid members).
Click Save.

Page Templates

Flow includes several templates for creating custom pages.

Authors Page

Create a page listing all site authors with their profiles:

Create a new page in Ghost Admin (e.g., title “Our Team”).
Open page settings .
Under Template, select Authors.
Set the page URL to /authors.
Publish the page.

Ensure author profiles in Staff settings have a profile image, bio, and any relevant social links filled out.

Tags Page

Create a page listing all tags used on your site:

Create a new page (e.g., title “Topics”).
Open page settings.
Under Template, select Tags.
Publish the page.

Add this page to your site navigation for easy access. For best results, ensure your tags have descriptions and feature images set under Tags in Ghost Admin.

Membership Page

Create a dedicated page to display your membership tiers and allow visitors to subscribe.

Create a new page in Ghost Admin (e.g., title “Become a Member”).
Add a Custom excerpt in the page settings to display a short introductory text below the title.
Add any additional content, like an FAQ section, in the main editor. This will appear below the pricing tiers.
You can also add a Feature image to the page, which will be displayed as a background for the pricing section.
Open page settings .
Under Template, select Membership.
Publish the page.

The page will automatically pull in your active tiers from Settings > Membership > Tiers.

Contact Page

Add a contact form to your site:

Sign up for a form service like Formspree or Getform and get your unique form endpoint URL.
Go to Settings > Design & branding > Customize.
Under Site-wide, find Contact form url.
Paste your form endpoint URL.
Click Save.
Create a new page (e.g., title “Contact Us”).
Add any introductory text or contact details in the page editor.
Open page settings.
Under Template, select Contact.

Create custom sign-in and sign-up pages with your own content and styling.

Sign In Page:

Create a new page in Ghost Admin (e.g., title “Sign In”).
Add custom content in the page editor (welcome message, instructions, etc.).
Optionally add a feature image that will be displayed on the right side of the page.
Open page settings .
Under Template, select Sign In.
Set the page slug to sign-in for consistent URLs.
Publish the page.

Sign Up Page:

Create a new page in Ghost Admin (e.g., title “Join Us”).
Add custom content in the page editor (benefits, call-to-action text, etc.).
Optionally add a feature image for visual appeal.
Open page settings .
Under Template, select Sign Up.
Set the page slug to sign-up for consistent URLs.
Publish the page.

Image Fallback: If no feature image is set for the page, the theme will automatically use your site’s cover image as a fallback for the visual side of the layout.

Automatic Navigation Integration: When you create sign-in and sign-up pages with the correct slugs (sign-in and sign-up), the theme automatically updates navigation links throughout the site to use your custom pages instead of Ghost’s default portal. If these pages don’t exist, the theme falls back to Ghost’s built-in authentication portal.

Customizing Subscribe Form Content:

To customize the title and description text above the subscription form:

Create a new page in Ghost Admin.
Add your custom title and description in the page content.
Open page settings .
Under Tags, add the tag #subscribe-form.
Publish the page.

The footer automatically uses the most recently updated page with the #subscribe-form tag. Without this tag, default text appears.

—

Development

Flow is a modern Ghost theme built with:

Vite for build tooling
Tailwind CSS for styling
TypeScript for enhanced JavaScript functionality
PhotoSwipe for image galleries
Infinite scroll for content loading

Development Setup

To edit the theme files:

Download the theme ZIP file from Ghost Admin.
Unzip the file on your local machine.
Open the theme folder in your preferred code editor.

The theme uses Tailwind CSS for styling and TypeScript for scripts. You’ll need to set up a development environment to work with these files.

Setting Up the Development Environment

Ensure you have Node.js installed on your system.
Open a terminal/command prompt in the theme folder.
Run npm install to install the required dependencies.

Working with Tailwind and TypeScript

The theme uses Vite to bundle and compile Tailwind CSS and TypeScript files. To work with these files:

Make your changes in the assets/css/*.css or assets/js/*.ts files.
Run npm run dev to start Vite in watch mode. This will automatically compile your changes.
To build for production, run npm run build.

Important Files and Folders

assets/css/: Contains CSS files
assets/js/: Contains TypeScript files
partials/: Contains reusable Handlebars template parts
tailwind.config.cjs: Tailwind configuration
vite.config.js: Vite build configuration

Remember to thoroughly test all changes across different devices and browsers before deploying to a live site.

Support

If you need additional help with the theme, please contact me at support@luxethemes.com.

Good luck with your site!

All the best,
Stefan from LuxeThemes

Changelog

All notable changes to this theme will be documented here

1.0.0

Initial release of the theme