Ampersand
A Ghost CMS Blogging Theme.
About
Ampersand is a multipurpose Ghost blogging theme. You can use it to build blogs, online membership-based publications, and a lot more.
Supports Ghost version 5.x
It is fully customizable and comes with two different navigation layouts and hero types.
Two header navigations styles
Two homepage hero styles
Fully customizable typography and color palette. The color scheme is fully customizable directly from your Ghost dashboard with no coding required at all.
Extra features:
Membership plans page
Posts archive page
Tags archive page
Search integrations available for:
Google programmable search engine
GhostHunter.js
Prismjs code highlighting
Photo zoom
Comments
Light & dark modes
Demos
Theme Installation
Follow these steps to upload the theme to Ghost:
Login to your ghost admin dashboard (example.com/ghost).
Click the settings icon at the bottom of the left-hand side.
Go to Themes and click Upload a theme.
Select the theme file (the theme file will look something like this -
ampersand-x.x.x
)Once uploaded, click on Activate now button to activate the theme immediately or Close if you want to activate it later.
Change Color Scheme & Fonts
Color Scheme
Changing the color scheme on the Ampersand theme is easy and can be done directly from the Ghost settings page:
Log in to your Ghost admin panel, and click on the Settings icon at the bottom right site
Go to Branding settings and set the Accent color.
Fonts
The theme has two types of fonts:
Primary font: which is used on paragraphs and links
Secondary font: which is used on headings.
To modify these fonts, first, you need to load the appropriate fonts in the theme. We are using Google Fonts to load the fonts in default.hbs
file head section.
Next, update the assets/sass/base/_variables.scss
file and update the --font-primary
and --font-secondary
variables.
Comments
Steps:
Edit
post.hbs
file and un-comment the{{> "post-widget-comments"}}
line.Paste the comment embed script in the space provided for it in
partials/post-widget-comments.hbs
file.If you're using Disqus, then you can display the comment count as well by including the Disqus counts' script at the end.
Add Social Media Icons
Twitter, Facebook, and RSS feed icon are already implemented in the theme. To add more icons follow these steps:
In
partials/icons/
paste SVG file and change its extension to .hbs (instead of .svg)For example, you created a file called
partials/icons/pinterest.hbs
, It should look like this:Next, edit
partials/social-media-icons.hbs
and add the icon
Change Header
Go to design settings (at /ghost/#/settings/design) on your Ghost admin panel, and set the Navigation style to "Classic".
Change Hero Layout
The theme comes with three different Hero types:
Default
With image
Without image
Full-width image
Add Default Hero
To add the default hero:
Go to your Ghost admin panel, and create a new page
The title of the page will be used as the Hero title
Add content on the page. This content will be shown in the hero description. Here you can use links, bold, italics, etc.
Set the Page URL to "home"
Add the feature image or leave it empty if you don't need image on hero.
Publish the page and you'd see the hero added to your home page.
Don't forget to set the Page URL as "home"
Add Full-Width Image Hero
To add a full-width image hero, follow these steps:
Go to design settings (at /ghost/#/settings/design) on your Ghost admin panel, and set the Hero layout to "Full Width".
Don't forget to set the Page URL as "home". Otherwise, the hero won't display.
Membership Plans Page
To add a membership plans page, create a new page. Set the title as "Membership" or anything else of your choice. From the settings menu, set the Template to Membership plans.
Posts Archive Page
To add a posts archive page, create a new page. Set the title to anything of your choice. From the settings menu, set the Template to Posts archive.
Tags List Page
To add a tags list page, create a new page. Set the title to "Tags" or anything of your choice. From the settings menu, set the Template to Tags.
Customize Subscribe CTAs
The theme comes with Subscription call-to-action widgets on the homepage sidebar and at the end of the post view as well.
By default, the CTA will read "Join the newsletter to receive the latest updates in your inbox" and show an email input field.
But you can change this to show subscription plans and subscribe/learn more buttons, to read something like "Become a member for $5/month or $50/year and get unlimited access to the great stories you won’t find anywhere else."
You can customize this by following this video tutorial:
These subscribe CTAs with membership plans will automatically pull the plan amounts from Ghost settings. The subscription message to the user based on if they are a paid subscriber/un-paid subscriber/not-subscribed will change.
Language Translations
The theme is translation-ready and includes translation files for English (en) and German (de). To add a translation for any other language, create the translation file in locales/
directory.
To add a new language, follow these steps:
Copy the
en.json
file content into your new file and start to translate each line. The key is plain English that exists in all translation files and should not be changed. You should change only the value.
To set the language in Ghost, Go to Admin > General > PUBLICATION INFO > Publication Language and enter the language code (es
in this example).
Adding Buttons in Post Content
You can add buttons to your blog post content. There are two styles available –
Primary Button: Class name
.button--primary
Secondary Button: Class name
.button--secondary
To add a button, click the "+" icon next to the line in Ghost editor and select HTML. Then add anchor tags with the class of the button you want to use. For example, to add a primary button you would paste the following HTML:
Add Table of Contents
To show a table of contents on a post, simply set the template to "Table of contents" from settings menu. See the screenshot below:
Theme Development
Now you can edit the SCSS and JS files in /assets/sass/
& /assets/js/
directories. These will get compiled to /assets/built/
automatically.
To generate a production-ready theme zip file, run the following command. It will minify all the CSS & JS files and package the theme into dist/<theme-name>-<version>.zip
.
LiveReload
The configuration for LiveReload has already been done in the theme Gulpfile. You can install this chrome plugin and activate it to make your development easier.
Modify Footer Copyright Text
You can modify the footer copyright & attribution text by modifying the partials/footer.hbs
file at lines 25 & 28.
Hide Portal Subscribe Button
The theme already has a subscribe button in header navigation, so you might want to hide the default portal button (at bottom right corner). Follow the following tutorial to hide it:
Disable Memberships Portal on Ghost
In the video below, see how you can disable the memberships portal and how Ampersand theme will look like in that case:
Make Dark Mode as Default
Ampersand theme comes with two color modes – "Light" & "Dark", which users can change by clicking the color modes toggle switch in footer.
Light mode is the default for the theme, but you can change the defaults by making the following changes:
Edit
default.hbs
and add classcolor-scheme--dark
to the HTML tag as shown below.Zip and upload the theme to Ghost.
To test this change, open the site in incognito mode because theme stores the users' preference of color mode in browser's local storage which might already be stored for you (due to which you may not see the change on your browser).
Keeping Your Theme Updated
Keeping your theme updated with its latest releases can be a little challenging if you have lots of customizations. We would recommend the following ways:
For example, you create two branches –
original
: This will have the original thememaster
: This will have your customized themeWhen an update on theme is released, you would copy updated theme and comit it to the
original
branch.Next, checkout to the
master
branch and rebase as shown:
Another choice is to manually apply the updates to files changed from the Changelog.
One good practice is to keep third-party scripts like Google Analytics in code injection.
Sources and Credits
Sincere thanks to the following services and libraries used in building this theme:
Support
Thanks so much!
Last updated
Was this helpful?