Skip to content
trexthemes
Documentation

Diana Documentation

Everything you need to install, configure, and customize the Diana Ghost theme.

View live demo

Getting Started

Thank You for Choosing Our Theme!

We’re thrilled that you’ve selected our Diana theme for your Ghost website. If you run into any challenges or have questions, don’t hesitate to reach out via our email (trexthemes@gmail.com) — we’re here to help!

Getting Started with Diana

All the theme’s features, setup instructions, and customization options are thoroughly covered in this documentation. Use the On this page menu on the right to jump straight to any section.

Theme Details

  • 🎨 Name: Diana
  • ✍️ Author: T-Rex Themes
  • 🛠️ Platform: Ghost
  • 🔄 Latest Version: 1.0.0
  • 📅 Last Updated: October 28, 2025

Requirements

Since Diana is a Ghost theme, it follows the same system requirements as Ghost. Before getting started, ensure you have:

  • ✅ A working Ghost installation
  • ✅ Basic familiarity with Ghost’s interface

🔍 New to Ghost? We recommend checking out the official Ghost Help Center for beginner-friendly guides and tutorials.

Installing Your Diana Theme

🚀 Welcome to Diana!

Follow these quick steps to install your new Ghost theme:

1. Download Your Theme

After purchase, you’ll receive a diana.zip file containing your theme.

2. Log Into Ghost Admin

Access your dashboard at:
https://yoursite.com/ghost

3. Upload the Theme

  • Click the ⚙️ Settings icon (bottom left)
  • Select “Theme” from the menu
  • Choose “Change theme” → “Upload theme”
  • Upload the Diana.zip file

4. Activate Diana

Once uploaded, click “Activate now” to apply your new theme.

🎉 That’s it! Diana is now ready to use.

💬 Need help? Contact our support team for assistance at trexthemes@gmail.com.

Homepage

This guide explains how to set up your homepage using the Diana theme in Ghost.

1. Header

Add Logo:

  1. Go to Ghost Admin → Settings → Design & Branding → Brand.
  2. Upload your Primary Logo:
    • Find the “Publication logo” field.
    • Click Upload logo and select your file.
    • Click Save to apply changes.
  3. For dark mode logo:
    • Go to Settings → Design & Branding → Theme.
    • Upload your logo for dark mode.

Hero section:

  1. For H1 text, Go to Ghost Admin → Settings → Title & Description → Site description.
  2. For Description bellow the title text, Go to Settings → Design & Branding → Theme → Site-wide → Site subtitle.

2. Navigation

The Diana theme provides flexible navigation options.

📌 Primary Navigation

(Displayed at the top of your site)

  1. Go to Ghost Admin → Settings → Navigation.
  2. Click Customize next to Primary Navigation.
  3. Add/Edit Menu Items:
    • Drag to reorder links.
    • Click + to add new items.
    • Click the trash icon to remove items.
    • Click Save to apply changes.

To Add Menu Dropdown:

  1. Navigate to Settings → Design & Branding → Theme → Site-wide.
  2. Add your a number in Number of links before more and you can modify “More” text by editing NMore text

➕ Secondary Navigation

