Table of contents
- Installation
- Build process
- Site and author details
- Update favicon
- Navigation
- Translation
- Alerts
- Google Anaytics
- Disqus Comments
- Call to Action
- Contact Forms
- Header
- Sources
- Support
Installation
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.
Build process
Install UIkit font end framework dependency via Npm:
npm install
Enable live browser reload with the following:
bundle exec jekyll s --livereload
Use the following commands to compile js scripts:
npm run dev
Compile and minify:
npm run build
Sass
To modify the primary color, open /_sass/theme/variables.scss
and replace the color values e.g.:
$global-primary-background: #30aabc;
Further style customisation can be done in the following files:
/_sass/theme/mixins.scss
/_sass/theme/variables.scss
/assets/css/main.scss
Hooks
There are four hook inlude files that simplify adding content or scripts in the theme locations:
_includes/hook-head.html
_includes/hook-pre-closing-body.html
Site and author details
Add your site and author details in _config.yml
:
# Site title and description
title: Viju
description: Customer helpdesk Jekyll theme.
lang: en
# Site subpath, e.g. /blog
baseurl: ""
# Permalink URLs structure, for permalink style options see: https://jekyllrb.com/docs/permalinks/
permalink: /:categories/:title/
# Site base hostname & protocol, e.g. http://example.com
url: ""
# Site logo # e.g. logo.png, upload logo image file to /uploads/ folder
logo:
# Default author settings
author:
name: Pete Seth
title: Lead Developer
avatar: avatar-tom.png
Update favicon
You can find the current favicon (favicon.png) inside the theme /uploads/
directory, just replace it with your new favicon.
Navigation
Set in the main navigation links in _data/navigation_header.yml
:
- title: About
url: /about/
To add a button to navigation use:
- title: Contact
url: /contact/
button: success
All available buttons:
- title: Changelog
url: /contact/
button: default
- title: Contact
url: /contact/
button: primary
- title: Changelog
url: /contact/
button: secondary
- title: Contact
url: /contact/
button: danger
- title: Changelog
url: /contact/
button: success
- title: Contact
url: /contact/
button: warning
- title: Changelog
url: /contact/
button: primary-outline
- title: Contact
url: /contact/
button: danger-outline
- title: Changelog
url: /contact/
button: success-outline
- title: Contact
url: /contact/
button: warning-outline
Translation
Set your language code in _config.yml
:
lang: en
Theme strings can be translated in _data/translation.yml
, copy the current English translation and paste it bellow the Eglish translation, then replace en
with you language code that you set in _config.yml
and translate the strings.
en:
previous: "Previous"
next: "Next"
related_posts: "Related Posts"
written_by: "Written by"
share_twitter: "Share on Twitter"
share_facebook: "Share on Facebook"
search_placeholder: "Search for answers"
search_no_results: "No results found"
mobile_nav_site: "Menu"
contact_name: "Name"
contact_email: "Email"
contact_subject: "Subject"
contact_message: "Message"
contact_send: "Send"
Alerts
There are four alert styles:
{% include alert.html style="primary" text="Cras at dolor eget urna varius faucibus tempus in elit." %}
{% include alert.html style="success" text="Cras at dolor eget urna varius faucibus tempus in elit." %}
{% include alert.html style="warning" text="Cras at dolor eget urna varius faucibus tempus in elit." %}
{% include alert.html style="danger" text="Cras at dolor eget urna varius faucibus tempus in elit." %}
Google Anaytics
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
Disqus Comments
Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post. To enable it, add the following lines to your Jekyll site:
disqus:
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.
Call to Action
To add the following to a page:
{% include cta.html title="Didn't find an answer?" button_text="Contact Us" button_url="/contact/" subtitle="Get in touch with us for details on setup and additional custom services pricing" %}
Contact Forms
Formspree
Submit the form and confirm your email address at FormSpree. Then add the following include to a page, replacing the email address:
{% include formspree.html email="my_name@gmail.com" redirect="/thanks/" name="true" subject="true" %}
Kwes
Create the form at Kwes. Then add the following include to a page, replacing the key attribute with a one from you Kwes form:
{% include kwes.html key="00000" redirect="/thanks/" name="true" subject="true" %}
Header
To add a hero header to home and category pages add the following to _config.yml
file:
---
header:
image: header.jpg
background: "rgba(0, 0, 0, 0.5)"
color: light
title: How can we help you?
subtitle:
search: true
---
Sources
- Google analytics https://www.google.com/analytics/
- UIkit front end framework https://getuikit.com/
- Jekyll CML https://jekyllrb.com/
Support
Customer support is provided through our Envato item support tab 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.
Please note items downloaded from Envato Elements are not supported so you will be unable to get assistance with technical questions, installation, third-party assets or direct guidance.
Before contacting support please:
- Read this documentation
- Describe your problem in detail
- Include links
- Attach screenshot