Smart | An elegant, free Ghost theme

My free Ghost theme, Smart :nerd_face:, is available for download (zip).

I have a demo site up with posts on how to customize the theme, and I’m also using it for my personal site. Releases, source code, and theme docs are available in the Github repo.

All the Styles

Features

  1. Performance & accessibility (a11y) forward
  2. Responsive design
  3. Integrated search
  4. Image zoom in posts
  5. Responsive tables in posts
  6. Lazy loaded images
  7. Share bar with ability to copy URL to clipboard
  8. Contact form (with Formspree)
  9. Easily remove all membership functionality
  10. Add extra social media accounts via the second navigation bar
  11. Custom tags page
  12. Dark mode switcher and toggle

Technical details

Smart Theme is compatible with >=Ghost v4. It supports the last 2 versions of browsers. It does not actively support IE.

Screenshots

Dark mode and light mode


11 Likes

Wow thumb up for you!

1 Like

Wow, this theme is great! Just installed it on my blog and will be keeping it around. THANKS!

1 Like

Very cool! Any way to unstick the menu bar so it scrolls with the res of the page?

So I’ve been playing with this theme for a day now, and I have two questions:

  1. Any way to enable Disqus comments?
  2. I’m trying to get the code syntax highlighting (Turn on Syntax Highlighting) to work. The code blocks work (very cool BTW) and HTML is highlighting properly, but Python and LaTeX are not highlighting at all. Example: Testing zone I have this line already in my site footer:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-python.min.js"></script>

This is possible by editing the theme’s S/CSS. The source code is available on my Github. I don’t plan to support this myself.

Glad you’ve been trying it out.

  1. It’s possible to enable Disqus comments by editing the theme’s Post template. I’ll also work on adding it for the next release. I’ll update this post when that change has been made.
  2. For syntax highlighting for additional languages, you’ll need to substitute the Javascript snippet with the relevant one from Prism. (I’m assuming, btw, that you used the instructions on the demo site to get set up.) On Prism, you can choose the languages you want to support. At the bottom of the page, it’ll give you the JS and CSS. You should be able to copy/paste the JS via code injection to get syntax highlighting working on Python, LaTex, etc. For the CSS, it should work with the existing code, unless you want to change the theme.
  3. Finally, I was checking out your site, which looks great, if I do say so myself. (I’m also in academia–philosopher by training), and I noticed some formatting issues because some of the content was either written in Markdown/HTML. This specifically affected images and embeds. These should be fixed with the latest release, so I encourage you to update.
1 Like

Thanks! Updating complete. I’ll keep at the other two items.

Here’s a method to add Disqus comments without modifying theme files. Will work on a more permanent solution in the future

Add the following to your global code injection footer. If anything’s wonky, let me know.

<script>
  // Are we on a post?
  const postTemplate = document.querySelector('.post-template')

  if (postTemplate) {

  // Get dom
  const parent = document.querySelector(".sm-inner-container")
  const ref = document.querySelector('.sm-post-footer')

  // Build comment el
  const commentSection = document.createElement('section')
  commentSection.setAttribute('class', 'sm-comment')
  const comments = document.createElement('div')
  comments.setAttribute('id', 'disqus_thread')
  commentSection.append(comments)
    
  // Add el to page
  parent.insertBefore(commentSection, ref)

  var d = document, s = d.createElement('script')
  s.src = 'https://REPLACE_WITH_YOUR_SHORTNAME.disqus.com/embed.js'
  s.setAttribute('data-timestamp', +new Date())
  (d.head || d.body).appendChild(s)
 }
</script>

That didn’t appear to do anything – after putting it in the footer and adding my shortname, no comment boxes appear (See for yourself: https://rtalbert.org)

Sorry. You need to put https:// before your shortname. That should fix it.

Sorry, still nothing. Did a restart of Ghost too.

Ugh. I don’t see anything immediately amiss. I ran the script on your site and it worked (see screenshot). My intuition is that it may be in conflict with another script you’re injecting. If you move the code to the top of your injection stack, does it make a difference?

1 Like

I moved it to the top of the Site Footer code but comments still didn’t show up. I’m assuming you mean this, and not moving it to the site header. I also went through and deleted scripts already in the footer one at a time and then reloaded a post, but the comments never appeared.

Here’s the current contents of the site footer: rtalbert.org site footer · GitHub

I’m happy to switch this over to email, too, if it’s getting too niche here on the forum.

This is fantastic work and I’m going to be using this for a while! Just a question - I’d like to make the featured post image ‘full width’ much like it is on the homepage. How would I go about doing that? Furthermore, Is it possible to have the title over this image? Here’s an example:
New York City (eduardochiaro.com)

Glad you like it. At present, there’s no good way to do that because of how the image is optimized for the template. I’ll toy around with making a custom template with full size image.

This theme looks fantastic and the fact that you are giving it away for free is very generous of you. Thank you so much, @theroyalfig!

awesome

Hope you’re doing well TheRoyalFig - just a quick question if I may. How do I go about increasing the width for blog posts when viewing on a computer?

Hi :wave:

By design, blog posts are capped at a max-width of 600 px to encourage an optimal line length of 45-90 characters.

That being said, it’s easy to increase/decrease that maximum. Add the following snippet to your Site Header (under Settings > Code Injection). You can adjust the value up or down as you see fit. Here, the width has been increased by 200 px.

<style>
.sm-post {
    max-width: 800px;
}
</style>

Hey all! Smart 2.0 is now available.



Source code: GitHub - royalfig/smart: A theme for the open source Ghost CMS.

1 Like