# Welcome # 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. {% hint style="success" %} Supports Ghost version 5**.x** {% endhint %} 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 1. [Default](https://ampersand.stylesheets.dev/) 2. [Header Type 2](https://ampersand-header-b.stylesheets.dev/) 3. [Hero Full-Width Image](https://ampersand-hero-full.stylesheets.dev/) ## 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.** ![Set the accent color in settings](/files/-Me-RefAMfqgo7eP72rb) {% hint style="info" %} 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). {% endhint %} 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 [Theme Development](/ampersand#theme-development) section to learn more about it. ```css :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. After making these changes, follow the [Theme Development](/ampersand#theme-development) section to re-compile the CSS files. ## Comments The theme comes with space left for integrating comments. Here's a short guide on how to integrate [Disqus comments](https://disqus.com/), but the same can be followed for integrating comments from any other service. 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. {% embed url="" %} Activate comments on Ampersand theme {% endembed %} ## Add Social Media Icons Twitter, Facebook, and RSS feed icon are already implemented in the theme. To add more icons follow these steps: 1. Download SVG of the icon from [Simple Icons](https://simpleicons.org/). 2. 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: ```markup ``` 3. Next, edit `partials/social-media-icons.hbs` and add the icon ```markup ``` ## Change Header To use the navigation header shown [here](https://ampersand-header-b.stylesheets.dev/), follow the steps below: 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. {% hint style="warning" %} Don't forget to set the **Page URL** as "home" {% endhint %} {% embed url="" %} Add hero on home page {% endembed %} ### 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". 2. Next follow the steps shown in above [section](#add-default-hero). {% hint style="warning" %} Don't forget to set the **Page URL** as "home". Otherwise, the hero won't display. {% endhint %} ## 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.** {% embed url="" %} Add a membership plans page {% endembed %} ## 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.** {% embed url="" %} Add a posts archive page {% endembed %} ## 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.** {% embed url="" %} Add a tags archive page {% endembed %} ## 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: {% embed url="" %} Modify the subscribe CTAs text message {% endembed %} 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. Create a new file in the theme’s `locales` folder with the language [ISO Code](https://www.w3schools.com/tags/ref_language_codes.asp) code. So, if the new language is Spanish, the new file name will be `es.json`. 2. 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: ```markup Primary ``` Check out the [Style Guide](https://ampersand.stylesheets.dev/styling-guide/#buttons) to see how buttons look. ## 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: ![](/files/-Mg6wtwDXCoqaGF1D-16) ## Theme Development The theme uses [Gulp](https://gulpjs.com/) and [Node.js](https://nodejs.org/en/) 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 [Ghost setup](https://ghost.org/docs/install/local/) ready on your machine, run the following commands from the theme root directory: ```bash # 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/-.zip` . ```bash # To generate production ready theme zip file. # check the /dist folder after completion. npm run build ``` ### LiveReload [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en) chrome plugin watches over the handlebars, CSS, SCSS, and JS files and automatically reloads the browser while developing the theme. 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: {% embed url="" %} Hide portal subscribe button {% endembed %} ## 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: {% embed url="" %} Disable memberships portal and see how Ampersand theme will look like {% endembed %} ## 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. ```markup ``` 2. Zip and upload the theme to Ghost. {% embed url="" %} {% hint style="warning" %} 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). {% endhint %} ## 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: * Use [Git version control](https://git-scm.com/). 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. 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: ```bash # 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: * [Ghost](https://ghost.org/) open-source publishing platform * [Unsplash](https://unsplash.com/) for stock images on demo site * [Google Fonts](https://fonts.google.com/) for fonts * [PrismJs](https://prismjs.com/) for code highlighting * [Simple Icons](https://simpleicons.org/) for social media brand icons * [Feather Icons](https://feathericons.com/) for utility icons * [GhostHunter](https://github.com/jamalneufeld/ghostHunter) for the search feature * [Lightense](https://sparanoid.com/work/lightense-images/) photo zoom library ## Support 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. Thanks so much! # Changelog Changelog for Ampersand Ghost theme. ## v1.1.1 **Release Date**: 14 Aug 2021 **Bug Fixes** * "Table of contents" link appearing at the bottom of TOC section. **Improvements** * Option to add Linkedin share icon in the reading progress bar (To activate it, edit file `partials/progress-bar.hbs` and uncomment the LinkedIn section). **Files Changed** * assets/sass/base/\_variables.scss * assets/sass/modules/\_progress-bar.scss * custom-table-of-contents.hbs * package.json * partials/progress-bar.hbs ## v1.1.0 **Release Date:** 2 Aug 2021 **New Features** * Added a custom template for post with [Table of Contents](https://docs.stylesheets.dev/ampersand#add-table-of-contents) * Reading progress bar **Improvements & Bug Fixes** * Added post reading time on post feed * Added post author, publish date, reading time on post header. * Included Linkedin, Instagram, Github, Dribbble, Youtube & Email icons in theme by default. **Files Added** * assets/sass/layouts/\_custom-toc-post.scss * assets/sass/modules/\_post-byline.scss * assets/sass/modules/\_progress-bar.scss * assets/sass/modules/\_toc.scss * assets/sass/vendor/tocbot.css * custom-table-of-contents.hbs * partials/icons/dribbble.hbs * partials/icons/github.hbs * partials/icons/instagram.hbs * partials/icons/youtube.hbs * partials/progress-bar.hbs **Files Changed** * assets/built/main.css * assets/built/main.css.map * assets/built/main.js * assets/built/main.js.map * assets/js/main.js * assets/sass/base/\_global.scss * assets/sass/base/\_variables.scss * assets/sass/layouts/\_post.scss * assets/sass/main.scss * assets/sass/modules/\_post-card.scss * default.hbs * package.json * partials/post-card.hbs * partials/social-media-icons.hbs * post.hbs # Sapphire Ghost theme ## About Sapphire is a Ghost theme most suitable for building niche publications and personal websites. You can use this theme to show your work, run a blog, build premium memberships for your audience and share what you do. {% hint style="info" %} Supports Ghost version **4.x** {% endhint %} **Demo:**[ sapphire.stylesheets.dev](https://sapphire.stylesheets.dev) ## Theme Installation The first step is to **unzip** the downloaded package. Inside the new directory **sapphire**, you'll find the zipped theme and a documentation file. 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. 5. Once uploaded, click on **Activate now** button to activate the theme immediately or **Close** if you want to activate it later. ## Theme Development The theme uses [Gulp](https://gulpjs.com/) and [Node.js](https://nodejs.org/en/) 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 [Ghost setup](https://ghost.org/docs/install/local/) ready on your machine, run the following commands from the theme root directory: ```bash # 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/-.zip` . ```bash # To generate production ready theme zip file. # check the /dist folder after completion. npm run build ``` ### LiveReload [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en) chrome plugin watches over the handlebars, CSS, SCSS, and JS files and automatically reloads the browser while developing the theme. 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. ## Change Color Scheme & Fonts All the colors and fonts are managed through CSS variables. You can change colors and fonts by editing the `/assets/sass/base/_variables.scss` file. This file contains variables for primary color, text colors, background color, and primary & secondary fonts. ```css :root { /* Colours */ --color-primary: #222222; --color-primary-lighter: color-mod(var(--color-primary) tint(35%)); --color-text: color-mod(var(--color-text-bold) l(30%)); --color-text-secondary: #757575; --color-text-bold: #222; --color-bg: #ffffff; --color-bg-secondary: color-mod(var(--color-bg) shade(4%)); --color-border: #e7e7e7; --color-border-lighter: #f1f1f1; /* Fonts */ --font-primary: 'Work Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', sans-serif; --font-secondary: 'Merriweather', georgia, times, serif; --font-normal: 400; --font-bold: 700; } ``` After making the required changes, you'll have to re-compile the theme. This can be done by running the `npm run build` command. This will generate the zip file. Follow the [Theme Development guide](/sapphire#theme-development) for more details on compiling the theme. ## Search Sapphire has two options in-built for adding search: 1. [Programmable Search Engine](https://programmablesearchengine.google.com/) by Google 2. [ghostHunter](https://github.com/jamalneufeld/ghostHunter) search You can explore other options as well from [Ghost documentation](https://ghost.org/docs/search/). Follow these steps to activate search: **Step 1: Enable the search icon** Edit `partials/header.hbs` file and un-comment the search icon as shown in the screenshots: ![Un-comment the search icon](/files/-McDOnQf-qCGkdJ4m0k6) ![Step 1: final result](/files/-McDOw-RQC4jdzGisZyz) This was the common step. Based on which search service you want to use, you can follow the steps below. ### Google Programmable Search Engine This is the easiest and free option available for adding search to Ghost blogs. Steps: 1. Create an account on [Google Programmable Search Engine](https://programmablesearchengine.google.com/about/). 2. Create a new search engine and copy the embeddable code. 3. Edit the `partials/search.hbs` file and paste the code in the space provided for it. ![Paste your GPSE embed code as shown in screenshot](/files/-McDR5rGsDu91tnwevib) ![Final](/files/-McDQQc3NFSzdrvxMUSg) 4\. Next, In the GPSE settings set the layout to full width ![](/files/-McDRU5sSfBkhsk7rVMc) That's it. You can now check the search on your Ghost blog. By default, Google will show ads on top of the search results for free accounts. You can disable that by adding a [paid API key](https://developers.google.com/custom-search/docs/paid_element#api_key). ### GhostHunter [GhostHunter](https://github.com/jamalneufeld/ghostHunter) is a Lunr.js based search engine. It is completely free and open-source. {% hint style="info" %} This option is useful for small sites that need basic site search functionality. {% endhint %} Steps to add ghostHunter: 1. Edit `default.hbs` and un-comment the ghostHunter section at the bottom. ![](/files/-McDV6bc6eOSS-bFuefL) ![Final](/files/-McDVB7sEORB-Uh77Bs-) 2\. Edit `partials/search.hbs` and un-comment the ghostHunter section. ![](/files/-McDVgg0g1sFOGnSpghQ) 3\. Create a new integration on your Ghost admin panel, and copy the content API key displayed. ![](/files/-McDW6jjVs2eSw3JXKrl) 4\. Visit **Code Injection** on your Ghost admin panel, and paste the following snippet in the **Page Header** section. Update the ghosthunter\_key variable with the content API key obtained in last step. ```markup ``` ![](/files/-McDX71Zl7X8d7J31VH_) Done. You should see a functional search on your site. ## Make Dark Mode as Default Sapphire theme comes with three color modes – "Light", "Dark", "Warm", which users can change by clicking the color modes icon on the bottom left-hand side. 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` or `color-scheme--warm` to the HTML tag as shown below. ```markup ``` 2. Edit `assets/js/main.js` and change the `colorSchemes` array according to the sequence of color schemes that users will see. ```css /* Dark Mode */ const colorSchemes = ['dark', 'light', 'warm'] ``` 3\. Recompile the theme (Follow theme development steps for recompiling) ## Comments The theme supports comments from services like [Disqus](https://disqus.com/), [Commento](https://commento.io/), etc. Look for the following space in the `post.hbs` file: ``` {{!--
If you want to embed comments, this is a good place to do it!
--}} ``` ### Disqus Create a Disqus account and retrieve embed code for your site. Paste the embed code inside the space left for it as shown below. ```markup
``` ## Add Social Media Icons Twitter, Facebook, and RSS feed icon are already implemented in the theme. To add more icons follow these steps: 1. Download SVG of the icon from [Simple Icons](https://simpleicons.org/). 2. 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: ``` ``` 3. Next, edit `partials/social-media-icons.hbs` and add the icon ```markup ``` ## 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. Create a new file in the theme’s `locales` folder with the language [ISO Code](https://www.w3schools.com/tags/ref_language_codes.asp) code. So, if the new language is Spanish, the new file name will be `es.json`. 2. 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). ## Add Custom Bio Section in Sidebar To add the custom bio section in the header, follow these steps: ![Custom bio section in header](/files/-MYo4CiyTjrh_LV-CcaI) 1. Edit `partials/header.hbs` file and uncomment the `{{!-- {{> "header-bio"}} --}}` line as shown in screenshot: ![Step 1](/files/-MaX4omz4ozmlYoSWMD4) ![Step 1: final](/files/-MaX524GfZl50aM6RSUi) 2\. edit `partials/header-bio.hbs` and change the slug author's slug as shown in screenshots: ![Step 2](/files/-MaX5NLH_y1V3PxNFt0P) ![Step 2: final](/files/-MaX5Sba-rfe8sbOJAUF) 3\. Zip the theme folder, and upload it to your Ghost installation. {% hint style="warning" %} **Make sure you have at least one post by this author.** Ghost sends 404 when there are no posts by the author. **The bio section won't display anything if the author has no published posts**. {% endhint %} ## 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: ```markup Primary ``` Check out the [Style Guide](https://sapphire.stylesheets.dev/styling-guide/#buttons) to see how buttons look. ## Customize Logo Dimensions If you're using a logo on your Ghost blog, then you can follow these steps to customize the height of the logo. By default, we have set the height of the logo to *55 pixels (and 45px for mobile)*, which works well for most logos, but you might want to customize this setting depending upon your logo. 1. First, make sure there is no empty padding around your logo's image file. If there is padding around your logo, then you can crop that using any of the image editors. 2. Next, on your Ghost dashboard go to **Settings** > **Code Injection**, and paste the following snippet of CSS code in the **Site Header** section. ```markup ``` 3\. Edit the values of max-height property according to your needs. You can change these values and experiment with them to see what works for you. Note: You can make this change directly in CSS files as well, but this is easier because you won't have to make these changes again when any new update is released on the theme. ## Remove Footer Attribution Text To remove the "Published with Ghost & Sapphire" text from the footer, you can edit `partials/footer.hbs` file and delete the lines (12-14) containing this text. ## Add a Tags List Page To add a tags list view follow these steps: 1. Create a new page. You can set the title to anything you want. We'll call it Topics. 2. Next, select the template to "Tags" and save the page. ![Create a page, and set the template to Tags](/files/-McDFJXsBAjH_xL0DzQt) Done. You can now visit this page to see all your tags rendered in descending order of the number of posts associated with them. ![Tags archive view](/files/-McDFn16UDr1ka_BysGS) ## Add a Posts Archive View To add a posts archive view, follow these steps: 1. Create a page. You can set the title to anything you want. 2. Next, from the settings menu, set the template to "Posts Archive" and save the page. ![Create a page, and set the template to Posts Archive](/files/-McDGpFIdA6gQvUeoZzE) That's it. You can now visit that page to view your posts archive. Pro Tip: You can add the Featured Image and Excerpt as well to show them on this view. ![Post Archive Page](/files/-McDHEHKbc0ctfglOvpy) ## 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: * Use Git version control. You can create two branches. One will have your customized theme and one will have the original theme. When an update is released, you can commit the update to the original branch. Then you would switch over to your customization branch and rebase it with the original branch. * Another choice is to manually apply the updates to files changed from the [Changelog](/sapphire/changelog). * Another good practice is to keep third-party scripts like Google Analytics in code injection. ## Sources and Credits Thanks to the following services and libraries used in building this theme: * [Unsplash](https://unsplash.com/) for stock images on demo site. * [Google Fonts](https://fonts.google.com/) for fonts. * [PrismJs](https://prismjs.com/) for code highlighting. * [Simple Icons](https://simpleicons.org/) for social media brand icons. * [Feather Icons](https://feathericons.com/) for utility icons. ## Support 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. Thanks so much! # Changelog Changelog of Sapphire theme ## v1.1.1 **Release Date:** 15 June 2021 **New Features** * Photo zoom on images and galleries (using [Lightense](https://sparanoid.com/work/lightense-images/)) * Search integration. Added two options: * [Programmable Search Engine by Google](https://programmablesearchengine.google.com/about/) * [GhostHunter](https://github.com/jamalneufeld/ghostHunter) * Tags list view * Posts archive view **Improvements & Bug Fixes** * Added lazy loading attribute on post feed images. * Bug fix: Footer copyright notice layout broke when no secondary navigation was present. * Typography fixes for bold text and code blocks **Files Added** * assets/built/jquery.ghosthunter.js * assets/built/jquery.ghosthunter.js.map * assets/built/lightense.min.js * assets/built/lightense.min.js.map * assets/js/jquery.ghosthunter.js * assets/js/lightense.min.js * assets/sass/layouts/\_posts-archive.scss * assets/sass/layouts/\_tags-archive.scss * assets/sass/modules/\_search.scss * custom-posts-archive.hbs * custom-tags.hbs * partials/search.hbs **Files Changed** * assets/built/main.css * assets/built/main.css.map * assets/built/main.js * assets/built/main.js.map * assets/js/main.js * assets/sass/base/\_global.scss * assets/sass/base/\_variables.scss * assets/sass/layouts/\_header.scss * assets/sass/layouts/\_post.scss * assets/sass/main.scss * assets/sass/modules/\_code.scss * assets/sass/modules/\_hamburger.scss * default.hbs * package.json * partials/footer.hbs * partials/header.hbs * partials/post-card.hbs * post.hbs ## v1.0.1 **Release Date:** 15 May 2021 **Updates** * Updated attribution text ("Published with Ghost & Sapphire") in the footer. **Files Changed** * partials/footer.hbs * assets/sass/layouts/\_footer.scss ## v1.0.0 #### Release Date 1 May 2021 #### **Updates** * Initial release # Chronicles Ghost theme ## About Supports Ghost version `3.x, 4.x`. ## Theme Installation * Log in to the Ghost dashboard of your blog by visiting `yourblog.com/ghost`. * Go to **Design** in the sidebar, and upload your theme there. * Once uploaded. Click on **Activate now** button to activate the theme immediately or **Close** if you want to activate it later. ## Theme Development The theme uses Gulp and Node.js for development purposes. You'll need Node.js `v10.15.0` installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of node on your machine.) Once you have node installed, run the following commands from the theme root directory. ```bash # 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/src/` , which will be 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/.zip` . ```bash # To generate production ready theme zip file. # check the /dist folder after completion. npm run build ``` ## Activate Search Chronicles uses search service from [**SiteSearch360**](https://sitesearch360.com)**,** which is a [recommended service by Ghost](https://ghost.org/tutorials/adding-search-to-a-ghost-theme/). To active it, follow these steps: 1. Signup at [SiteSearch360](https://www.sitesearch360.com/), and add your blog. 2. Open the `default.hbs` file present in theme. 1. Look for the following code snippet at the end of the file: ``` {{!-- Remove this comment to activate search Remove this comment to activate search --}} ``` 2. Remove the comments (i.e. line 1 and 14 shown above.) 3. Add your **Site Id**. 4. Save the file. 3. Go to `partials/header.hbs` file and make the following changes: 1. Look for the following line: ``` {{!-- {{> "search"}} --}} ``` 2. Remove the comments by deleting the `{{!--` and `--}}`. 3. Save the file. 4. Go to `partials/floating-header.hbs` file and make the following changes: 1. Look for the following line: ``` {{!-- {{> "search"}} --}} ``` 2. Remove the comments by deleting the `{{!--` and `--}}`. 3. Save the file. 5. Done! Zip the theme folder and upload it to your site. ## Editor's Pick Section To add a post in the editors pick section, you need to add the internal tag `#editors-pick` to the post. **Note**: Editors Pick section will remain invisible if it has no posts. ## Activate Disqus Comments 1. Open up the `post.hbs` file in any text editor. 2. Look for the comments section. 3. Add the following code snippet in the comments section. ```markup
``` 4. Don't forget to modify the `s.src = 'https://.disqus.com/embed.js';` to your disqus url. 5. Done! Zip the theme folder and upload it your site. ## Add Social Media Icons Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files. **In Footer.hbs** ```markup {{> "icons/dribbble"}} ``` **In Author.hbs** ```markup {{> "icons/dribbble"}} Dribbble ``` Icons for **Behance**, **Dribbble**, **500px**, **Github**, **Gmail**, **Instagram**, **Linkedin**, **Medium**, **Pinterest**, **Reddit**, **RSS**, **Tumblr**, & **Youtube** are included in the theme. If you require more icons, you may visit [Simple Icons](https://simpleicons.org/) and download the required icons. ## Links [Demo](http://chronicles.arban.co) / [Purchase](https://gum.co/chronicles) # Sublime Ghost theme ## About Supports Ghost version `4.x` ## Theme Installation * Log in to the Ghost dashboard of your blog. * Go to **Design** in the sidebar, and upload your theme there. * Once uploaded. Click on **Activate now** button to activate the theme immediately or **Close** if you want to activate it later. ## Development The theme uses Gulp and Node.js for development purposes. You'll need Node.js v10 installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of Nodejs on your machine.) ```bash $ npm install $ npm run dev ``` Now you can edit SCSS and js files in `/assets/src/` , which will be compiled to `/assets/built/` automatically. The `build` Gulp task minifies all the css and js files and packages the theme files into `dist/.zip`, which you can then upload to your site. ```bash $ npm run build ``` ## How to Activate Disqus Comments 1. Open up the `post.hbs` file in any text editor. 2. Look for the comments section. 3. Add the following code snippet in the comments section. ```markup
``` 4. Don't forget to modify the `s.src = 'https://.disqus.com/embed.js';` to your disqus url. ## Social Media Icons Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files. ### In Footer.hbs ``` {{> "icons/instagram"}} ``` ### In Author.hbs ``` {{> "icons/instagram"}} Dribbble ``` Icons for Behance, Dribbble, 500px, Github, Gmail, Instagram, Linkedin, Medium, Pinterest, Reddit, RSS, Tumblr, & Youtube are included in the theme. If you require more icons, you may visit Simple Icons and download the required icons. ## Links [Demo](https://sublime.stylesheets.dev) / [Purchase](https://gumroad.com/l/sublime) # Shuttle Ghost theme ## About [Demo](https://shuttle.stylesheets.dev) {% hint style="info" %} Supports Ghost version `4.x` {% endhint %} ## Theme Installation Follow these steps to install your theme on 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. 5. Once uploaded, click on **Activate now** button to activate the theme immediately or **Close** if you want to activate it later. ## Theme Development The theme uses Gulp and Node.js for development purposes. You'll need Node.js `v12` or `v14` installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of nodejs on your machine.) Once you have nodejs installed, run the following commands from the theme root directory. ```bash # 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/src/` , which will be 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/.zip` . ```bash # To generate production ready theme zip file. # check the /dist folder after completion. npm run build ``` ## Memberships Shuttle theme has full support for members feature of Ghost. To enable a custom subscription plans page similar to the one created [here](https://shuttle.stylesheets.dev/membership/), open up your Ghost dashboard and upload the custom `routes.yaml` file present in the theme folder. Once the file is uploaded you can visit `/membership/` to see the page. ## Search To activate the search follow these steps: #### Step 1: Edit default.hbs file Open up the `default.hbs` file in theme. 1. Look for the following code snippet at the end of the file: ```javascript let siteSearch = new GhostSearch({ key: '2225101d563aedec7edd20f7ce', // This is just a demo key. Replace the key with a real one. See Step 3. host: 'https://shuttle.stylesheets.dev', // This is just a demo host. Replace the host with a real one. See Step 3. input: searchInputField, results: resultsContainer }); ``` 2. Update the values in `key` and `host`. To get the key and host values, you need to create a custom integration in Ghost. Once you create it, you'd get the Content API Key, and API URL. ![Step 1](/files/-Mb1BnRf2_VU8vgRmepn) ![Step 1: Final result ](/files/-Mb1C8514BItEMOVQCp7) #### Step 2: Edit header.hbs file Open up the `partials/header.hbs` file and uncomment the following lines of code ```markup {{!-- Search: Mobile --}} {{!-- --}} ``` ```markup {{!-- Search: Desktop --}} {{!--
--}} ``` ![Step 2](/files/-Mb1CR2iSvaRdpWTUGEh) ![Step 2: Final result](/files/-Mb1CWLdooxUVWqT-76_) That's it. You can now zip the theme folder and upload it to your site. ## Editor's Pick Section The featured posts will be shown in the editor's pick section. **Note**: Editors' Pick section will remain invisible if you have no featured posts. ## Disqus Comments To enable disqus comments on the theme, follow these steps: 1. Open up the `post.hbs` file in any text editor. 2. Look for the comments section. 3. Add the following code snippet in the comments section. ```markup

