Installation
This document assumes you have some basic knowledge of how Jekyll works, more information can be found here.
On the theme folder there's a folder called _site, upload the content inside of it on your site (not the folder, the content inside). If you want it as a blog within an existing site, create a subdirectory and upload it there, for example: /blog.
To make changes locally this theme already comes with a Grunt file that creates a server, compiles Sass and builds the site. Using the command line tool these are the 2 steps required:
grunt serve
This will create a server on localhost:4000. Now open a new window on the console and type:
grunt
Customize
The options to configure the theme are found in _config.yml
Site settings
- title:
- This is the title of the index, each page and post has one that can be customized.
- description:
- The meta description for the index.
- baseurl:
- The subpath of your site, e.g. /blog/
- url:
- "http://yourdomain.com" the base hostname & protocol for your site
- logo_url:
- the path to your logo
Hero section
- hero_img:
- the file name of the hero image
- hero_title:
- Heading of the caption
- hero_description:
- paragraph of the caption
Contact info
- phone:
- Phone number. If it's left blank, the field will not be displayed
- emergency:
- Emergency phone number. If it's left blank, the field will not be displayed
- email:
- Email address. If it's left blank, the field will not be displayed
- address:
- Address
Opening hours
- monday_friday:
- opening hours for monday-friday
- saturday:
- Opening hours for saturday
- sunday:
- Opening hours for sunday
Testimonials
- testimonials_img:
- the path to the testimonials section background image
Google Map
- zoom:
- Zoom setting on the map
- address:
- write the address for the map here
- address_details:
- path to the image on the marker popup
Social settings
The links to your accounts on social platforms. If it's left blank, the icon will not be displayed
Footer settings
- copyright:
- The copyright text for the footer
Theme settings
- analytics:
- Your Google Analytics Tracking ID, if left empty, the code will not be displayed
- google_verification:
- Your Google verification code. if left empty, the code will not be displayed
Data files
In addition to the built-in variables available from Jekyll, you can specify your own custom data that can be accessed via the Liquid templating system.
This powerful feature allows you to avoid repetition in your templates and to set site specific options without changing _config.yml.
This theme uses data files to add team members, treatments, testimonials and gallery images
Team members
you can edit and add each team member in _data/team.yml
- name: Dr Perry
image: team-member.jpg
email: email@gmail.com
phone: 9659 43 21
Testimonials
you can edit and add each testimonial in _data/testimonials.yml
- name: Jeff Winger
description: I teach law at Greendale, so believe me, I don't know much about law.
title: Law Professor - Greendale
Treatments
you can edit and add each treatment in _data/treatments.yml
- icon: icon-user-md
title: Invisible braces
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam minima, itaque molestiae ut ratione unde?
Gallery
you can edit and add each gallery item in _data/gallery.yml
- image_thumb: gallery1.jpg
image_large: gallery1.jpg
image_alt: Something meaningful
Icons
This theme comes with 40 svg icons:
How to use them:
<svg class="icon icon-commenting-o"><use xlink:href="#icon-commenting-o"></use></svg>
Contact form setup
This theme uses Simple Form. Visit the site, enter your email on the large text field and when submitted it will send you an API token. Go to the _config.yml and paste that code in the api_token field.
In the same email, there's a link where you can see all of your messages.
Other Configurations
Google analytics
Once you have created an account and have the ID code you can type it in the required field in the _config.yml file.
Credits
Images used for team members: https://www.flickr.com/photos/astragony/