Shuttle

Stylesheets.dev
Search…
Stylesheets.dev
Welcome
Ghost Themes
Feedback & Support
Shuttle
Ghost theme
About
​Demo​
Supports Ghost version 4.x
Theme Installation
Follow these steps to install your theme on Ghost: 
1.
Login to your ghost admin dashboard (example.com/ghost).
2.
Click the settings icon at the bottom of the left-hand side.
3.
Go to Themes and click Upload a theme.
4.
Select the theme file.
5.
Once uploaded, click on Activate now button to activate the theme immediately or Close if you want to activate it later.
Theme Development
The theme uses Gulp and Node.js for development purposes. You'll need Node.js v12 or v14 installed on your machine. (If you're on a different version of Node, we recommend using NVM to get the correct version of nodejs on your machine.)
Once you have nodejs installed, run the following commands from the theme root directory. 
1
# To install node modules
2
npm install
3
​
4
# To compile and watch for changes in SCSS and JS files
5
npm run dev 
Copied!
Now you can edit the SCSS and JS files in /assets/src/ , which will be compiled to /assets/built/ automatically. 
To generate a production ready theme zip file, run the following command. It will minify all the CSS & JS files and package the theme into dist/<theme-name>.zip .
1
# To generate production ready theme zip file.
2
# check the /dist folder after completion. 
3
npm run build
Copied!
Memberships
Shuttle theme has full support for members feature of Ghost.
To enable a custom subscription plans page similar to the one created here, open up your Ghost dashboard and upload the custom routes.yaml file present in the theme folder. Once the file is uploaded you can visit /membership/  to see the page. 
Search
To activate the search follow these steps: 
Step 1: Edit default.hbs file
Open up the default.hbs file in theme.
1.
Look for the following code snippet at the end of the file: 
1
let siteSearch = new GhostSearch({
2
    key: '2225101d563aedec7edd20f7ce', // This is just a demo key. Replace the key with a real one. See Step 3.
3
    host: 'https://shuttle.stylesheets.dev', // This is just a demo host. Replace the host with a real one. See Step 3.
4
    input: searchInputField,
5
    results: resultsContainer
6
});
Copied!
2.
Update the values in key and host. To get the key and host values, you need to create a custom integration in Ghost. Once you create it, you'd get the Content API Key, and API URL.  
Step 1
Step 1: Final result 
Step 2: Edit header.hbs file
Open up the partials/header.hbs file and uncomment the following lines of code
1
{{!-- Search: Mobile --}}
2
{{!-- 
3
<button onclick="toggleSearch()" class="header-search icon">
4
	{{> "icons/search"}}
5
</button>
6
--}}
Copied!
1
{{!-- Search: Desktop --}}
2
{{!-- 
3
<div class="search">
4
	<button onclick="toggleSearchInNav()" class="icon">
5
		{{> "icons/search"}}
6
	</button>
7
	<input id="nav-search-field" class="" placeholder="Search" autocomplete="off" />
8
	<div class="nav-search-results" id="nav-search-results"></div>
9
</div> 
10
--}}	
Copied!
Step 2
Step 2: Final result
That's it. You can now zip the theme folder and upload it to your site. 
Editor's Pick Section
The featured posts will be shown in the editor's pick section. 
Note: Editors' Pick section will remain invisible if you have no featured posts.
Disqus Comments
To enable disqus comments on the theme, follow these steps: 
1.
Open up the post.hbs file in any text editor.
2.
Look for the comments section.
3.
Add the following code snippet in the comments section.
1
   <h1 class="comments-header">Comments</h1>
2
   <section class="post-comments">
3
     <div id="disqus_thread"></div>
4
     <script>
5
         var disqus_config = function () {
6
             this.page.url = '{{url absolute="true"}}';
7
             this.page.identifier = 'ghost-{{comment_id}}';
8
         };
9
         (function() {
10
             var d = document, s = d.createElement('script');
11
             s.src = 'https://<YOUR DISQUS SHORTNAME>.disqus.com/embed.js';
12
             s.setAttribute('data-timestamp', +new Date());
13
             (d.head || d.body).appendChild(s);
14
         })();
15
     </script>
16
   </section>
Copied!
4.
Don't forget to modify the s.src = 'https://<YOUR SITE'S DISQUS SHORTNAME>.disqus.com/embed.js'; to your disqus url.
Add Social Media Icons
Icons for Facebook and Twitter are already implemented in the code. To activate icons for other social networks, insert the following code snippets in the respective files.
In Footer.hbs
1
<a href="" target="_blank">
2
   {{> "icons/dribbble"}}
3
</a>
Copied!
In Author.hbs
1
<a class="link-with-svg" href="" target="_blank" rel="noopener">
2
      <span class="link-svg">
3
      {{> "icons/dribbble"}}
4
      </span>
5
      <span class="link-text">Dribbble</span>
6
</a>
Copied!
Icons for Behance, Dribbble, 500px, Github, Gmail, Instagram, Linkedin, Medium, Pinterest, Reddit, RSS, Tumblr, & Youtube are included in the theme. If you require more icons, you may visit Simple Icons and download the required icons.
Links
​Demo / Purchase​
Sublime
Changelog
Last modified 4mo ago
Copy link
Contents