Choi documentation

Thank you for using the Choi 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.

Choi 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

Theme style
Set the color scheme of your site

  • Dusty Orange (default)
  • Whale Blue
  • Apple Green
  • Plum Purple
  • Slate Grey
  • Sea Blue

Header color
The header background will take on the color of your site accent color, and the text will take on the accent text color.

The default color for the header is #CE5C25

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

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

Footer Text – The custom text that will show up in your footer, under your site title

Footer Copyright – This will show up in your footer below the footer, in the bottom left

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.
  • Buttons – Display only your Hero title text with two calls to actions, which you can define below.
  • 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 show your cover image in the hompage banner, as seen on the demo.

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.

Quote – Allows you to add a quote text widget

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)

Membership 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

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

Choi has 4 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.

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.

Choi 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.

All of our themes support sub-navigations with drop downs, to activate the dropdowns you can just add a dash - before the sub-navigation labels, here’s an example of the Misty demo:

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.

Choi 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.