Maroon Documentation

Last update: October 27 , 2021

Theme Info

Maroon - is first theme for your Ghost blog of Boogey Dev. This theme is minimalistic, stylish and suitable for a blog of any activity. It supports many functions, including an automatic dark theme, a slider on the main page, auto-loading of articles and much more. Check out the documentation below to find out how to set up your best blog.

Name: Maroon
Description: A Blog Ghost Theme
Released: 2021-11-05
Creator: Boogey.Dev

Install Theme

  • At first Log in to your publication admin section at yourblog.com/ghost/signin. All further actions in this guide are carried out after you log in to the admin panel
  • Go to Settings > Theme from the admin menu
  • Under the Themes section click Upload a theme
  • Click inside the upload box to select a maroon.zip, or drag-and-drop the maroon.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

General settings

In the General section, you can configure title & description, timezone, snippets for displaying your site in search results, set links to your social networks, and also make your site private. In addition, you can customize the language of the interface elements of your site.

Language

To set the publication language follow the steps below.

  • Go to Settings > 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).

If you do not know the code of the language you need, take a look here.

Icon

To upload a new icon follow these steps:

  • Click  Settings > Branding under the settings menu.
  • Under the Publication icon, click Upload Image and select your icon
  • Finally, click Save settings

To Upload a new logo follow these steps:

  • Click Branding under the settings menu
  • Under Publication logo, click Upload Image and select your logo
  • Finally, click Save settings

To add menu items to your site, follow these steps.

  • Click Navigation under the settings menu
  • You can configure two types of menus - primary and secondary, each of which will be displayed on the site.
  • Under Navigation, enter a label for the menu item in the label field
  • In the URL field, enter the destination for the menu item to link

Members

Maroon completely supports the Ghost Members feature. To activate the feature follow the steps below.

  • Go to Settings > Members from the admin menu
  • In this section, you can configure the availability of your site, connect to your Stripe account in order to accept payments from the user, and also configure Portal.

Portal

By default Maroon comes with individual pages in support of the member's feature, however, if you prefer the Portal for handling members, go to Members > Portal settings, click on Customize Portal  and now you can configure the Portal, including: modal window for Signup, Account, customize the appearance of the button for access to the Portal, change the available rates, and also see links for access to the Portal and its use by the members.

Email Newsletter

You can customize your newsletter, including the design of letters, specify the categories of members, connect the Mailgun service and much more, if go to Settings > Members from the admin menu.

Code Injection

You can insert scripts and other custom code snippets into the head section or at the bottom of the entire site using the settings in the section Settings > Code Injection.

Labs

A lot of Ghost features are currently being tested. Some of them are available in the Settings > Labs section. in this documentation, we will touch on some of the functions of this section.

Settings theme

If you want to customize the Maroon theme, making it more suitable for you, then make sure that you have everything suitable for this:

  • Code Editor for easy editing of theme files. We use free Visual Studio Code, but you can use any other.
  • The program is an archiver that will allow you to open and reassemble all the theme files into an archive so that it can be installed on your site. Can be used 7-Zip or any other.
  • You also need to be careful, as incorrectly edited files can ruin your site.

Structure theme

The Maroon theme has the following structure:

# Structure
.
├── /assets
|   └── /css
|       ├── screen.css
|   ├── /images
|   ├── /js
├── /partials
    ├── settings.hbs
├── /members
├── /locales
├── default.hbs
├── index.hbs [required]
├── post.hbs [required]
└── package.json [required]

In addition, Maroon also contains a number of additional files and folders. If you are not sure of your actions, do not delete any of them.

Quick settings

You can do some quick theme settings. For this:

  • Open the settings.hbs file in the code editor, located in the partials folder.
  • This file has the following structure:
<script>

    let config = {
        //Integrations > New Custom Integration. Copy Key. Replace KEY_SEARCH
        KEY_SEARCH: '2cdf75dfcd15028a92c6590106', 
        // if false featured posts will be shows without slider
        HOME_SLIDER: true, 
         // Interval of change post in Slider on Home page in seconds
        SLIDE_INTERVAL: 4,
        //if false older posts on home page, author page & tag pag will be access for pagination
        LOAD_MORE: true 
    }

