REACH Themes Overview

REACH provides a fully-functional theming engine to give organizations even more capabilities to customize the style and design of their portals.

The theme functionality is based on the Liquid Templating language which has been used extensively since it was released in 2006 by organizations like Shopify, Adobe Business Catalyst, Zendesk, Desk.com, Octopress, GoDaddy, and many other services.

Liquid is a templating language that gives designers the ability to create beautiful custom page designs and email templates. Designers can use HTML, CSS, and Javascript alongside Liquid objects to build out pages and email templates. However, it does not create a security threat by giving access to the underlying code.

Structure

There are four main components to building a theme in REACH: the layout file, template files, partials, and assets.

Layout

The layout contains everything surrounding the individual pages of your portal. Items like the menu, header, and footer should be placed in the layout. Then use the liquid tag {{ content_for_layout }} to display the templates in the layout for the different portal pages. An example can be viewed in the Appendix.

Templates

Each page and email in the REACH portal is based on a template in your theme. For example, your campaign page is now based on the layout file and the “Campaign” template. 

Partials

A partial is a snippet of HTML and Liquid code that can be accessed in multiple templates or the layout.

Assets

Assets are all of the other files associated with your theme. These include CSS files, JavaScript files, images, and any other files needed to display your portal. Assets can be referenced using Liquid tags:

Theme javascript asset tag

Example - For a theme asset example.js: {% javascript_tag | example %} returns:

<script src="example.js" type="text/javascript"></script>
Theme stylesheet asset tag

Example - For a theme asset example.css: {% stylesheet_tag | example %} returns:

<link href="example.css" media="all" rel="stylesheet" type="text/css" />
Generic theme asset url tag

Example - For a theme asset example.jpg {% asset_url_tag  | example.jpg %} returns the URL to the file which can be used in any HTML tags:

<img src="{% asset_url_tag  | example.jpg %}">


Feedback and Knowledge Base