JS and CSS utilities for Ghost themes
npm install ghost-theme-utilsEasily add Ghost functionality to custom themes.
See the blog article
Everything you need to know about subscription forms in Ghost
for a detailed explanation.
* Base functional styles and javascript for subscribe forms.
* Message overlays e.g. for 'Thank you' pages after contact form submission.
* Generic Koenig styles - inclusion of _koenig.scss passes gscan.
Styles include the source SCSS files in addition to generated CSS.
You can see this package in action in the following ways.
* https://getmindspun.github.io/ghost-theme-utils/
This is the easiest way to explore the functionality provided by this package.
* https://demo.ghoststead.net/
``html
`
`html
defer>
`
The packaged version of the CSS also contains the CSS
from bootstrap-avatar. Usage of the above CDN does NOT require either
Bootstrap or jQuery.
The SCSS sources files may be included in a custom build as usual:
`scss`
@import "node_modules/ghost-theme-utils/scss/subscribe"
Or you can use the standalone files from the dist/ directory.
Technically you may add these file only on specific pages, but generally they are included in default.hbs
Here's how to get started using the subscription support in your theme.
You need to add HTML to the theme to show the message both on email confirmation failure and error:
`html
These messages use Bootstrap classes for styling, but that isn't required.
$3
During development, the easiest way to test is to navigate to the following URLs on your site:
Success : /?action=subscribe&success=true
Failure : /?action=subscribe&success=false
If all is working, you should see the corresponding message.
Of course, one deployed, test using the real subscription mechanism in Ghost.
Forms
Here's how to integrate a contact form into your theme. Contact forms are the most common usage, but this methodology
works with any type of form you want to use.
$3
html
`
This example is the contact from
Mindspun form handler, but any form service will do. The important thing is to redirect
the user to the anchor #thank-you after form submission.
In this example, the user would be redirected to .$3
After the form is submitted, a confirmation message is shown as an overlay. The first step is to add the HTML for the
message to the page where you redirect the user. Don't include the HTML
in the page containing the form (unless they are the same page). For example,
if your form lives at
and you return the user to your
home page at / after form submission, then this HTML must be included in the home page.`html class="bg-white d-flex flex-column justify-content-center align-items-center position-fixed top-0 bottom-0 start-0 end-0 overlay">
href="javascript:window.location.href=/^[^?#]+/.exec(window.location.href)[0]">
Thank you
The small amount of Javascript in the link simply removes the anchor tag from the URL - in this case #thank-you. For
example if the page URL is
which causes the overlay to be shown, then clicking the close button
will send the user back /.
$3
You can test style of the 'thank-you' page by navigating to anchor directly.
From the above example, click on and
you'll see the contact form 'thank you' messages without actually
submitting the form.
Development
`
npm run dev
---
This repository is maintained by Mindspun.