Comments

``` 4. Don't forget to modify the `s.src = 'https://.disqus.com/embed.js';` to your disqus url. ## Add Social Media Icons Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files. **In Footer.hbs** ```markup {{> "icons/dribbble"}} ``` **In Author.hbs** ```markup {{> "icons/dribbble"}} Dribbble ``` Icons for **Behance**, **Dribbble**, **500px**, **Github**, **Gmail**, **Instagram**, **Linkedin**, **Medium**, **Pinterest**, **Reddit**, **RSS**, **Tumblr**, & **Youtube** are included in the theme. If you require more icons, you may visit [Simple Icons](https://simpleicons.org/) and download the required icons. ## Links [Demo](https://shuttle.stylesheets.dev/) / [Purchase](https://gumroad.com/l/shuttle-theme) # Changelog ## v2.0.0 **Release Date:** 31 May 2021 **Updates** * Updated theme for Ghost 4.x * Gulp development workflow upgraded to Node v12, v14 * Featured posts will be shown in Editor's pick section. The internal tag `#editors-pick` is deprecated. * Bugfix: featured post-card in editor's pick with no image looked broken. * Accessibility improvements * Search library upgraded for Ghost 4 **Files Changed** * .prettierrc * assets/built/css/main.css * assets/built/css/main.css.map * assets/built/css/normalize.css * assets/built/css/normalize.css.map * assets/built/js/main.js * assets/src/styles/main.scss * assets/src/styles/partials/\_editors-pick.scss * assets/src/styles/partials/\_post-view\.scss * default.hbs * gulpfile.js * home.hbs * index.hbs * members/membership.hbs * package-lock.json * package.json * partials/editors-pick.hbs * partials/email-long.hbs * partials/header.hbs * partials/post-card-large.hbs * partials/post-card-tiny.hbs #### Files Added * .prettierignore # Flamingo Ghost Theme {% hint style="info" %} Compatible with Ghost 4.x {% endhint %} ## Development The theme uses Gulp and NodeJs (Node v12 or v14) for development purposes. You'll need Gulp and Nodejs installed globally. After that from the theme's root directory run the following commands. ```bash $ npm install $ npm run dev ``` Now you can edit the SCSS and JS files in `/assets/src/` , which will be compiled to `/assets/built/` automatically. The `build` Gulp task minifies all the CSS & JS files and packages the theme into `dist/.zip`, which you can then upload to your site. ```bash $ npm run build ``` ## Customizations To change the **colors** or **fonts** in the theme, you can modify the `/assets/src/styles/partials/_variables.scss` file. After modifications, complile the SASS files again by following command – ```bash $ npm run build ``` This will generate the zipped theme file in `/dist` directory. ## How to Activate Disqus Comments 1. Open up the `post.hbs` file in any text editor. 2. Look for the comments section. 3. Add the following code snippet in the comments section. ```markup
``` 4. Don't forget to modify the `s.src = 'https://.disqus.com/embed.js';` to your disqus url. ## Feature a Post on the Tag View To make a post to be featured on tag view's header, add the following hidden tag to the post – **#tag-featured-post**. ## Social Media Icons Icons for Facebook, Twitter, Behance, Dribbble, 500px, Github, Gmail, Instagram, Linkedin, Medium, Pinterest, Reddit, RSS, Tumblr, & Youtube are included in the theme. Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files. **In Footer.hbs** ```markup {{> "icons/dribbble"}} ``` **In Author.hbs** ```markup {{> "icons/dribbble"}} Dribbble ``` If you require more icons, you may visit [Simple Icons](https://simpleicons.org/) and download the required icons. # Changelog ## v4.0.0 **Release Date:** 29 May 2021 **Updates** * Migrated theme to Ghost 4.x * Improved typography * Ghost secondary navigation will be rendered in the footer * Improved Gulp development workflow **Files Changed** * assets/built/css/main.css * assets/built/css/main.css.map * assets/built/js/main.js * assets/src/styles/partials/\_post-card.scss * assets/src/styles/partials/\_post-view\.scss * default.hbs (changes on line 2 only) * gulpfile.js * package.json * partials/email-subscribe.hbs (changes on line 1 and 26 only) * partials/footer.hbs #### Files Added * .editorconfig * .gitignore * .prettierignore * .prettierrc ## # Contact 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. Thanks so much! Arpit Bansal\ Creator, [Stylesheets.dev](https://stylesheets.dev)