</script>

<style>

    :root {
        /* font-family */
        --fontMain: 'Poppins', Arial, Helvetica, sans-serif;
        --fontSecond: 'Merriweather', Georgia, serif;
        --fontTitle: 'Satisfy', 'Comic Sans', cursive;

        /*background site dark mode*/
        --colorBackgroundDarkmode: #090a0b;

        /*background posts title & meta on all pages */
        --colorForegroundDarkmode: #1e1e1e; 
        --colorForegroundLightmode: #f2f2f2; 

        /* color text dark & light modes */
        --colorTextLightmode: #232323;
        --colorTextDarkmode: #e6e6e6;
        --colorTitle: #800000;
        --colorTitleDarkmode: #db0000;
        --colorLinkHover: #1d609d;

        /* color gradient background search screen */
        --colorGradientBackgroundSearchFirst: #1d609d;
        --colorGradientBackgroundSearchSecond: #053866;

        /* color gradient background tags image on search screen */
        --colorGradientTagsSearchFirst: #ffc239;
        --colorGradientTagsSearchSecond: #ff4b50;


        /* color background gradient underline link into posts & static page */
        --colorGradientLinkFirst: #8493fa;
        --colorGradientLinkSecond: #0066ff;
        --colorGradientLinkFirstDarkmode: #1d609d;
        --colorGradientLinkSecondDarkmode: #0041a3;

        /* color button */
        --colorLinkButton: #f02323;

        /* color featured posts mark */
        --colorFeaturedMark: #ff7f50;

        /* all transition effect site */
        --transitionMain: all 0.3s 0s ease;
    }
    
</style>

Available settings:

  • KEY_SEARCH: '2cdf75dfcd15028a92c6590106'- insert your integration key instead of '2cdf75dfcd15028a92c6590106'.  

To create an integration key, go to Integrations from the admin menu, click the Add custom Integration, enter Name Integration (for example, Search), click the Create button, then copy the generated Content API key and add this key in settings.hbs file.

  • HOME_SLIDER display on home page last six our featured posts. He takes two values - true or false. If  true, the slider will be displayed at the top of the home page, if false, the last 9 featured posts will be displayed instead of the slider.
  • For SLIDE_INTERVAL you can set the time in seconds, which will be used for automatic scrolling of the featured posts slider on home page. By default, this value is 7 seconds.
  • Function LOAD_MORE if its value is true, it allows you to load older posts by clicking on the button on the home page, as well as on the tags and authors page. If false, the standard pagination by pages will be output.
  • Style settings sets CSS variables to customize the appearance of some elements. For example, --colorGradientBackgroundSearchFirst: #1d609d; sets the first of two colors in the background gradient of the search screen. --fontMain: 'Poppins', Arial, Helvetica, sans-serif; sets the font for all text on the site, --fontTitle: 'Satisfy', 'Comic Sans', cursive;  sets the font for title section on home page, etc. Feel free to try changing the stylistic settings to customize your site as you wish.

You can change the settings directly in the partials/settings.hbs file, or you can insert the code you changed in the sections Settings > Code Injections. In this case, when updating the theme, you will not need to edit the settings file again. Try to use the Code Injections Site Header to avoid problems, and also wrap functional settings with the <script> tag, and stylistic settings with the <style> tag.

<script>
...functional settings is here
</script>
<style>
...style settings is here
</style>

Fonts

Maroon comes with Google Fonts integrated, using the three fonts - Poppins for post titles, post texts, menu; Merriweather for description site and blockquotes & Satisfy for site titles and section titles. To change the fonts you have to change the default.hbs file.

        <link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,900;1,400;1,900&display=swap" rel="stylesheet">

Go to Google Fonts and choose the font and styles you would like. Then click Embed and copy the link provided. Now insert link in default.hbs and change the setting in the partials/settings.hbs file or paste this code into the Site header section in Settings > Code injection. For example,

<style>

    :root {
        --fontMain: 'Roboto', sans-serif;
    }
    
</style>

Home, Tag & Author Pages

