Outreach Jekyll Theme Documentation

Latest Version: 1.0.0

Introduction


Outreach is a Charity & Nonprofit Jekyll Theme, that is designed specifically for donation system, non-profit events, fund raising, crowdfunding campaigns for cause or charity group/organization , call for volunteers, vision and mission page, and many more.

Thank you for purchasing the theme. We provide support for all of our themes at https://support.thescube.com/, but please make sure you read this documentation in it’s entirety first. Thanks again!

Theme Installation


Installing The Theme

Plugins


Installed Plugins

Note: Required Plugins are Mandatory. The theme will not work properly, if its not installed & activated.

Configuration Options Setup


We can make the Configuration Setup in _config.yml file.

Basic Settings

title: Outreach - Charity & Nonprofit Jekyll Theme
description: >-  # this means to ignore newlines until "baseurl:"
The theme is built on Jekyll and Bootsrap. It includes various modules and easily configurable settings to build your website on. Download Jekyll Theme as Static Site Generator.

Logo And Favicon Settings

This section has options to setup Logo & Favicon.

# Logo & Favicon Settings
logo: /assets/images/outreach/Group_3.png  # Use logo icon here
logo-width: 150px  # Use logo width here (default 150px)
favicon: /assets/images/siteicon.png  # Use favicon here

Font Settings

This section has options to setup Font for your site.

Add the style sheet for your font here.

# Font settings
font:
- font-style-url: https://fonts.googleapis.com/css?family=Open+Sans&display=swap  # Use font url here.
- font-style-url: https://fonts.googleapis.com/css?family=Cardo&display=swap  # Use font url here.

Header Settings

This section has options to setup the header navigation menu for your site.

# Header Settings
header-layout: header-1  # Use options header-1, header-2
header-widget: true  # Use options true or false
header-social-icon: true  # Use Options true or false
login-text:   # (used in header-1 layout)
login-url:   # (used in header-1 layout)
signup-text: Donate Now  # (used in header-1 layout)
signup-url: "#"  # (used in header-1 layout)
telephone: 0431-450112  # Use telephone number (used in header-2 layout)
email: info@example.com # Use email id (used in header-2 layout)
working-hours: 9 am to 5 pm # Use Working-hours (used in header-2 layout)
# Footer-columns
laptop: 4  # Use Options 1,2,3,4,6  Default: 3
tablet: 2  # Use Options 1,2,3,4 Default: 2
mobile: 1  # Use Options 1,2 Default: 1

Footer copyright credits can be used here

# Copyright Settings
copyright-content: true  # Use Options true or false
copyright-logo:  # Enter the copyright logo path
copyright-text: © 2020 Outreach. All Rights Reserved.  # Enter the copyright content for your website
copyright-social-icon: true  # Use Options true or false

Post Settings

This section has settings for post options.

# Post Settings
# - Individual Post
post-layout: full-width  # Use options left-sidebar, right-sidebar, full-width
post-meta: true  # Use options true or false
social-share: true  # Use options true or false
social-share-type: type-1  # Use options type-1 or type-2

Collection

This section has setting for the collection.

#Collections
collections:
  causes:
    output: true
    permalink: /causes/:path/
    title: Causes
  events:
    output: true
    permalink: /events/:path/
    title: Events

Pagination Settings

This section has basic setting for the pagination.

# Pagination Settings
pagination:
  enabled: true  # Use options true or false
  per_page: 6  # Use number of post per page
  permalink: '/page/:num/'  # Use pagination permalink here
  title: ' - page :num'  # Use pagination title  here
  limit: 0  # Use pagination limit here
  sort_field: 'date'  # Use  sort_field options here
  sort_reverse: true  # Use options true or false

Archive Settings

This section has basic setting for the Archive.

#Archive settings
jekyll-archives:
  enabled:
    - categories
  layout: archive
  permalinks:
    category: /category/:name/


How to Create Menu

# menu version 1.0.0
menu:
- title: Home  # Use header title here
  href: /  # Use header title url here
- title: Blog  # Use header title here
  href: /post-archive-thumbnail/   # Use header title url here
  megamenu: megamenu-5
- title: drop down  # Use header title url here
  href: "#" # Use header title url here
  option:
    - title: Item #  Use subdropdown title here
      href: "#"  # Use subdropdown url here
    - title: Item #  Use subdropdown title here
      href: "#"  # Use subdropdown url here
      option:
        - title: Item #  Use subdropdown title here
          href: "#"  # Use subdropdown url here
        - title: Item #  Use subdropdown title here
          href: "#"  # Use subdropdown url here

