Scrawl: A fully responsive theme for Ghost

Features include:

• Fully responsive, mobile first design
• Automatic estimated reading times for each post
• Easily configurable social links, without messing around with the server
• For dev blogs: includes Prism to style your code snippets
• Inbuilt search for the blog
• Alert and notification through backtick code block

See the screenshots below.

The theme is compatible with Ghost V3.x and checked against the comparison tool:

How to install

Get the .zip file for the latest version from original author here or this modified version with search and other added enhancements here

Ghost(Pro) users can upload this .zip file via the Pro dashboard. See the official guide.

Self-hosted Ghost users should upload the .zip file to Ghost's content/themes/ directory and extract it with unzip -o scrawl-master.zip

or alternatively

Self-hosted Ghost users can upload the theme by uploading the zip file from front end admin: Settings -> Design and click on "Upload Theme".

Configuration

Scrawl adheres to the Ghost Theme Configuration Approach, allowing you to add your own social media links to pre-formatted buttons without touching your website's server.

The configuration for Scrawl uses the code injection interface, which you will find at yourwebsite.address/ghost. Each social network or profile that you want to add, requires only one line adding to the blog header code injection.

This configuration approach is designed to be as easy for the user as possible, but if you have any problems then please don't hesitate to get in touch with me!

Social media links

Scrawl supports a range of social media platforms. When configured, a button will appear for each platform in the footer that appears on each page of the theme.

Below is the list of the social media platforms currently supported. Choose the ones that you would like to include on your blog and copy the code. Then, replace the ... with your username for that platform. Remember to keep the speech marks!

For example, if I wanted to add a link to my twitter profile to a blog using scrawl I would simply put

<script>window.__themeCfg.twitterUsername = 'ktweeden';<script>

---

Copy and paste the relevant links to the blog header code injection box:

bitbucket: <script>window.__themeCfg.bitbucketUsername = '...';</script>

codepen: <script>window.__themeCfg.codepenUsername = '...';</script>

facebook: <script>window.__themeCfg.facebookUsername = '...';</script>

github: <script>window.__themeCfg.githubUsername = '...';</script>

instagram: <script>window.__themeCfg.instagramUsername = '...';</script>

pinterest: <script>window.__themeCfg.pinterestUsername = '...';</script>

tumblr: <script>window.__themeCfg.tumblrUsername = '...';</script>

twitter: <script>window.__themeCfg.twitterUsername = '...';</script>

vine: <script>window.__themeCfg.vineUsername = '...';</script>

youtube: <script>window.__themeCfg.youtubeUsername = '...';</script>

linkedin: <script>window.__themeCfg.linkedinUsername = '...';</script>

googleplus: <script>window.__themeCfg.gplusUsername = '...';</script>

Disqus

Scrawl comes with the Disqus commenting platform so that you can easily manage interactions with your readers.

To enable commenting:

• make sure that you have an account on Disqus.
• Create a "channel" for your blog using Disqus's website. This channel will hold all of the comments for your blog.
• Copy the following code into the blog header code injection, replacing ... with your channel's name (no spaces!).

<script>window.__themeCfg.disqusUsername = '...';</script>

Scrawl in action

Enough talk, here are some pictures.

Home page

Post

Tablet

Mobile

Inbuilt Search for blog

The above search box will be enabled by default on the theme but for it to work, you will need to create a custom integration. You can do so by folling the steps below:

• Open the Integrations screen in Ghost admin panel
• On the integrations screen, click on Add Customer integration and give the integration the name ghosthunter
• Copy the Content API Key from the created integration.
• Now open the Code Injection screen and in Site Header section add the code as shown in screen blow and where use the content API Key from previous step and put it against the variable ghosthunter_key and then click on Save.

Alerts and Notes

Theme has inbuilt CSS which allows to have alert and note boxes as shown in above screenshot using the simple backtick wraparound. For example above boxes were created using the following markdown: