Auden Documentation

Install the theme

Follow the steps below to upload the theme:

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Design ( yoursite.com/ghost/#/settings/design/ )
3. Click Change theme ( yoursite.com/ghost/#/settings/design/change-theme )
4. Click Upload theme and select the auden.zip file.
5. After the upload is complete, under Installed themes click Activate

Routes setup

Follow the steps below to upload the routes.yaml file (this is a separate step from theme upload)

1. Log in to your publication admin section at yoursite.com/ghost/
2. Go to Settings > Labs ( yoursite.com/ghost/#/settings/labs )
3. Under Beta features click on Upload routes file button and select the file from the root directory of the theme.

Custom settings

The theme comes with custom design settings, which are accessible from the Ghost Admin panel. To view and edit these settings go to Settings > Design & Branding ( yoursite.com/ghost/#/settings/design/)

Custom settings are defined in the package.json file. These settings are placed under three categories:

1. Site-wide settings
2. Homepage settings
3. Post settings

Here's a preview of the available settings:

Fonts

Auden comes with Google Fonts integrated, using the following fonts:

• Poppins
• Open Sans
• Playfair display

In order to change the fonts you have to change the default.hbs file.

<link
  rel='preload'
  href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap'
  as='font'
  onload="this.onload=null;this.rel='stylesheet'"
/>
<link
  rel='preload'
  href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap'
  as='font'
  onload="this.onload=null;this.rel='stylesheet'"
/>
<link
  rel='preload'
  href='https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'
  as='font'
  onload="this.onload=null;this.rel='stylesheet'"
/>

{{! No Js }}
<noscript>
  <link
    rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap'
  />
  <link
    rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap'
  />
  <link
    rel='stylesheet'
    href='https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap'
  />
</noscript>

Go to Google Fonts and choose the font and styles you would like. Then click Embed and copy the link provided and replace the current one in default.hbs.

Then open settings.css file located in assets/css/settings folder. Replace the font setting with your new font:

body {
  --font-family-serif: 'Playfair Display', Times, Georgia, serif;
  --font-family-sans-serif: 'Poppins', Tahoma, Arial, sans-serif;
  --font-family-secondary: 'Open Sans', Tahoma, Arial, sans-serif;
}

Build the assets (check theme development) and everything sould be ready.

Ceck out this tutorial for a more detailed guide about Google Fonts with Ghost.

Post Templates

Auden comes with 3 different post templates:

• post.hbs default (with sidebar)
• custom-no-sidebar.hbs with no sidebar
• custom-with-table-of-contents with table of contents

When a new post is created, automatically the default post template is assigned. You can change it by going to Post Settings, and under the Template section select the template you would like for the post.

Custom Pages

Auden comes with several custom pages by default:

• Contact Page
• Tags Page
• Authors Page
• Membership
• Archive

To add the page to the navigation, please check the Navigation section above.

Contact Page

To create the Contact page, do as follows:

• Create a new page and call it Contact.
• Make sure the Page URL is contact.
• Click Publish.

There is a contact form included, which requires you to create a formspree account and after you have created your form, copy the endpoint and add it to the action attribute. The link should look like this:

https://formspree.io/f/moqppoep

Open page-contact.hbs in the root folder of the theme and replace the action value with your formspree link.

<form
  action="https://formspree.io/f/moqppoep"
  id="contact-form"
  class="contact-form"
  method="post"
></form>

You can also replace the form with your own if you have one.

Tags Page

To create the Tags page, do as follows:

• Create a new page and call it Tags.
• Make sure the Page URL is tags.
• Click Publish.

Authors Page

To create the Authors page, do as follows:

• Create a new page and call it Authors.
• Make sure the Page URL is authors.
• Click Publish.

Membership Page

To create the Membership page, do as follows:

• Create a new page and call it Membership.
• Make sure the Page URL is membership.
• Click Publish.

Archive Page

To create the Archive page (this will list all posts), do as follows:

• Create a new page and call it Archive.
• Make sure the Page URL is archive.
• Click Publish.

Sidebar banner

The advertisement section is part of the partials/sidebar.hbs file. To activate it, just create an internal tag called #sidebar-ad.

The tag image will be displayed in the sidebar and the description is used as the URL for the link element.

Additionally, for the advertisement to show up in an individual post, you have to assign the #sidebar-ad tag to it.

With version v2.6.0 the banner can be changed from the Admin settings. Go to Settings > Design > Homepage and upload an image for the Sidebar banner and provide a link for this using the Sidebar banner link box.

Translations

By default, everything is in English (en.json), additionally, the theme comes with translations in:

• 🇩🇪 German (de.json)
• 🇪🇸 Spanish (es.json)
• 🇫🇷 French (fr.json)
• 🇮🇹 Italian (it.json)
• 🇳🇱 Dutch (nl.json)
• 🇵🇹 Portuguese (pt.json)

If you want to edit the translation in a specific language, you have to edit the corresponding translation file. The files are stored in the locales directory (inside the theme zip).

|__ locales
|   |__ de.json
|   |__ en.json
|   |__ es.json
|   |__ fr.json

If the language file for your language doesn't exist, you have to create it (make sure to use the correct language code) The best way is to copy the content en.json file in your new language file, then change the translations.

Social links

Social links are shown in the footer and by default, the theme comes with:

• Facebook (Settings > General > Social accounts)
• Twitter (Settings > General > Social accounts)
• RSS

To add other links you need to edit the partials/social-links.hbs file. There are several other links in there already, you just have to uncomment the relevant parts and add your link in the href attribute.

Comments

The theme uses the native Ghost comment feature. The Native Comment System requires at least Ghost v5.9.0, you have to enable it from Settings > Membership > Access > Commenting.

Here are the options you can choose from:

• All members - Logged-in members
• Paid-members only - Only logged-in members with an active subscription
• Nobody - Disable commenting completely

Icons

The icons used in the theme are from Tabler Icons, the library consists of 4000+ icons. Not all icons from the library are included to save on the file size, but the most common icons are included in an icon sprite file.

This file is placed in the /assets/icons/ directory in SVG format: icon-sprite.svg. The icons are placed in separate <symbol> tags with a unique id.

Here are the steps to add new icons:

1. Go to Tabler Icons and click on the Icon you want to add, this will copy the code to your clipboard.
2. Open the file (icon-sprite.svg) in a text editor and go to the end of the file.
3. After the last <symbol> create a new <symbol> tag with a unique id (which can be the icon name)
4. Paste the code from the clipboard inside the opening <symbol> and closing </symbol> tags
5. Remove the line starting with <svg and also the closing </svg> tag from the code you pasted.
6. Save the file.

For using the icons inside the theme files, there is a special partial file partials/icon.hbs which accepts name and size as parameters.

Let's see an example and try to add a new icon. Assuming we want to add the icon battery-charging and by clicking on the icon on the website, we get this code:

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="icon icon-tabler icon-tabler-battery-charging"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="#2c3e50"
  fill="none"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path
    d="M16 7h1a2 2 0 0 1 2 2v.5a0.5 .5 0 0 0 .5 .5a0.5 .5 0 0 1 .5 .5v3a0.5 .5 0 0 1 -.5 .5a0.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-2"
  />
  <path d="M8 7h-2a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h1" />
  <path d="M12 8l-2 4h3l-2 4" />
</svg>

As explained before, we don't need the <svg> tags just what is inside, as we will place them in <symbol> tags. So the code we will place in the icon-sprite.svg will look like this:

<symbol id="battery-charging" viewBox="0 0 24 24">
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path
    d="M16 7h1a2 2 0 0 1 2 2v.5a0.5 .5 0 0 0 .5 .5a0.5 .5 0 0 1 .5 .5v3a0.5 .5 0 0 1 -.5 .5a0.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-2"
  />
  <path d="M8 7h-2a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h1" />
  <path d="M12 8l-2 4h3l-2 4" />
</symbol>

It's important that the id is uniques and there is no other <symbol> with the same id. After copy-pasting this into the icon-sprite.svg and saving it, we can use the new icon in the theme, like this:

{{>icon name="battery-charging" size="md"}}

Wherever you put this code, will render the icon.

Theme development

If you want to make more advanced changes to the theme, or you want to develop your components, the theme comes with a developer-friendly setup. You can take advantage of the Gulp tasks that are set up for compiling Javascript and PostCSS.

All the assets are combined and minified for better speed and performance. To customize the theme make sure you have Node.js and npm installed.

Follow the official guide for installing Ghost locally. After you have installed Ghost and put the theme directory inside the content/themes/ directory, run the following commands in the theme directory:

npm install

This will install all the dependencies for the theme

Then run:

gulp

This will compile PostCSS and javascript and will watch for changes. So when you edit a .hbs, .css or .js file the change will trigger the gulp watch task and this will compile the assets whenever you change a file.

If you want to compile just CSS:

gulp css

If you want to compile just JS:

gulp js