This yml’s value will be used on {% include do-header-1.html %} and this do-header-1.html is included on the layout.

/assets/images/outreach/jek-doc-12.png

footer-copyright:
- copyright-links:
    - title: Home  # Use footer-copyright links name here
      href: /  # Use footer-copyright links url here
# footer version 1.0.0
footer:
- title: About Outreach  # Use footer title here
  option:
    - title: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.  # Use footer option links name here
      href:  # Use footer option url here
      icon:  # Use footer option icons here
    - title: abc@gmail.com  # Use footer option links name here
      href: mailto:abc@gmail.com  # Use footer option url here
      icon: <i class="far fa-envelope"></i>  # Use footer option icons here
    - title: 0987654321  # Use footer option links name here
      href: tel:0987654321  # Use footer option url here
      icon: <i class="fas fa-phone"></i>  # Use footer option icons here
- title: Quick Links  # Use footer title here
  option:
    - title: Blog  # Use footer option links name here
      href: /post-archive-thumbnail/  # Use footer option url here
      icon:  # Use footer option icons here
    - title: Documentation  # Use footer option links name here
      href: /documentation/  # Use footer option url here
      icon:  # Use footer option icons here

Collection Setup

How to add content

Causes
layout: do-cause-layout
title: Fundraising Orphanages
categories: causes
image: /assets/images/4by3/portfolio-jekyll-theme.jpg
causes-date: 2020-02-28
donate-link: "#"
Events
layout: do-event-layout
title: Annual Charity
company: events
categories: events
tags:
  - lorem
  - lorem
  - lorem
image: /assets/images/4by3/jekyll-github-pages-themes.jpg
location: Rise London. 41 Luke Street, London, EC2A 4DP
event-date: 2020-02-28
event-time: 02:30 PM - 04:00 PM
ticket-link: "#"
gradient-color: green

Includes

Login

Description

Login is an include form which consist of a user name and password, which can be embeded anywhere in the page for authentication purpose.

/assets/images/outreach/jek-doc-15.png

How to add on page

Signup

Description

Signup is an form which can be embeded as a user register form on any page.

/assets/images/outreach/jek-doc-17.png

How to add in page

Forgot Password

Description

Forgot Password is an form used to get a code incase of forgetting password for an existing user, which can be embeded anywhere in the page as include.

/assets/images/outreach/jek-doc-13.png

How to add on page

Call To Action

A call to action (CTA) is a prompt on a website that tells the user to take some specified action. A call to action is typically written as a command or action phrase, such as ‘Sign Up’ or ‘Buy Now’ and generally takes the form of a button or hyperlink. In digital marketing this can take the form of the text on a button (a CTA button) or a web link and in email campaigns CTAs are often links to a web page where the user can take further action.

/assets/images/outreach/jek-doc-21.png

Available Options
Call to Action with button aligned right

Code:


{% include do-call-to-action.html tag="modules" button-alignment="right" %}

How to add content
- title: Join the Static Site Generator/SSG revoloution by geting our jekyll theme  # Use call to action title here
  description:  # Use call to action description here
  button:
    - name: Buy Now  # Use call to action button name here
      href: "#"  # Use call to action url path here
  tag: modules # Use call to action tag here
How to add in page:
Description

/assets/images/outreach/jek-doc-18.png

How to add content
- title:  # Use carousel title name here
  image: /assets/images/hero/jekyll-charity-theme.jpg  # Use carousel image here
  description:  # Use carousel description here
  button-text:  # Use button text here
  href: "#" # Use carousel href here
  tags: home  # Use carousel tag name here

- title:  # Use carousel title name here
  image: /assets/images/hero/jamstack-charity-theme.jpg  # Use carousel image here
  description:  # Use carousel description here
  button-text:  # Use button text here
  href: "#" # Use carousel href here
  tags: home  # Use carousel tag name here

How to add in page

Form

Description

Form is an html block which provides the user to contact the owner of the site with its available elements. This form is just a example one which you can embed on your site.

/assets/images/outreach/jek-doc-14.png

How to add on page

Hero Content

Hero Content contains two columns one with image and other with text.

/assets/images/outreach/jek-doc-20.png

