Stylesheets.dev
  • Welcome
  • Ghost Themes
  • Ampersand
    • Changelog
  • Sapphire
    • Changelog
  • Chronicles
  • Sublime
  • Shuttle
    • Changelog
  • Flamingo
    • Changelog
  • Feedback & Support
    • Contact
Powered by GitBook
On this page
  • About
  • Demos
  • Theme Installation
  • Change Color Scheme & Fonts
  • Color Scheme
  • Fonts
  • Comments
  • Add Social Media Icons
  • Change Header
  • Change Hero Layout
  • Add Default Hero
  • Add Full-Width Image Hero
  • Membership Plans Page
  • Posts Archive Page
  • Tags List Page
  • Customize Subscribe CTAs
  • Language Translations
  • Adding Buttons in Post Content
  • Add Table of Contents
  • Theme Development
  • LiveReload
  • Modify Footer Copyright Text
  • Hide Portal Subscribe Button
  • Disable Memberships Portal on Ghost
  • Make Dark Mode as Default
  • Keeping Your Theme Updated
  • Sources and Credits
  • Support

Was this helpful?

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:

  1. Login to your ghost admin dashboard (example.com/ghost).

  2. Click the settings icon at the bottom of the left-hand side.

  3. Go to Themes and click Upload a theme.

  4. Select the theme file (the theme file will look something like this - ampersand-x.x.x)

  5. 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:

  1. Log in to your Ghost admin panel, and click on the Settings icon at the bottom right site

  2. Go to Branding settings and set the Accent color.

The theme will automatically set the appropriate lighter shades of the accent color (which are used on the hero background, and on other widgets in the sidebar as well).

:root {
    /* Colors */
    --color-primary: var(--ghost-accent-color);

    --color-text-bold: #222;
    --color-text: #323030;
    --color-text-lighter: hsl(0deg 0% 44%);
    --color-text-lightest: hsl(0deg 0% 58%);

    --color-bg: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f0f0f0;

    --color-border: #e5e5e5;
    --color-border-darker: #d0d0d0;

    --color-error: hsl(4deg 90% 58%);

    /* General Colors */
    --white: #fff;
    --white-secondary: #eaeaea;
    --light-grey: hsl(0deg 0% 96%);
    --grey: hsl(0deg 0% 90%);
    --black: hsl(0deg 0% 0%);

    /* Fonts */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol';
    --font-secondary: 'Merriweather', georgia, times, serif; // For headings & links

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 600;
    --weight-headings: 700;

    /* Radius */
    --radius-normal: 0px;
    --radius-medium: 4px;
    --radius-large: 8px;
}

Fonts

The theme has two types of fonts:

  1. Primary font: which is used on paragraphs and links

  2. 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:

  1. Edit post.hbs file and un-comment the {{> "post-widget-comments"}} line.

  2. Paste the comment embed script in the space provided for it in partials/post-widget-comments.hbs file.

  3. 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:

  1. 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:

     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>
  2. Next, edit partials/social-media-icons.hbs and add the icon

      <ul class="social-media-icons">
         ...other icons
    
         <li>
            <a href="https://pinterest.com/" title="Pinterest" target="_blank" rel="noopener">{{> "icons/pinterest"}}</a>
        </li>
     </ul>

Change Header

  1. 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:

  1. Default

    1. With image

    2. Without image

  2. Full-width image

Add Default Hero

To add the default hero:

  1. Go to your Ghost admin panel, and create a new page

  2. The title of the page will be used as the Hero title

  3. Add content on the page. This content will be shown in the hero description. Here you can use links, bold, italics, etc.

  4. Set the Page URL to "home"

  5. Add the feature image or leave it empty if you don't need image on hero.

  6. 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:

  1. 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:

  1. 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 –

  1. Primary Button: Class name .button--primary

  2. 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:

<a href="http://example.com" class="button--primary">Primary</a>

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

# To install node modules
npm install
# To compile and watch for changes in SCSS and JS files
npm run dev

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 .

# To generate production ready theme zip file.
# check the /dist folder after completion.
npm run build

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:

  1. Edit default.hbs and add class color-scheme--dark to the HTML tag as shown below.

     <html lang="{{@site.locale}}" class="color-scheme--dark">
  2. 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 –

    1. original : This will have the original theme

    2. master : This will have your customized theme

      When 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:

      # Switch to the original branch
      $ git checkout original
      
      # Copy, paste the updated theme in original branch
      $ git add .
      $ git commit -m "Theme updated to v1.1.0"
      
      # Switch over to master branch 
      $ git checkout master
      
      # Rebase the master with original. 
      # This will apply the customization commits on top of commits from original branch
      $ git rebase original
  • 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!

PreviousWelcomeNextChangelog

Last updated 2 years ago

Was this helpful?

If you want more control over the color scheme, you can modify the assets/sass/base/_variables.scss file. It contains all the CSS variables as shown below. After making changes in SCSS files, you'll have to compile the theme. Look into the section to learn more about it.

After making these changes, follow the section to re-compile the CSS files.

The theme comes with space left for integrating comments. Here's a short guide on how to integrate , but the same can be followed for integrating comments from any other service.

Download SVG of the icon from .

To use the navigation header shown , follow the steps below:

Next follow the steps shown in above .

Create a new file in the theme’s locales folder with the language code. So, if the new language is Spanish, the new file name will be es.json.

Check out the to see how buttons look.

The theme uses and for development purposes. You'll need Node.js v12.x.x or v14.x.x installed on your machine. (If you're on a different version of Node, we recommend using NVM to manage multiple versions of Nodejs and set the correct one for developing this theme).

Once you have Node.js and ready on your machine, run the following commands from the theme root directory:

chrome plugin watches over the handlebars, CSS, SCSS, and JS files and automatically reloads the browser while developing the theme.

Use . You can create two branches. One will have your customized theme and one will have the original theme. When an update is released, you will commit the update to the original branch. Then you would switch over to your customization branch and rebase it with the original branch.

open-source publishing platform

for stock images on demo site

for fonts

for code highlighting

for social media brand icons

for utility icons

for the search feature

photo zoom library

Thank you for using our themes. If you have any questions that are beyond the scope of this documentation, please feel free to email us at . We'll do our best to assist you.

Default
Header Type 2
Hero Full-Width Image
Disqus comments
Simple Icons
here
ISO Code
Style Guide
Gulp
Node.js
Ghost setup
LiveReload
Git version control
Ghost
Unsplash
Google Fonts
PrismJs
Simple Icons
Feather Icons
GhostHunter
Lightense
support@stylesheets.dev
Theme Development
Theme Development
section
Add hero on home page
Add a membership plans page
Activate comments on Ampersand theme
Set the accent color in settings
Add a posts archive page
Add a tags archive page
Modify the subscribe CTAs text message
Hide portal subscribe button
Disable memberships portal and see how Ampersand theme will look like