(Optional menu for extra links or CTAs)

  1. In the same Navigation settings, click Customize next to Secondary Navigation.
  2. Build your menu following the same steps as above.
  1. Go to Ghost Admin → Settings → Social accounts.
  2. Add your links:
    • Facebook: Paste full profile URL (e.g., https://facebook.com/yourpage)
    • X (Twitter): Enter handle or full profile URL (e.g., https://twitter.com/yourhandle)

Other Social Networks

  1. Navigate to Settings → Design & Branding → Theme → Site-wide.
  2. Add your Instagram and Pinterest and the other profile links.

The next section displays the latest featured posts. To show posts here, mark them as featured.

5. Recent Posts

  • Automatically added, this section displays latest posts.

6. Subscribe & Tags

  • To display the Subscribe form, make sure access is set to “Anyone can sign up”. To do this, go to Ghost Admin → Membership → Access.
  • For tags section, by default, Diana displays tags with a title, and image. Make sure each tag belongs to at least one post.
  • Logo ais displayed automatically if configured initially.
  • To edit copyright text go to :
    Settings → Design & Branding → Theme → Footer text
  • For Description bellow the logo, Go to Settings → Design & Branding → Theme → Site-wide → Footer text.

Customizing Your Accent Color

Give your Diana theme a personalized touch by updating the accent color — here’s how:

🔧 Quick Steps

  1. Go to Ghost Admin → Settings → Design & Branding
  2. Select the Brand tab
  3. Locate the Accent Color option
  4. Choose your color (use the palette or enter a HEX code)
  5. Click Save to apply the changes

Typography with the Diana Theme

The Diana theme gives you full control over the fonts used across your site. You can select from theme fonts, Ghost fonts, or system fonts, based on your preference for style and site performance.

How to Configure Typography

1. Log in to Ghost Admin

Go to:
https://yoursite.com/ghost

2. Access Design Settings

Navigate to:
Settings > Site > Design & branding
or visit:
https://yoursite.com/ghost/#/settings/design
Click the Customize button to open the theme editor.

3. Open Theme Typography Settings

Find the Typography option under the Site wide section.

4. Choose Your Font Option

  • Theme (default): Uses fonts provided by the Diana theme, we are using Google Fonts for optimal load speed and consistent appearance.
  • Ghost: Enables fonts set in Settings > Site > Design & branding > Brand > Typography. When selected, the theme’s default fonts are disabled to prevent redundant loading.

Routes Setup

⚠️ Caution

For Woords to function correctly, you must upload the routes.yaml file.
The file is included inside the woords.zip you downloaded.

This step is separate from the theme upload and ensures that custom collections, navigation, and dynamic pages work properly.

How to Upload the routes.yaml File

  1. Log in to your Ghost Admin at:
    https://yoursite.com/ghost/
  2. Navigate to:
    Settings → Labs (https://yoursite.com/ghost/#/settings/labs)
  3. Under Beta features, click the Upload routes file button.
  4. Select the routes.yaml file from the root directory of the Woords theme.

💡 Labs is a testing ground for new or experimental Ghost features. These features may change, break, or disappear unexpectedly.

Available Features in Labs

  • Routes — Configure dynamic routing by modifying the routes.yaml file.
    Download current routes from Ghost Admin.

Subscriptions

⚠️ Caution

  • For Woords subscriptions pages to function correctly, you must create pages with specific slugs.

  • In order for Sign In, Sign Up, Membership, and Account to work, you need to create pages with the following slugs:

  • Membership Page: with slug membership, and add your title and excerpt

  • Signup Page: with slug signup, and add your title and excerpt

  • Signin Page: with slug signin, and add your title and excerpt

  • Subscribe Page: with slug subscribe, and add your title and excerpt

  • Account Page: with slug account, and add your title and excerpt

Translation

The Diana theme fully integrates with Ghost’s native translation system, allowing you to easily localize your website for a global audience. It uses simple JSON files stored in the locales/ folder to manage all text strings, making it straightforward to edit existing translations or add new languages.

How to Customize or Add Translations

1. Download and Unzip the Theme

Extract the theme .zip file on your computer.

2. Locate the Translation Files

Open the locales/ folder inside the theme directory. Here you’ll find JSON files named by language code, such as en.json or fr.json.

3. Edit an Existing Translation

Open the JSON file in a code editor (e.g., Visual Studio Code or Sublime Text) and modify the key-value pairs to your desired translations.

Example snippet from a translation file:

{
  "Subscribe": "Inscreva-se",
  "Read More": "Leia Mais"
}

4. Add a New Language (Optional)

  • Duplicate an existing language file, e.g., en.json.
  • Rename the copy with your desired language code, such as fr.json for German.
  • Translate all the key-value pairs inside the file to your target language.

5. Repackage the Theme

Compress the entire theme folder—including your updated locales/ directory—back into a .zip archive.

6. Upload the Updated Theme

  • Log in to your Ghost Admin panel.
  • Navigate to:
    Settings > Site > Theme > Change theme > Upload Theme
  • Upload the newly created .zip file containing your modified theme.

7. Set the Site Language

  • Go to:
    Settings > General > Publication Language
  • Enter the appropriate language code (e.g., es for Spanish, fr for Arabic).

Important Notes

  • Always use a code editor that supports UTF-8 encoding and proper JSON syntax to prevent file corruption.
  • Avoid basic text editors like Notepad or word processors such as Word, as they may insert hidden characters or break formatting.

Additional Resources

For comprehensive details on Ghost’s translation and localization features, see the official Ghost Localization Guide.

← Back to all documentation