Biron Documentation

Theme Info

Name: Biron - Ghost Theme
Description: a Free Responsive Ghost Theme
Released: 2018-06-28
Creator: Bright Themes

Requirements

Ghost version: 1.0 or higher
Ghost Public API: Active
Ghost Subscribers Feature: Active (Optional)

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 biron.zip, or drag-and-drop the biron.zip into the upload box
• If you want to activate the theme immediately click Activate Now or Close if you want to do it later

Publication Settings

Some basic settings for your publication:

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

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

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

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

Language Code Reference

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 Biron the default value is 9, you can change it to whatever number you wish, we recommend a number that can be divided by 3.

Translation

Biron supports Ghost i18n and it's ready for translation:

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.

The translation files are stored in the locales folder within the theme folder.

|__locales
| |__en.json

For example if you want to create new translation for German language you have to create de.json within the locales folder.

Create a new file for the language you want to add. Example de.json:

{
  "Back": "Back",
  "Newer Posts": "Newer Posts",
  "Older Posts": "Older Posts",
  "Page {page} of {pages}": "Page {page} of {pages}",
  "Subscribe": "Subscribe",
  "Subscribe to {blogtitle}": "Subscribe to {blogtitle}",
  "Subscribed!": "Subscribed!",
  "with the email address": "with the email address",
  "Your email address": "Your email address",
  "You've successfully subscribed to": "You've successfully subscribed to",
  "Get the latest posts delivered right to your inbox": "Get the latest posts delivered right to your inbox",
  "Latest Posts": "Latest Posts",
  "No posts": "No posts",
  " (Page %)": " (Page %)",
  "Share this": "Share this",
  "1 post": "1 post",
  "% posts": "% posts",
  "1 min read": "1 min read",
  "% min read": "% min read",
  "You might also like": "You might also like",
  "Navigation": "Navigation",
  "Follow Us": "Follow Us"
}

Each line consist of a key-value pair. You have to edit the right side changing the value with the translation.

"key": "value"

The key is on the left side and it should not be changed and right side value which is the translation.

To change the publication language to one of the available languages check out this guide.

For more details check the Official Ghost Documentation.

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 href='https://instagram.com' target='_blank'>
  <i class='fa fa-2x fa-instagram' aria-hidden='true'></i>
</a>

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"

Disqus Comments

Biron comes with Disqus comments enabled.

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.

{{! Disqus comments }}
<script>
  // Replace 'biron-demo' with your disqus account shortname var
  disqus_shortname = 'biron-demo';
</script>

That's all, Disqus comments should work now.

If you don't want disqus comments to show delete the disqus.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 --}}
{{> disqus}}

Google Analytics

To add Google Analytics to Ghost follow this tutorial from our blog.

Theme Development

Biron 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 biron 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.

Credits

Biron uses the following packages/plguins:

• Bulma - CSS framework
• Prism.js - Syntax Highlighter
• FitVids - Responsive video embeds
• Lazyload - Lazy loading images
• Google Fonts
• Feather Icons - Icon pack
• Unsplash - Images

Images are not included in the download files!

Support

Don't hesitate to reach out if you need help or have any suggestions.

Contact - Feedback

Change Log

----- v3.0.0: Release on 30 Jul 2021  -----
[+] - Ghost 4.0 compatibility

----- v2.0.0: Release on 01 Mar 2020  -----
[+] - Ghost 3.0 compatibility

----- v1.3.0: Release on 01 Jul 2019  -----
[*] - Dependency updates
[*] - Ghost version compatibility fixes

----- v1.2.0: Release on 02 Feb 2019  -----
[+] - Ghost Content API support
[*] - Package updates

----- v1.1.0: Release on 05 Sep 2018  -----
[+] - Ghost 2.1 Image Gallery Support added

----- v1.0.2: Release on 24 Aug 2018  -----
[+] - Ghost 2.0 Support
[*] - Dependency updates

----- v1.0.0: Release on 28 Jun 2018  -----
[+] - Initial release