Receive Product Updates In Your Inbox

Lite Helpdesk Jekyll Theme

Table of contents


Install the dependencies with Bundler:

bundle install

Run the following to generate your site:

bundle exec jekyll serve

You can find more on Deployment Methods page on Jekyll website.

Google analytics

To enable Google Anaytics, add the following lines to your Jekyll site:

  google_analytics: UA-NNNNNNNN-N

Google Analytics will only appear in production, i.e., JEKYLL_ENV=production

Updating favicon

You can find the current favicon (favicon.png) inside the theme /assets/img/ directory, just replace it with your new favicon.

Home Page

To create a home page, just create a file inside the root directory. The following is a YAML Front Matter example for a page:

layout: home
  title: How Can We Help?
  title: Didn't find an answer to your question?
  button_text: Contact Us   
  button_url: /contact/
filter: true

Home page category boxes are added in _data/navigation_home.yml, e.g.:

- title: Getting Started
  desc: Get your account up and running in just few easy steps
  icon: settings
  doc: usage

- title: Account and Billing
  desc: Managing your account, creating new users and exporting data
  icon: credit-card
  doc: drafts

All available icons can be found here.

Support Posts

Create new support post entries in _support folder, similar to creating posts, only the title is required in front matter:

title: Category hosting Setting up new domain and page

Adding Table of contents

Add the following to the front matter of the support post:

toc: true

Changelog page

Create new page with the following front matter:

layout: changelog
title: Changelog
permalink: /changelog/

Changelog enties are added in _data/changelog.yml:

- title: Version 0.6.0
  date: Aug 15, 2017
  - Added style support for radio and checkbox in Firefox
  - Removed class from Section component

Contact Form (via FormSpree)

To display Google map on contact page, add the following in your page content, replacing latitude, longitude and zoom values:

Submit the form and confirm your email address at FormSpree. Then add the following include to a page, replacing the email address:

  <form class="uk-form-stacked uk-margin-large-top" method="POST" action="" accept-charset="UTF-8">
      <div class="uk-margin-medium-bottom">
          <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Name</label>
          <div class="uk-form-controls">
              <input class="uk-input uk-form-large uk-border-rounded" name="name" type="text" required>
      <div class="uk-margin-medium-bottom">
          <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Email</label>
          <div class="uk-form-controls">
              <input class="uk-input uk-form-large uk-border-rounded" name="_replyto" type="email" required>
      <div class="uk-margin-medium-bottom">
          <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Subject</label>
          <div class="uk-form-controls">
              <input class="uk-input uk-form-large uk-border-rounded" name="_subject" type="text">
      <div class="uk-margin-medium-bottom">
          <label class="uk-form-label uk-margin-small-bottom" for="form-stacked-text">Message</label>
          <div class="uk-form-controls">
              <textarea class="uk-textarea uk-form-large" name="message" rows="5" minlength="10" required></textarea>
      <div class="uk-text-center">
          <input type="hidden" name="_next" value="">
          <input type="text" name="_gotcha" style="display:none">
          <input class="uk-button uk-button-secondary uk-button-large tm-button uk-border-rounded uk-box-shadow-medium" type="submit" value="Send">


Google Map

To display Google map on contact page, add the following in your page content, replacing latitude, longitude and zoom values:

<div id="map" class="uk-width-1-1 uk-height-large uk-margin-large-top"></div>
  window.mapData = {"latitude": 40.6700,"longitude": -73.9400, "zoom": 16};

  var lightStyles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]

  function initMap() {
    var myOptions = {
      scrollwheel: false,
      //draggable: false,
      panControl: false,
      disableDefaultUI: true,
      zoom: window.mapData.zoom,
      maxZoom: window.mapData.zoom,
      minZoom: window.mapData.zoom,
      center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: lightStyles

    var map = new google.maps.Map(document.getElementById('map'), myOptions);

    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
      icon: {
          url: "/assets/img/location.svg",
          size: new google.maps.Size(28, 38),
          scaledSize: new google.maps.Size(28, 38)

    google.maps.event.addDomListener(window, 'resize', function() {
<script async defer src=";callback=initMap"></script>


To keep things more organized, add post images to /assets/posts/ directory, and add theme images to /assets/img/ directory.

To add an image to a post or page use the following: Local image from /assets/posts/ directory:

    <img src="" alt="Alt for image">
    <figcaption data-uk-grid class="uk-flex-right"><span class="uk-width-auto">Girl on a rock</span></figcaption>

External image in lightbox:

<figure data-uk-lightbox="animation: slide">
    <a class="uk-inline lightbox" href="" caption="Image in lightbox">
        <img src="" alt="Alt for image">
        <div class="uk-position-center">
            <span data-uk-overlay-icon></span>
    <figcaption data-uk-grid class="uk-flex-right"><span class="uk-width-auto">Image in lightbox</span></figcaption>


Embed local videos:

<video controls playsinline uk-video="automute: true">
    <source src="" type="video/mp4">
    <source src="" type="video/ogg">

Embed YouTube videos:

<iframe src=";showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="600" height="340" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>


Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each blog post. To enable it, add the following lines to your Jekyll site:

    shortname: my_disqus_shortname

You can find out more about Disqus’ shortnames here.

Comments are enabled by default and will only appear in production, i.e., JEKYLL_ENV=production. If you don’t want to display comments for a particular post you can disable them by adding comments: false to that post’s YAML Front Matter.


Install UIkit font end framework dependency via Npm:

npm install

Enable live browser reload with the following:

bundle exec jekyll s --livereload


To modify the primary color, open /_sass/theme/variables.scss and replace the color values e.g.:

// Primary color
$tm-primary-color: #0089ff;
// Body background
$tm-body-background: linear-gradient(to top, #0065fd 0%, #0089ff 100%);

Further style customisation can be done in the following files:



  • Google analytics
  • Google maps
  • UIkit front end framework
  • Jekyll
  • FormSpree


Depending on where you purchased the product, contact us:

  • Creative Market: Contact us through “Ask a question” button on the products page on Creative Market
  • Gumroad: The purchase receipt contains our contact email address

Customer support is provided for up to six months from the purchase date and is provided Monday to Friday during the business week. We aim to answer all support requests daily, most are handled within 24h.

Before contacting support please:

  • Read this documentation
  • Describe your problem in detail
  • Include links
  • Attach screenshot

Need More Help?

Receive Product Updates In Your Inbox