Install Theme
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Go to Settings > Design from the admin menu
- Under the Themes section click
Upload a theme
- Click inside the upload box to select a voice.zip, or drag-and-drop the voice.zip into the upload box
- If you want to activate the theme immediately click
Activate Now
orClose
if you want to do it later
Publication Settings
Some basic settings for your publication:
Icon
To Upload a new icon follow these steps:
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Click Design under the settings menu.
- Under Brand > Publication icon, click
Upload Image
and select your icon - Finally click
Save settings
Logo
To Upload a new logo follow these steps:
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Click Design under the settings menu.
- Under Brand > Publication logo, click
Upload Image
and select your logo - Finally click
Save settings
Cover
To Upload a new cover image follow these steps:
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Click Design under the settings menu.
- Under Brand > Publication cover, click
Upload Image
and select your cover image - Finally click
Save settings
Navigation
To add menu items to your publication, follow the steps below.
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Click Navigation and enter a label for the menu item in the label field
- In the URL field, enter the destination for the menu item to link
- Click
Save
Members
To activate the feature follow the steps below.
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Click Settings > Membership.
- Set the Subscription access and other settings made available by Ghost
Besides this configuration, you also have to upload the routes.yaml
file (you can find it in the root folder of the theme).
To access the overview of members click Members from the admin menu.
Content API
As mentioned in the Requirements section, this theme uses the Content API, so in order to take advantage of all the theme features make sure the Content API v4 is used, this is set in the theme by default.
You can check this in the theme's package.json
file:
{
"name": "...",
"description": "...",
"demo": "...",
"version": "...",
"engines": {
"ghost": ">=4.0.0",
"ghost-api": "v4"
},
}
Members
Auden completely supports the Ghost Members feature. To activate the feature follow the steps below.
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Click Settings > Labs.
- Toggle the
Enable members
switch, under the MEMBERS(BETA) section.
Within the members the following settings are available:
Connect to stripe
- where you have to configure the connection to your stripe account to be able to accept/process payments.Subscription pricing
- you can define the monthly and yearly price for full access to your publication.Allow free member signup
- Toggle switch to allow or not free membership sign up.Default post access
- Define the default post access. Can be:Public
,Members only
,Paid-members only
Email settings
- In order to send emails for member signup/signin, you have to provide the Mailgun configuration.
Besides this configuration, you also have to upload the routes.yaml
file (you can find it in the root folder of the theme).
To access the overview of members click Members from the admin menu.
Language
To set the publication language follow the steps below.
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Go to General from the admin menu
- Under Publication Language, click
Expand
and set the language/locale to be used on the site. The default is set to English (en).
- Click
Save settings
Ghost Search
Native search functionality is integrated with version v3.4.0
, this works out of the box, no configuration needed.
Other possible options to add Search to Ghost CMS Themes.
Custom Settings
The theme comes with custom settings available in the Ghost Admin.
Go to Settings > Design ( yoursite.com/ghost/#/settings/design/
)
Custom settings are defined and can be changed in the package.json
file.
These settings are placed under three categories:
- Site-wide settings
- Homepage settings
Site-wide
- Secondary color - set the secondary color
- Sidebar ad image - upload the image for the advertisement section in the sidebar
- Sidebar ad link - set the link for the advertisement section in the sidebar
- Sidebar ad title - set the title for the advertisement section in the sidebar
- Show post card info - display or hide the post card info (date and author)
- Show sidebar tag cloud - display or hide sidebar tag cloud
- Show sidebar story number - display or hide the sidebar story number
- Show RSS - display or hide the RSS link
- Instagram Url - add your instagram link
Homepage
- Featured post headline - if is set the text will be used as a headline for the featured post
- Featured post on top - if is set the latest featured post will be displayed right below the header, otherwise the most recent post will be displayed right below the header
Customization
Different customizations for the theme.
Posts Per Page
From Ghost 1.0
the "Posts per page" settings was moved from the Ghost Admin to the theme.
You can set it in the package.json
of the theme:
"config": {
"posts_per_page": 9
}
For Voice the default value is 9
, you can change it to whatever number you wish,
we recommend a number that can be divided by 3
.
Google Fonts
Voice comes with Google Fonts integrated, using the following fonts:
- Yeseva One
- Rubik
In order to change the fonts you have to change the default.hbs file.
<link
rel='preload'
href='https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap'
as='font'
onload="this.onload=null;this.rel='stylesheet'"
/>
<link
rel='preload'
href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'
as='font'
onload="this.onload=null;this.rel='stylesheet'"
/>
{{! No Js }}
<noscript>
<link
rel='stylesheet'
href='https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap'
/>
<link
rel='stylesheet'
href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&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.type.scss
file located in assets/sass/settings folder.
Replace the font setting with your new font:
// Font settings
$font-family-serif: 'Yeseva One', Times, Georgia, serif;
$font-family-sans-serif: 'Rubik', Tahoma, Arial, sans-serif;
$font-family-monospace: Consolas, Monaco, monospace;
Build the assets (check theme development) and everything sould be ready.
Translation
Voice supports Ghost i18n and it comes with translations for the following languages:
de
for Germanfr
for Frenches
for Spanish
To change the publication language to one of the available languages check out this guide.
Editing the translations
The translation files are stored in the locales
folder within the theme folder.
|__locales
| |__de.json
| |__en.json
| |__es.json
| |__fr.json
Open up the file for the language you want to edit. Example de.json
:
{
"Previous": "Bisherige",
"Next": "Nächster",
"Back": "Zurück",
"Forward": "Weiter",
"Post": "Post",
"Posts": "Artikel",
"Page": "Seite",
...
}
Each line consist of a key-value pair.
"key": "value"
The key is on the left side and it should not be changed (it's the same in all the files) and right value which you can adapt if necessary.
Adding a new language
To add a new language you have to create a new translation file with the language code of the desired language.
For example if you want to create new translation for Hungarian language you
have to create hu.json
within the locales folder.
And add the translations for each key
value.
For more details check the Official Ghost Documentation.
Custom Pages
Voice comes with 4
custom pages by default:
- Contact Page
- Tags Page
- Authors Page
- About Page
Contact Page
To create the Contact page, do as follows:
- Create a new story and call it Contact.
- Make sure the Post URL is
contact
.
- Check the box
Turn this post into a page
. - Click
Publish
.
To add the page to the navigation, please check the Navigation section above.
Tags Page
To create the Tags page, do as follows:
- Create a new story and call it Tags.
- Check the box
Turn this post into a page
. - Select the
Tags
template from the Template dropdown.
- Click
Publish
.
To add the page to the navigation, please check the Navigation section above.
Authors Page
To create the Authors page, do as follows:
- Create a new story and call it Authors.
- Check the box
Turn this post into a page
. - Select the
Authors
template from the Template dropdown.
- Click
Publish
.
To add the page to the navigation, please check the Navigation section above.
Social Media Links
The social media links are stored in a partial file partials/social-media.hbs
.
Ghost supports Facebook and Twitter social accounts, to change them do the following
- Log in to your publication admin section at
yourblog.com/ghost/signin
- Go to General from the admin menu
- Click
Expand
under Social Accounts, and enter the URLs for your Facebook and Twitter.
- Click
Save settings
To edit the other social links follow the steps below. Open up the social-media.hbs
file and change the href value to your profile's URL for that specific social platform.
...
{{!-- Instagram --}}
<a class="social-links__item instagram"
href="https://instagram.com" target="_blank" title="Instagram" aria-label="Instagram">
{{>icon name="instagram"}}
</a>
...
</div>
For example to change the Instagram link, you have to change the existing href value:
href="https://instagram.com"
Add your instagram account link, example:
href="https://instagram.com/bright_themes"
Comments
Voice supports the native Ghost comments.
Warning
The Native Comment System requires Ghost v5.9.0 at least. You have to enable it from Settings > Membership > Commenting. By default, native comments are not active, so you have to select either All members or Paid-members only
Additionally, Voice comes with Disqus comments.
Make sure you have registered your website with Disqus and you know your disqus_shortname
.
Open default.hbs
file located in the root folder.
Change the biron-demo value for the disqus_shortname variable to match your Disqus account shortname.
{{! Global variables }}
<script>
// The number of pages available for loading more posts var maxPages =
parseInt('{{pagination.pages}}'); // Disqus shortname
</script>
That's all, Disqus comments should work now.
If you don't want disqus comments to show delete the comments.hbs
file located
in the partials folder. And delete the following section from the post.hbs
file located in the root folder of the theme:
{{!-- Include Disqus Comments --}}
{{> comments}}
Google Analytics
To add Google Analytics to Ghost follow this tutorial from our blog.
Theme Development
Voice is developer friendly, if you need to make advanced customization you will take advantage of the Gulp tasks that are set up for compiling Javascript and SASS/CSS.
All the assets are combined and minified for better speed and performance. In order to customize the theme make sure you have Node.js and npm installed.
Run the following commands in the voice theme directory:
npm install
This will install all the dependencies for the theme
Then run:
gulp
This will compile SASS/CSS and javascript and will watch for changes.
So when you edit a .scss
or .js
file the change will trigger the gulp watch
task and this will compile the assets with your changes.
If you want to compile sass or javascript separately, you can run:
gulp sass
For compiling SASS/CSS
Or:
gulp scripts
For compiling javascript files.
You also have the option to use Code Injection to do customizations. For example if you want to change the default color of the buttons, add the following code in the Blog Header section.
.btn,
a.btn,
button.btn {
background: #333; // set it to your desired color
}