Available Options
How to add content
- title: Drive impact faster and with confidence  # Use hero-content title here
  description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use hero-content description here
  image: /assets/images/platform/platform_module3.png  # Use hero-content image path here
  button:
    - button-name: read more  # Use hero-content button name here
      button-href: "#" # Use hero-content url path here
      icon-button-name: Learn More  # Use hero-content icon-button name here
      icon-button-href: "#"  # Use hero-content icon-button-url path here
  tag: samples  # Use hero-content tag here
How to add in page

Pagination

Description

Pagination is the sequence of numbers assigned to pages in a book. Each page can have multiple articles.

Inorder to use pagination, Enable pagination in _config.yml. Click here for more information.

/assets/images/outreach/jek-doc-16.png

How to add on page

Page Title

Description

/assets/images/outreach/jek-doc-19.png

How to add content
page-title:
  - enabled: true
    custom-title: Contact
    description: Habitant morbi tristique senectus et netus. Semper viverra nam libero justo laoreet sit amet. Sit amet massa vitae tortor condimentum lacinia quis vel eros.
    button-text:
    button-link:
    background-color:
    background-image: /assets/images/contact-banner-1.jpg
How to add in page

Post Archive Grid

This section displays a list of archive for blog post on the site in a grid style.

Code:


{% include do-post-archive-grid.html columns="3" %}

How to add content
pagination:
  enabled: true
  per_page: 8
  category:
  tags:
  trail:
    before: 1 # The number of links before the current page
    after: 1  # The number of links after the current page
How to add in page

Post Archive Masonry

This section displays a list of archive for blog post on the site in a masonry style.

Code:


{% include do-post-archive-masonry.html%}

How to add content
How to add in page

Post Archive Thumbnail

This section displays a list of archive for blog post on the site in a thumbnail style.

Code:


{% include do-post-archive-thumbnail.html%}

How to add content

Side Widget

Description

This section displays a variety of information to the right or left side of web page.

Sidewidget options
# side-widget version 1.0.0
side-widget:
  - recent-post: false  # Use true or false
    title: Marketing  # Use side-widget title here
    content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use side-widget content here
    image: /assets/images/sample.jpg  # Use side-widget image here
    image-alt: dummy  # Use side-widget image-alt here
    nav:  # Use side-widget nav name here
    megamenu:  # Use side-widget megamenu-type here
    newsletter: true  # Use true or false
    post-categories: true # Use true or false
    slab-text: true # Use true or false
    slab-text-content:  # This is the array for slab text
      - text: YOU CAN HELP  #  Use slab text line 1 here
      - text: SAVE  # Use slab text line 2 here
      - text: A LIFE  # Use slab text line 2 here
    testimonial: true  # Use true or false
    testimonial-title: Testimonial Card  # Use testimonial title here
    testimonial-content: This is a testimonial widget that will put a neat little notecard in your sidebar. Awesome!  # Use testimonial content her
    testimonial-name: Shovan  # Use testimonial name here
    testimonial-link-name: SCube Theme  # Use testimonial link name here
    testimonial-link-url: https://theme.scube.co/ # Use testmonial link url here
    widget-hours: false # Use true or false
    location-iframe:   # Use location iframe map here
    location: # Use business locaion here
    business-hours-monday: "9:00 am - 8:00 pm" #  Use business time for the day here
    business-hours-tuesday: "9:00 am - 8:00 pm" #  Use business time for the day here
    business-hours-wednesday: "9:00 am - 8:00 pm" #  Use business time for the day here
    business-hours-thursday: "9:00 am - 8:00 pm"  #  Use business time for the day here
    business-hours-friday: "9:00 am - 8:00 pm" #  Use business time for the day here
    business-hours-saturday: "10:00 am - 12:00 pm" #  Use business time for the day here
    business-hours-sunday: Closed #  Use business time for the day here
How to add in page

Social Share Buttons

This section contains the list of social media share button with its icons which can be embedded on to the site.

/assets/images/outreach/jek-doc-22.png

Available Options
How to add in page
# Post Settings
social-share-type: type-1  # Use options type-1 or type-2

Title

This section displays a title, description, a button with link and a bottom image section.

Code:


{% include do-title.html tag="thumbnail" %}

How to add content
How to add in page

Jekyll file directory


Note: To work with jekyll you should have a clear knowledge with jekyll directories and files.

Jekyll Directories

Jekyll Files

Troubleshoot