How I configured and customized the Nurui theme for Ghost

To style my Ghost blog I purchased the theme Nurui made by fueko, because I really like its style. Nevertheless there are some things I customized to make it even better. In the following I’ll show you which changes I made and how I did them.

Add a Table of Contents

To add the ToC the theme itself had to be changed. Therefore the first step was to download and unzip the theme.

The ToC is generated with Tocbot, which is very easy to set up. First I linked its stylesheet in the <head> section of the default.hbs file, just before the stylesheet of the theme itself is linked:

Then I added the script tag and initialized Tocbot at the end of the <body> section, just before {{ghost-foot}} is rendered:

Adding this code to the theme enabled me to add a ToC to any post just by adding a HTML block with the following code to the post.

<aside class="toc"></aside>

That would have been already a quite good solution, but I still decided to move on because I wanted to add the ToC automatically to all posts. Further I wanted to apply some styling to integrate it nicely to my blog.

NOTE: If you are following my instructions and the functionality I implemented until now is enough for you, you can simply inject the above shown code into the header and footer section via the Ghost admin panel in the ‘Code Injection’ section. Then you wouldn’t have to touch your theme at all.

Automatically add the ToC to all posts

That’s when a second file came into the game: the assets/post.js file. There I added the below code to manipulate the post content and insert the ToC above the first heading instead of displaying it on top of the whole post.

To make this code working the {{content}} in the post.hbs file had to be wrapped with a div with the id post-content as you can see below. Further the line with <aside class="toc"></aside> was not necessary anymore, as the ToC is added when manipulating the DOM with JavaScript.

Now the Table of Contents is displayed before the first heading of every post.

Hide the ToC with a custom tag

Style the ToC

Hide subheadings

headingSelector: 'h1, h2'

Add a title

With that change made, I could tell Tocbot to just read the headings inside this class by setting contentSelector: '.post-content' in the init method in the default.hbs file. The full init method looked like this now:

tocbot.init({ 
tocSelector: '.toc',
contentSelector: '.post-content',
headingSelector: 'h1, h2',
hasInnerContainers: true
});

The last thing to style the ToC was to change the highlighting color of the active link item to the primary color of the blog. I did that by adding the following code in assets/css/sreens.css.

.is-active-link::before { background-color: var(--color-details); }

Style the headings

h2 { font-size: 40px; margin-top: 32px; }

Add a ‘Back to Top’ Button

To add the button to the post itself, I added the following code to the post.hbs file after the {{ content }} is rendered.

<span onclick="goToTop()" id="goToTopButton" class="go-to-top-button"/>

As you can see the button will now invoke the function goToTop() when the user clicks it. Therefore I added this function to assets/js/post.js. The implementation of the function and some necessary helpers are displayed below.

Now the only thing left to do is, to style the button by creating its class in assets/css/screen.css.

Use the automatic dark version of the theme

Style code blocks

Below I will show the code I injected in the admin panel. The only change I made is that I used the funky theme instead of tomorrow and thus replaced the background color with #000 to match the theme color.

NOTE: You could also add this things to your theme directly but I wanted to make it very easy to change the code block style in the future.

Header section:

Footer section:

Add Disqus Comments

Then I opened partials/services/disqus.hbs and followed the directions in the file itself to add my short name. That's it, after uploading the theme again I was ready to use comments.

Allow users to subscribe to new posts

As a next step I headed to mailgun.com and followed the instructions to create and setup an account. I chose the Flex plan, which offers some free mails for the first 3 months and then charges 0.8 USD for 1000 mails, which is more than ok for my planned usage.

After creating my Mailgun account I went back to the ‘Labs’ area of the Ghost admin panel and opened ‘Email settings’ in the ‘Members’ section. There I entered my Mailgun domain and public API key.

Now all setup work was done and I could add the ‘Subscribe’ page. Therefore I created a new page, named it ‘Subscribe’ (that name can be whatever you want), opened the page settings and scrolled to ‘Template’ where I selected ‘Newsletter’ in the dropdown. Then I saved the page and added it to the menu of my blog.

After doing all that subscribing basically worked for users. But now the user sees his account options when heading back to the blog after clicking the ‘Subscribe’ link in the email he received. To suppress any kind of member area on the page directly, I added the #login-panel-disable tag to this post (could be added to any post again).

If you create a new post now, Ghost will ask you if the subscribers should be informed about it. If this is approved, all subscribers will get an email which contains information about the newly created post.

NOTE: You could add the tag #subscribe-form to a post or page to display the subscription form there. I decided against this, because I just want to give people the opportunity to subscribe, but don't want to annoy them by doing so.

Enable Search

Set the background color of posts without images

#red 
#blue
#green
#yellow
#orange
#violet

To change the background color of the title in the post itself you can use the same color names, just prefix them with post-, like the following tags show:

#post-red 
#post-blue
#post-green
#post-yellow
#post-orange
#post-violet

This means you could even style the post on the home page with a different color than the post itself. Of course I wouldn’t recommend this, but I like the possibility a lot. Make sure to not forget the # at the start of the tag.

Further you can make colored overlays to your title images in both the home page and the post page, by just adding the correct tag.

Version information

Originally published at https://ksick.dev on June 15, 2020.

Creative and detail-oriented software developer. Advanced from mobile to backend development and now getting into full stack solutions.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store