Quartz Theme Overview

The Quartz Theme allows you an easy way to customize your REACH site for your organization's needs. When editing and updating REACH Themes, a basic knowledge of HTML and CSS is recommended. 

The Quartz Theme is based on Bootstrap 3, you can find documentation here: https://getbootstrap.com/docs/3.3/css

Quartz Theme Customization Options 

Layout Template

The Layout Template will allow you to make updates to the main container of your website including the Navigation Area, Main Container, and Footer Area. Most basic customization needed will not involved the Layout Template.

Index Template

The index is the Home Page of your REACH Website. The template defaults to show all sections including:

HOME PAGE HERO IMAGE - default
HOME PAGE HERO IMAGE CAROUSEL - hidden, available on template
TOP BANNER - section_banner_top partial
COUNTERS - section_counters partial
CONNECT WITH US - section_social partial
SPONSORSHIPS - section_sponsorships partial
SPONSORSHIP PROGRAM - section_sponsorship_information partial
RECENT NEWS - section_recent_news partial
CAMPAIGNS - section_campaigns partial
TEAM - section_team partial
BOTTOM BANNER - section_banner_bottom partial
CONTACT US - section_contact_us partial

Partial Sections can be removed by deleting the 'include' information for the partial. For example, if you do not want to show the TEAM area, you would delete the following lines from the Index Template:

  <!-- TEAM SECTION -->
  {% include 'section_team' %}
  <!-- END TEAM SECTION -->

You can also reorder the sections by changing the order the partials are shown on the page. Make sure to copy / delete / paste the full partial information.
For example, to place the Campaigns before the Recent News you would change:

  <!-- RECENT NEWS SECTION -->
  {% include 'section_recent_news' %}
  <!-- END RECENT NEWS SECTION -->

  <!-- CAMPAIGNS SECTION -->
  {% include 'section_campaigns' %}
  <!-- END CAMPAIGNS SECTION -->

To this order:
  <!-- CAMPAIGNS SECTION -->
  {% include 'section_campaigns' %}
  <!-- END CAMPAIGNS SECTION -->

  <!-- RECENT NEWS SECTION -->
  {% include 'section_recent_news' %}
  <!-- END RECENT NEWS SECTION -->

To edit information in each section, go to the Partial for the section. For example, to edit your Team information, edit the section_team partial.

CSS Information: Colors and Logo

Your Logo image and many colors for your REACH Quartz Theme are set using your Site Design Settings under Account > Site Design.

Using the Site Design Area, you can set the following:

Logo Image - used for Navigation/Menu Area
Background Image - Only used on the Donation Page and Pages Supporters access once logged in
Background Style - Only used on the Donation Page and Pages Supporters access once logged in
Background Color - Only used on the Donation Page and Pages Supporters access once logged in
Font Family - Only used on the Donation Page and Pages Supporters access once logged in
Default Text Color - Paragraph/Body font color
Heading Text Color - h1, h2, h3, h4, h5, h6 font color
Site Name Color - Top and Bottom Banner Background Color - Highlight Color
Link Text Color - Links listed on a page (not the buttons)
Menu Background Color - Menu Background Color
Menu Link Text Color - Navigation / Menu Text Color
Content Wrapper Background Color - Only used on the Donation Page and Pages Supporters access once logged in
Message Background Color - Only used on the Donation Page and Pages Supporters access once logged in

CSS Information: Buttons and Banners

To Update the Button Background Color and Text Color see lines 5 - 9 on the quartz_css partial.

To Update the Top Default Banner - and Bottom Banner on the Home Page see lines 1-3 on the quartz_css partial.

Most of the CSS information for your Quartz REACH Theme is set using the quartz_css partial. However, many section partials include Style information at the top of the partial needed for most updates. For example, you can change the background color and font color of the Top Banner Section and the Bottom Banner Section by accessing the 'section_banner_top' partial. 

 At the top of the partial is information on the current style settings starting with:

  <!-- Style for the Banner Can Be Updated In The Style Section Below -->

By updating the style area on the partial, you do not need to add other CSS elsewhere.

We recommend not changing information on the quartz_css partial other than the button information at the top of the partial. Instead, use the 'custom_css' partial to add custom CSS for other changes not available on the partials.

Hero Images

Hero Images are available for your main REACH Pages including:

Home Page
Sponsorships Page
Projects Page
Places Page
Campaigns Page

Not all pages above have the Hero Image on by default, some have the Default Banner With Title enabled instead. Each Page Template includes information at the top on how to select between the Hero Image and Default Banner With Title area. Also included is information on how to change the hero image.

Team Section on Home Page

Information to update your Team Information is included in the section_team partial. Included is information on how to change the images for your Team. The section can be removed from your Index Template as needed.

Maps for Place Locations

Your Places Template includes a Location Map of all Places added to your REACH account. Place location can be added by editing the Place in your REACH Account. The map will only display if a location is set for at least one Place.

Each individual Place Page also includes a map if the location information is available. The Map can be removed from the Places Template and the Place Template by deleting the map partial. 

For example, to remove from the Places Template remove the following lines:

  <!-- PLACES MAP DISPLAY -->
  {% include 'map_places' %}
  <!-- PLACES MAP DISPLAY -->

The Map is also included in the Project Template to display the location of a Project that has been linked to a Place. A Project can be liked to a Place by editing the Project in your REACH Account.

The map can be removed by deleting the map_project partial on the Project Template:

  <!-- PROJECT MAP DISPLAY -->
  {% include 'map_project' %}
  <!-- PROJECT MAP DISPLAY -->

404 Page

The Quartz REACH Theme includes a 404 page for visitors that try to access a URL not included in your REACH site. The 404 Template includes a message that can be updated and a list of a few random available sponsorships. The message and sponsorship information can be updated by editing the 404 Template.

If you need additional assistance with your REACH Theme, we do offer site design customization. Email us to request a quote. 

REACH20191008

Feedback and Knowledge Base