Imperia documentation

Thank you for using the Imperia theme, by Coastal Themes! Below we will talk about all of the theme’s features and settings which you can use to customize the theme to your liking.

Imperia is flexible enough to look entirely unique to your blog, while keeping a clean grid layout which lets your content take centre stage.

Don’t have the theme yet? Get it here.

Installing your theme

Once you’ve downloaded your new theme .zip file follow these steps to install your theme:

  1. Log in to your publication admin section at yoursite.com/ghost/
  2. Go to Settings > Design ( eg. yoursite.com/ghost/#/settings/design/)
  3. Click Change theme and then click Upload theme and select the theme zip file (how to find your theme zip file)
  4. After the upload is complete click Activate

Custom settings

The theme comes with custom design settings which let you create a beautiful, unique site, these settings are placed under three categories:

Brand settings

Site Description – Also used for meta data, this allows you to describe your blog to Google and your audiance.

Accent color – Used to define the color of buttons, background colors and other elements across the theme, this can be seen as your “main” color.

Publication icon – This is a social icon that is used as the Favicon for your site. You’ll also see this in the far corner when you’re logged in to your publication. Publication icons must be square and at least 60px in size.

Publication logo – This is the primary logo for your brand and is displayed within your theme in the header and (if supported, footer).

Cover image – Used as a banner for your site, and a larger image when sharing to social media (such as X, Facebook etc.). Ghost recommends a cover image of 1500px wide.

Site-wide settings

Header layout
Set the layout of your site’s header on desktop:

  • Tall – This will place your logo centered and above your menu, this is great for a site with a lot of navigation items.
  • Slim – The slim layout will place your logo next to your primary navigation, taking up less vertical space.

Heading font
Choose your heading fonts across your site:

  • Abril Fatface
  • Cormorant Garamond
  • DM Sans
  • DM Serif Display
  • Inter
  • Lato
  • Libre Baskerville
  • Montserrat
  • Nunito
  • Oswald
  • Poppins
  • Roboto
  • Work Sans

Body font
Choose your body fonts across your site, including navigation and buttons:

  • Cormorant Garamond
  • DM Sans
  • DM Serif Display
  • Inter
  • Lato
  • Libre Baskerville
  • Montserrat
  • Nunito
  • Oswald
  • Poppins
  • Roboto
  • Work Sans

Background color – Pick a custom color used in the background of all the pages on your site.

Heading text color – Pick a custom color for the headings in places like Post lists, Post pages, Page Titles, etc.

Body text color – Pick a custom color for body text – the majority of the readable text on your site.

Accent text color – Pick a color used when laid over the default Ghost Accent Color (set in “Brand ⯈ Accent Color”).

Archive header layout – Much like the site header settings, the archive (tag and author list pages) can be stacked and centered or slim and left-aligned:

  • Left-aligned – This will place your content left-aligned inside the archive header, in the case of the author page, the author image will be left of the author name, bio and social icons.
  • Stacked – This will center your content and align all of the content top-down.

Page header layout – Page headers can also be stacked and centered or slim and left-aligned.

  • Left-aligned – This will place your content left-aligned inside the archive header, in the case of the author page, the author image will be left of the author name, bio and social icons.
  • Stacked – This will center your content and align all of the content top-down.

Homepage settings

Hero form – Choose your site’s introduction and call to action for the homepage:

  • Sign-up form – A quick signup form for users to subscribe your newsletter.
  • Sign-up button – This will display a button with the title “Become a Subscriber”, which will follow your subscribe flow setup under Membership > Portal settings.
  • Search form – Display a site-wide search trigger.
  • Title only – Display only your Hero title text with no call to action.
  • None – Hide this section entirely, including title, and call to action. This is great to move your posts up as high as possible.

Hero title text – Display a bold heading in the hero area of your Homepage as the first thing visitors see when they land on your site.

Show cover image – This will display your cover image as a banner behind your site’s hero introduction and call to action.

Homepage layout – Choose the order of your homepage

  • Magazine – This will display the default dynamic grid layout, featured posts and tags and latest posts.
  • News – Your featured post slider and tag slider will appear first, followed by the dynamic grid.
  • Grid – If you want to display a very simple 3 column grid, use this layout.

Featured posts – Show a prominent slider of the recently featured posts on your homepage, this will stack on mobile.

Note: You need to have set at least one post as featured for the slider to show up.

Popular tags – Show a swipeable carousel of the popular tags at the top of your homepage.

Post settings

Featured image size – This will set the aspect ratio of your featured image, allowing you to keep your images contained to a specific height or allow them to take their natural shape:

  • Natural (No crop)
  • Square (1:1)
  • Landscape (4:3)
  • Wide (16:9)
  • Letterbox (21:9)

Similar posts – Display similar posts in the sidebar of your posts, these are matched by the primary tag of the current post.
Subscribe form – Show a subscribe form in your post sidebar.
Recommendations – If your site has recommendations, you can display them in your post sidebar.

Membership and account pages

Our theme has full support for Ghost memberships, you’ll just need to add the necessary pages and the theme will take care of the rest.

Membership page

  1. Go to Pages in your Ghost admin
  2. Click Add New
  3. Name your page e.g. Memberships
  4. Choose Membership under the Template menu in the sidebar
  5. Click Publish

Sign up page

This page allows users to sign up to your site using their email address. Note that you need to enable sign ups under Membership > Access.

  1. Go to Pages in your Ghost admin
  2. Click Add New
  3. Name your page eg. Sign In
  4. Choose Sign In under the Template menu in the sidebar
  5. Click Publish

Sign in page

This page allows users to sign into your site using their email address and password.

  1. Go to Pages in your Ghost admin
  2. Click Add New
  3. Name your page eg. Sign In
  4. Choose Sign In under the Template menu in the sidebar
  5. Click Publish

Account page

This page allows users to control their account, signup to a membership, or cancel their account

  1. Go to Pages in your Ghost admin
  2. Click Add New
  3. Name your page eg. My Account
  4. Choose Sign In under the Account menu in the sidebar
  5. Click Publish

Subscribe page

This page will display a signup form for users to subscribe to your email newsletter.

  1. Go to Pages in your Ghost admin
  2. Click Add New
  3. Name your page eg. Subscribe
  4. Choose Sign In under the Subscribe menu in the sidebar
  5. Click Publish

Important: Once you’ve added these pages to your site it’s important to link them in the Primary or Secondary navigation.

Custom templates

Imperia has 6 custom templates which let you display various types of content in a unique way

Pages

These page templates are used to display content such as authors, tags and featured posts, each page supports a title, featured image and post content, which will display above the template.

  • Authors – Display a list of your site’s authors in a top-down layout.
  • Tags – Displays a grid of your site’s tags, including the post count and the tag featured image as a tile cover. The tag accent color will also pull through here.
  • Contact – A unique page template which supports third-party embedded forms which you can use as contact forms for your site.
  • Featured – Display a list of your featured posts in a grid layout.
  • Recommendations – A page dedicated to showing your site’s recommendations in a grid format.

Posts

These are post-specific templates which will adjust your post layout independently of the site-wide options.

  • No sidebar – If you have activated any of the sidebar features, this page will simply hide the sidebar entirely for a specific post. This template is useful if you’re using a wide image in your post content.

Navigation

There are two types of Navigation you can add in your site in the admin section under Settings > Navigation. Primary navigation is used in the theme header and the Secondary navigation in the footer.

Imperia has unique features for both the primary and secondary menus – you can read more about each below. For more information visit the official Ghost documentation.

Primary navigation

Your primary navigation is setup to display in your theme’s header, to setup your navigation follow these steps:

  1. Log in to your publication admin section at yoursite.com/ghost/
  2. Go to Settings > Site > Navigation ( eg. yoursite.com/ghost/#/settings/navigation/edit/)
  3. Click on the Primary tab.
  4. Adjust your primary navigation, don’t forget to click Ok when you’re done.

Secondary navigation

  1. Log in to your publication admin section at yoursite.com/ghost/
  2. Go to Settings > Site > Navigation ( eg. yoursite.com/ghost/#/settings/navigation/edit/)
  3. Click on the Secondary tab.

Imperia supports multiple columns in your footer navigation, if you want to split an item out into a column, simply add a hash into the # navigation title, here’s an example of a 4 Column navigation setup:

Announcement bar

Use the default Ghost announcement feature to display an announcement bar at the top of your site:

  1. Log in to your publication admin section at yoursite.com/ghost/
  2. Go to Settings > Site > Announcement bar > Customize ( eg. yoursite.com/ghost/#/settings/announcement-bar/edit/)
  3. Type in your announcement and click save.

Advanced

Some features in Ghost need a little bit of deep diving into configuration files. For these features you’ll need a code editor like Sublime Text or Notepad++.

Pagination

  1. You’ll need to open the theme’s package.json file in your code editor and find the following line posts_per_page, all of our themes have a unique number.
    "config": {
    ...
    "posts_per_page": 9
    ...
    }
  2. To avoid issues just update the number itself, and nothing else.
  3. Save the file.
  4. Zip up your theme folder.
  5. Install your theme again, by following the installation steps.

Localization

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.

  1. In your theme’s ../locales/ folder, you can add your language files, for example Italian would be it.json or French would be fr.json

    A valid language code must be used.
  2. Duplicate the entire en.json file and rename it accordingly (eg. it.json)
  3. Open your file in your code editor.
  4. Adjust the strings, eg.
    {
    "Back": "Indietro",
    "Newer Posts": "Post Più Recenti",
    "Older Posts": "Post Più Vecchi"
    }
  5. Save the file.
  6. Zip up your theme folder.
  7. Install your theme again, by following the installation steps.
  8. Once you’ve done this, go to the General settings in the Ghost Admin.
  9. At the top of the page, click on Publication info.
  10. Under the Publication language settings menu, enter in your language code.
  11. Finally, click Save to activate.