In addition to setting up the slider of featured posts and the Load more button, you can customize the home page to your liking if you edit the theme files a little. For example,

  • Delete slider section from home page. To do this, find the index.hbs file in the root folder of the theme and delete the following construction on the fifth line:
  • Delete post selected section from home page. To do this, find the index.hbs file in the root folder of the theme and delete the following construction on the 21st line:
  • If you want these sections to be displayed on other pages of the site, for example on the pages of the tag and authors, copy the above lines and paste them into the place you need in the failes tag.hbs and author.hbs in the root folder of the theme. For example, the structure of the tag.hbs file will look like, if we insert a post-selected block into it (pay attention to the penultimate line).
{{>"post-slider"}}
{{>"post-selected"}}
{{!< default}}

    <main class="site-content content-width content-width--medium">

        {{#tag}}

            <section class="tag-archive tag">
                <div class="tag__header">
                    
                    <div class="tag__top">
                        <h1 class="tag__title">{{name}}</h1>
                        <div class="tag__count">{{plural ../pagination.total empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}</div>
                    </div>

                    {{#if description}}
                        <div class="tag__description">{{description}}</div>
                    {{/if}}

                </div>

                {{#if feature_image}}
                    <div class="tag__image">
                        <img src="{{img_url feature_image size="l"}}" alt="{{name}}">
                    </div>
                {{/if}}
                
            </section>

        {{/tag}}

        <div class="post-feed">

            {{#foreach posts}}

                {{>"feed-item"}}

            {{/foreach}}
            
        </div>

        {{pagination}}

        {{>"post-selected"}}

    </main>

You can customize the number of posts displayed on the pages. For example:

  • Go to the package.json file in the root folder of the theme and find the following line: "posts_per_page": 8,. Change the number to show on the home page, tag page or author page the specified number of posts in the main loop.
  • Go to the partials/post-slider.hbs of the theme and find the following line: {{#get "posts" filter="featured:true" limit="9" as |featured|}}. Change the number limit="9"to show more or less posts in the slider section.
  • Go to the partials/post-selected.hbs of the theme and find the following line: {{#get "posts" filter="tags:getting-started" include="tags,authors" limit="4"}}. Change the number limit="4"to show more or less posts in the selected posts section.

You can change the tag by which posts are selected in the selected posts section.

  • Go to the partials/post-selected.hbs of the theme and find the following line: {{#get "posts" filter="tags:getting-started" include="tags,authors" limit="4"}}.
  • Change the tag slug in filter="tags:getting-started" on the slug of the you need tag. For example, create tag "Design" in Ghost admin panel and save it. Ghost will automatically create a slug for it. Copy this slug and paste instead getting-started so that it turned out filter="tags:design".
  • Now only posts with the design tag will be displayed in the selected posts section. We recommend using this section for posts with the most popular tag, or the tag you want to draw attention to.

You can change the titles all section on the home page. There are two ways to do this:

  • Go to the locales/ folder of the theme and find the file your language file. Find there the lines with the names of the sections in English and change their meanings in your language. The Maroon theme uses the following section names on the pages:
*"Check out our latest articles"* for main loop on home page
*"Others from"* for related posts on post page
*"Our featured posts"* for featured posts section when post-slider false
*"You could have missed it"* for selected posts section

Read more about how to translate the theme into your language, see here.

  • The above titles are in the files index.hbs, partials/post-selected.hbs, partials/post-slider.hbs, partials/related-posts.hbs Find them and change them directly.

Post page

You can change the display of your posts in one way or another. For example:

  • Use the Template in the Post Settings in the Ghost admin panel to select the Wide Feature Image template instead of the standard post display.
  • Remove sections related posts or/and post share in files post.hbs and custom-wide-feature-image.hbs if you don't need them.

Contact page

Maroon comes with a ready-made contact page so that readers can contact you.

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/form_id_here"

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

Translation

Maroon supports Ghost i18n and it comes with translations for the following languages:

  • en for English
  • es for Spanish
  • ru for Russian

You can edit any of the translations according to the scheme described above.

  • Select the language file you need in the /locales folder. This file contains "key": "value" pairs. The key is written in English, it does not need to be edited. Edit value in the language you need. Here is an example in Spanish:
  • After you are done with the translation, save the file. The changed values will be immediately applied on your site. Make sure that you have applied the desired language code in the Publication Language on the path Settings > General.
"Your account": "Su cuenta",
"Your subscription will expire on": "Su suscripción caducará el",
"Hey! You have an active": "¡Oye! Tienes una activa"

You can create your own translation. To do this,

  • Copy the en.json file from the /locales folder and name it with the correct language code. For example, for Finnish, the file should be called fi.json.
  • Change all the values in this file and then save it in the /locales.
  • Make sure that you have applied the desired language code in the Publication Language on the path Settings > General.

The social media links are stored in a file partials/social-links.hbs.

In Maroon, all links are displayed in the footer as icons. The most popular social networks and messengers are available to you. To set links to your accounts, follow these steps:

  • Find the social network or messenger you need in the file partials/social-links.hbs. This is how the code block for the link to Twitter looks like:
  • Insert a link to your account instead of #, to make it look like this:
  • If you don't need all the links to be displayed on your site, you can delete the part of the code you don't need in the partials/social-links.hbs file. Or comment it out by wrapping it in a construction {{!--  --}}. For example,
  • You can also swap code snippets in this file to set the desired sequence of links.
{{!-- twitter --}}
<a href="#" target="_blank" >
    {{>"icons/twitter"}}
</a>
{{!-- twitter --}}
<a href="https://twitter.com/youraccount" target="_blank" >
    {{>"icons/twitter"}}
</a>
{{!-- twitter --}}
{{!-- <a href="https://twitter.com/youraccount" target="_blank" >
    {{>"icons/twitter"}}
</a>  --}}

Membership

Maroon fully supports the built-in Ghost Membership feature. Go to Settings > Membership to see all possible functions. Get started by making sure you have all of the requirements, and then use the official Ghost setup guide of membership.

By default Maroon comes with individual pages in support of the member's feature. Routing is used for this. Routing is the system that maps URL patterns to data and templates within Ghost. To enable signin, signup, and account pages you need to upload the routes.yaml file.

  • Go to Settings > Labs.
  • Click on Upload routes YAML button and select the file from the root folder of the Maroon theme.
  • You will also need to restart ghost on your server. this is usually done with the ghost restart command on the command line.

The file you will use contains the following data:

routes:
  /signup/: members\signup
  /signin/: members\signin
  /account/: members\account

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

This will make your site unique. However, Portal has its own interface, and you can find links to membership functions in the theme files, and replace them with Portal links, located in Portal settings on the tab Links. In this case, you don't need to load the routes.yaml file. Copy the necessary links and paste them into the following files:

  • default.hbs
  • members/account.hbs
  • members/signin.hbs
  • members/signup.hbs
  • partials/contet-cta.hbs

Custom code snippets

If you need to place your own block of code that should work on all pages, for example, Google Analytics code, use for this Settings > Code Injection. This will allow you to save this code, in case of updating the Maroon theme.

You can also paste this code directly into the theme file. The default.hbs file is used for this. The code is inserted between the  <head> and </head> tags, usually immediately before the closing </head> tag.

Many code blocks (except styles, perhaps) can be inserted before the closing </body>  tag, which is in the same default.hbs.

Some features of the theme

Dark mode

Maroon comes with an automatically enabled dark theme. This happens if the user of your site has a dark theme enabled in the device's operating system. The css property preferences-color-scheme: dark is responsible for this. Most of the settings for the dark theme are related to colors, you can change them in the file partials/settings.hbs.

Scroll to top & reading progress

On the pages of posts in the lower right corner you can see an up arrow and an indicator of the progress of reading the article. When a visitor to your site finishes reading the article, the indicator will fill up completely. If he needs to go back to the beginning, he can click on the arrow and find himself at the top of the page again.

Browser support

Maroon is built on a modern technology stack and uses functions that may not be displayed correctly in outdated browsers. We are in favor of Internet Explorer retiring to a well-deserved retirement :-)

Credits

This theme uses the following third-party solutions: