Neon Documentation

Using the theme

To use the theme, at first extract the main downloaded zip file.

After extracting you will find a folder named similar to theme name. That folder is the production ready ( live site ready ) theme. After the required setup you will make a zip of this folder's content ( all files and folders within this folder ) and upload it to your ghost site.

To set up the theme properly with several setting options, please read through the documentation.

Please edit theme files using a proper code editor. There are lots of free and open source code editor available. You can choose any of those, A popular free code editor is Visual Studio Code.

Light and dark mode

This theme comes with light and dark mode. User can select dark or light mode as per their preference. This option let your user choose whether they prefer dark color or light color. User preference will be saved in their browser locally. Whenever they visit your site in future, they will see their preferred mode.

In site design settings options, there is an option to select default theme mode. There are three options for theme default mode.

• System - detect user's system preference and set the mode accordingly.
• Light - Set light theme mode.
• Dark - Set dark theme mode.

You can choose one of these three options.

Logo settings

This section describe instruction to setup image logo. If you do not use image logo then site title will be shown at the place of logo and you can skip this section.

As this theme has option to toggle dark and light mode. You have to provide, 2 different logo for 2 different mode.

I recommend to make your logos in svg format, but the format is not absolute requirement.

• At first prepare 2 version of your logo ( each for dark background and light background ).
• Go to ghost dashboard and then Settings > design.
• Under brand section you will see the Publication logo option.
• Upload the logo which is made for light background ( i.e. dark color logo for light background).
• Now close the brand section and open Site-wide section. There is an option named Logo for dark mode.
• Upload the second logo ( light logo for dark background ) there.

Body background color for light mode

This theme comes with an option using which you can set a background color for the lite theme mode. The name of this option is Light body background color which you can find under Site-wide section.

The color #FDF6EC is set by default. You can change this to any color you want. General recommendation is very light color with a tint of your choice.

If you don't want to set any tint to the background and want pure white color use pure white color code #FFFFFF.

Disable rounded corner

By default the theme dose show rounded corner for all elements.

But there is an option Rounded corner under Site-wide setting section. By default this option is enabled. If you disable this option then all rounded corner will become sharp.

Navigation bar type

In this theme there are 3 mode of of navigation. Those are as follows.

• Normal: No sticky navigation.
• Sticky: Navigation will stick always on top of the page.
• Sticky hide: Navigation will hide on scroll as normal mode but as revers scroll start the navigation will be shown fixed on top of the page.

By default the navigation is set to Normal mode. You can change this in the site design setting. This option is under Site-wide section.

Choose normal or Sticky or Sticky-hide at the Navigation bar type setting option.

Post card style

There are 3 different style for post list in this theme. Those are horizontal, vertical and vertical masonry.

YOu can choose one of these three option for post list.

Sidebar style

There are 3 different options for sidebar.

Sticky - Sidebar sticks to top or bottom while scrolling the page.

Normal - The sidebar will normally scroll with the page without any stickiness.

Hidden - This will hide the sidebar.

Choose sticky or normal or hidden at the Sidebar style setting option.

Copyright text

Normally you do not have to change the copyright text. But if you wan to change or edit the copyright text then follow the following steps.

• Go to design setting option in your ghost dashboard.
• Under Site-wide section you will see an option named Copyright text override.
• Add any text there to override the default copyright text.

Hero section on home page

This theme comes with three different hero option. The option for this is Home hero content which is under Homepage section.

You can hide this section entirely or add or change the title and description under using Home intro title and Home intro description override option.

Go to site design setting options and expand the homepage settings options section.

• To hide the intro section entirely set Home hero content option to none.
• Choose any one of other three option under to show different content at hero section.

If you choose welcome note or welcome note personal then add any text in Home intro title option. It will be shown in as the title.

By default the Site description from brand section shown as the description in the intro section. You can override that by adding different text in the Home intro description override option text box.

In both title and description you can use basic HTML tags for bold, italic, links etc. See tags example below.

• <strong>Your text</strong> - Make text bold.
• <em>Your text</em> - Make text italic.
• <a href="#">Your text</a> - Link your text. Replace # with your link URL.

Featured posts

For home page hero section there is option to show featured posts slider. By default this slider will show maximum five featured posts. If you want to change the number of posts in the slider, you can do this by editing theme file. FOllow the steps below.

• Open hero-featured-slider.hbs file which is located in the partials folder.

• At the first line you will see the following code.

{{#get "posts" limit="5" filter="featured:true" include="tags"}}

Change limit="5" in that line to the number of your choice.

There is also a place in sidebar where featured post are being shown. You can change the number of posts for that area. To modify the number open widget-featured-posts.hbs file which is located in partials folder. Change limit="3" to your preferred number.

Navigation links

There are two navigation in Ghost. Primary and secondary. In this theme the primary navigation is shown in header and the secondary navigation is shown in footer.

By default In header (primary) navigation first 4 item will be shown directly and if there is more than 4 item in your primary navigation then those will be shown under a more dropdown item. It is handled by the theme. You don't have to do anything for this.

But if you want to change the number of direct visible item in your primary navigation then you can do that by changing it in theme file.

• Open navigation.hbs file which is located in partials folder.
• At line number 5 you will see following code.

{{#foreach navigation to="4"}}

• Change the number 4 to any number of your choice.

Also change from="5" to the next number you choose for direct visible navigation at line number 11.

The secondary navigation is being shown in footer.

Adding social links

At the footer of this theme Social links are being shown. To add your social links please follow the steps below.

From your ghost dashboard, Go to setting > general page. In social account option, you can add Facebook and Twitter link there. This Facebook and Twitter will be linked with the icons.

There is no option to add other social links directly from dashboard. Following are the steps to add other links.

• open widget-social-icons.hbs file located in partials folder.
• From line number 14, you can add different social links. Replace the # for each href value with your own profile links.
• If you want to add other social links or want to remove one then copy or remove one of those lines. You can see all available icons in partials > icons folder.

The code in social-links.hbs file, where you will add your links, will look like below.

<a href="#" class="linkedin" aria-label="linkedin link">{{> icons/linkedin}}</a>
<a href="#" class="instagram" aria-label="instagram link">{{> icons/instagram}}</a>
<a href="#" class="github" aria-label="github link">{{> icons/github}}</a>

In this theme each social icons have different color. All different colors are already set for all available icons in the theme. But if you add another icon which don't have predefined color then it will fall back to default color.

If you want to add a specific color for that social icon then you can easily do that.

Add the following CSS code in code injection.

<style>
.social-links .twitter {
    color: #1da1f2;
}
</style>

Replace .twitter class with your own icon class name and color code with your own color code.

Code highlighting

Code highlighting is already implemented within this theme. This feature is not used by all user of the theme. It only used by technical writer who writes code example within their article.

This feature loads extra javascript code which is a waste of resources for those people who do not use this feature. That is why by default it is disable in this theme. Required css is already there. You just have to add a single line in code injection to load the javascript file.

Go to Settings > Code injection page in your dashboard and add the following line in the Site footer box( bottom box).

<script src="/assets/js/plugin/prism.js"></script>

Author and tag archive

In this theme there are five custom template for Tag archive and Author Archive. Two of theme for tag archive and other three are for author archive. These pages shows list of all tags and all archive respectively. To use those template please follow the steps below.

• Create a new page.
• Add a Title ( example: Authors or Authors Archive or any thing else you want).
• Open page settings panel by clicking on icon at top right corner of the page.
• Scroll down in the settings panel and select Author Archive 1 (alternative are 2 and 3) template for this page.
• Publish the page and add the page link in your navigation.
• Save it and visit your site. If you did everything right then you will see your newly created link in your menu bar. Open to see all available author list.

For Tag archive page follow the same steps as author archive setting. At step 4 choose "Tag Archive 1" (or 2)template option. Then Follow all the remaining steps and you will be able to add a tag archive page in you site.

Membership page

To create a membership (showcase pricing tables) page please follow steps below.

• Create a new page.
• Give it a title.
• By default it shows small description above the pricing table. If you want to add custom description then add that description in the excerpt field in the page setting.
• Scroll down in the settings panel and select Membership Page template for this page.
• Publish this page and add the page link in your navigation.

If you want to show FAQ below the pricing table you can add some toggle card in the page content area. Any other content also can be added to show below the pricing table.

Sign in and Sign up page

For your members you need a Sign in and a Sign up page. The links to these pages are already added in the theme but you have to create 2 page from the Ghost dashboard. Please follow the steps below.

• Create a new page.
• Give it a title ( anything you want, it will not be shown to your user).
• Open page settings panel by clicking on the gear/cog icon at top right corner.
• Make sure the page URL / slug is signin without any extra space or character.
• Scroll down in the settings panel and select Sign in Page template for this page.
• If you want to add an image you can do that by adding a feature image to the page.
• Publish this page.

For sign up page follow the same steps as mentioned above but set page URL / slug to signup at step number 4. And at step number 5 select Sign up Page page template.

Account page

For your logged in user you have to add an account page to show your member's account information. Please follow the steps below.

• Create a new page.
• Give it a title.
• Open page settings panel by clicking on the gear/cog icon at top right corner.
• Make sure the page URL / slug is account without any extra space or character.
• Scroll down in the settings panel and select Account Page template for this page.
• Publish this page.

If you are not using paid membership and just using free sign up and free members then you can use simple account page. For that select Account Simple Page template at step 5 above.

Yearly and monthly post archive

With this theme you can show an archive page which shows all the posts. There are 2 option for this page. You can setup which you want. The available options are as follows.

• Yearly archive.
• Monthly archive.

If you want to show yearly or monthly archive page which shows all post at once then follow the steps below.

At first upload the custom routes.yaml.

• Find the custom routes.yaml file which comes with this them.
• Go to Settings > Labs in your dashboard.
• At the end of the page you will find Routes option. Download your current routs.yaml file for backup and then upload the custom routes.yaml file which comes with the theme.

Now create the page.

• Create a new page.
• Add a title. Make sure the page URL is archive.
• Publish this page and add the link to the navigation setting.

This page will show the yearly post archive. If you want to show post archive grouped by monthly then just add #monthly internal tag to this page.

Post styles

This theme comes with four different post styles. When you create a post, by default it shows default post style with fixed height of featured image. Other options are as follows.

• Post fullwidth.
• Post fullwidth no sidebar.
• post image auto height.

For these post styles select the respective template while editing post.

Table of content

In this theme you can show a table of content within post. To add a table of content to a post add the internal tag #toc to that post. A table of content will be show in that post.

Contact form

In the demo of this theme you have seen a contact form. As ghost has no inbuilt feature for this you have to use a third party service. In demo formspree has been used.

If you want to add contact form in your site same as the demo, then follow this steps.

There is a file named contact-form-code.txt in the downloaded zip folder.

Copy the entire code from that file, now go to your page editor and then add the code using an HTML card. Change the example email address to your own email address within the code.

Theme translation

This theme supports translation. Please follow the steps below to translate this theme in your language.

• Within theme folder, there is a folder named "locales". In that folder by default you will find a file named en.json. This is the default file for English language and you have to use this file to create your own language file.
• make a copy of en.json and give a name following this format [language_code].json ( example: for French fr.json for German i.e. Deutsch de.json for Russian ru.json etc. )
• If you are not sure about what is you language code then you can visit this wiki page and see. Use the two letter (ISO 639-1) code.
• Now open the newly created <your_language>.json file in text editor. You will see "KEY": "VALUE" format in each line.
• In English language KEY and VALUE are same. Now you read the left part of the : i.e. KEY part and change the tight part i.e. VALUE part to your own language.
• After finishing the translation Save the file and upload the theme to your site.
• Go to your admin area, Visit "General setting" page and change the "publication Language" option. By default there is "en" for English. Add your own language code there in place of "en" and save the settings.
• Visit your site, If everything goes right, you will see all the theme related text in your site is in your translated language.

Theme customization

If you need to add only small CSS or just change colors then you can add using Ghost's Code Injection feature. In "Site Header" box you can add CSS. You can override the default colors, which are available as CSS custom properties (also knows ad CSS variables). See How to change color or CSS section below.

Detail customization prerequisite

This theme is built using Gulp to compile JavaScript and CSS. CSS is written in SCSS. So if you want to modify the theme's styles or appearance or anything you want to customize, before doing that you need to setup development environment setup.

Please follow all the steps below one by one to do it.

You need to have installed node js and gulp installed in your local machine.

• If you don't have NodeJS installed in your machine then visit nodejs.org and download and install latest LTS version of NodeJS.
• After installing NodeJS open a command prompt or terminal. Then type node -v. If it shows a version number then NodeJS is installed correctly. Also enter this command npm -v to see npm ( comes with node js) is installed properly.
• After installing node js you need to install Gulp CLI globally in your machine. So in your terminal or command prompt enter this command. npm install gulp-cli -g. It may take some time, it will install Gulp CLI globally in your machine. Now you have done the environment setup.
• At this point go to the development theme folder. In downloaded zip there is a folder named "development". Within that folder you will see a folder named as the theme name. Enter in that folder and run command prompt / terminal here. Or you can navigate to this folder within already running terminal.
• Now enter command npm install. It may take some time. It will install all the development dependency within the project. It may show some warning, don't worry those are OK.
• At this time you are ready to modify theme, Run one more command gulp in the terminal. It will initially compile all files and star to watch file changes. Keep the terminal open and start customizing the theme.

How to change color or CSS

If you just want to change the accent color for yours site you can directly do that from the Ghost dashboard.

• Go to Settings > Branding in your dashboard and then change the accent color there.
• Save the settings and your selected color will be reflect in your site.

If you do not want to setup development environment and just want to change other colors. Then you can override already available CSS custom properties (also knows ad CSS variables). See the available custom properties in the below code block.

/*=====================================================
    light theme colors ( as SCSS mixin )
=====================================================*/
:root {
    --body-background-color: #F9F9FF;
    --card-background-color: #FFFFFF;
    --text-color-main: #2D3350;
    --text-color-dark: #090C1E;
    --text-color-light: #808495;
    --gray-1: #EFF1F4;
    --gray-2: #E8EAEE;
    --gray-3: #CFD0D4;
    --border-color: #DADCE5;
    --button-text-color: var(--white);
    --shadow: 0 3px 10px -2px rgba(4, 9, 14, 0.1), 0 10px 25px -30px rgba(0, 0, 0, 0.1);
}
/*=====================================================
    dark theme colors ( as SCSS mixin )
=====================================================*/
[data-theme=dark] {
    --body-background-color: #262A2E;
    --card-background-color: #161819;
    --text-color-main: #d4d4d4;
    --text-color-dark: #f1f1f1;
    --text-color-light: #8a8c8d;
    --gray-1: #313438;
    --gray-2: #383c41;
    --gray-3: #4d4f50;
    --border-color: #2a2d3b;
    --button-text-color: var(--black);
    --shadow: 0 3px 10px -2px rgba(4, 9, 14, 0.5), 0 10px 25px -30px rgba(0, 0, 0, 0.5);
    --github: #DDDDDD;
}

If you already setup or want to setup development environment and then want to modify the theme then read below.

In the theme folder you will find "assets > scss" folder which contains all the theme styles written in SCSS.

To change any style / css you need to modify here. In SCSS folder you will find a folder named "components" which contains a bunch of .scss files which are part of the whole theme's style. and all those files are imported in a specific order in "screen.scss" file located in "scss" folder root outside of "components" folder. please don't edit that file.

To change the Theme color please follow the steps below.

• Open the _global-settings.scss file in your code editor.
• Now you have to change the color hexcode (#xxxxxx) in this file and save the file.
• If you have followed the above section of instruction ( Detail customization prerequisite), and already running terminal with the gulp command then the file changes will be detected and if there is no error in your file then it will be automatically compiled.

Changelog

V 1.1.0 - August 28, 2023

• Fixed text in sign up form.
• Replaced medium zoom with lightense.
• Added support for new page option.
• Fixed notification for sidebar widget.
• Added new twitter-x icon.
• Updated minimum ghost version requirement.

V 1.0.2 - March 09, 2023

• Fixed font link.

V 1.0.1 - January 11, 2023

• Added missing CSS classes for the bookmark.

V 1.0.0 - December 26, 2022

• Initial release